144 Данная статья является субъективным мнением Криса Койера. Основная ее идея звучит так:
Пустые DIV элементы, используемые для анимации, не являются семантическими. Это было и остается плохой идеей, как для CSS, так и вообще.
Крис настаивает на том, что индустрия уже сделала все, чтобы верстка была семантически правильной. Делая ее верной, вы получите награду в виде скорости, доступности, правки и SEO.
Мы часто совершаем ошибки, в том, числе не исключение и автор статьи. Были времена (например, когда нельзя было скачать майкрософт офис бесплатно. Сейчас-то с этим проблем нет.), когда нужно было сделать быструю CSS анимацию. При таком раскладе меньше всего думаешь о семантике.
Именно, поэтому такие вещи надо учитывать на этапе планирования верстки, потому что потом времени на правку явно не будет. Прежде всего, когда вам нужен какой-либо элемент для анимации, подумайте, какую семантику он будет нести в HTML разметке. Что он будет значить? Какое будет нести в себе резервное содержимое?
Давайте посмотрим, что несет в себе анимация для дизайна. Она передает настроение, отношение к пользователю. Как и остальные элементы дизайна, анимация влияет на отношение пользователя к странице, которую он просматривает.
Но анимация расчитана только на зрячих пользователей, незрячие же видят(чувствуют) просто пустые DIV элементы. Такие элементы, как ненужный хлам.
|
1 2 3 |
<div class="moon"> <!-- Я ничего не несу для незрячих пользователей --> </div> |
А что, если бы мы взяли пустые DIV элементы и попытались реализовать для незрячих те же вещи, что и для зрячих. Достаточно положить в эти элементы описательный текст, происходящего действия. Это тоже самое, что и заполнение тэгов alt для изображений.
Например, сделаем анимацию восхода луны. Она поднимается в небо, а земля становится черной. Для этого нам нужно два элемента, контент для них возьмем из стихотворения или песни.
|
1 2 3 4 5 6 7 8 9 |
<div class="moon"> I see a bad moon rising I see trouble on the way </div> <div class="ground"> I see earthquakes and lightnin’ I see bad times today </div> |
CSS код скроет этот текст. Анимация же будет выполнена с помощью keyframe:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.ground, .moon { text-indent: -9999px; overflow: hidden; /* text-indent без этого может работать не так, как надо */ } .ground { -webkit-animation: ground-to-black 5s ease; -moz-animation: ground-to-black 5s ease; -ms-animation: ground-to-black 5s ease; } .moon { -webkit-animation: rising-moon 5s ease; -moz-animation: rising-moon 5s ease; -ms-animation: rising-moon 5s ease; } /* Остальная анимация */ |
Обратите внимание на keyframe анимацию. В ней представлена уже CSS семантика. Текст переменной может напрямую относится к действию, т.е. может описывать анимацию в буквальном смысле. Допустим, стихотворение, которое вызывает те же чувства, что и анимация, или audio элемент.
Ого, у нас дизайнер-фантазер.
Крис не является ярым сторонником этой идеи. Он говорит лишь о том, что уже достаточно мусора в верстке, пора делать определенные шаги в сторону контента.
А что думаете вы?
