Тег <blink> (от английского blink, «мигать») заставлял текст мигать, а сегодня не работает ни в одном современном браузере: браузер не узнаёт элемент и показывает содержимое обычным текстом. Тег парный, закрывающий тег </blink> обязателен, атрибутов у него нет. Стандарт HTML запрещает его использовать, а мигание делают в CSS через анимацию прозрачности.
<blink>Внимание!</blink>В этой статье
Что делает тег blink в HTML
Тег blink включал и выключал показ текста несколько раз в секунду, как мигающий индикатор. Атрибутов у него нет, а внутри можно было размещать другую разметку, например тег b. Вложенные теги сохраняются и сейчас.
Тег был нестандартным. В таблице поддержки справочника htmlbook он указан только у Opera с версии 2.0 и у Firefox с версии 1.0, а Internet Explorer и Safari его не поддерживали. Firefox убрал тег в версии 23, в 2013 году, и после этого ни один из основных браузеров его не поддерживает.
Как выглядело мигание, можно увидеть в CSS-замене из раздела «Чем заменить тег blink». Что делает с самим тегом современный браузер, показывает следующий раздел. Похожие устаревшие теги: marquee и font.
Почему тег blink не работает
Браузер читает blink как неизвестный элемент: он создаёт узел класса HTMLUnknownElement и выводит содержимое как обычный строчный текст. Разметка внутри сохраняется, но мигания нет.
Похожая история у значения blink свойства text-decoration. Браузер его принимает: вычисленное значение остаётся blink, а а CSS.supports() и @supports считают значение допустимым. Но спецификация CSS разрешает браузеру не мигать, и современные браузеры так и делают: текст не меняется. Справочник MDN считает это значение устаревшим в пользу CSS-анимации.
Пример: что делает браузер с blink, значением blink и анимацией
Кнопки переключают четыре строки. Под рамкой написано, какой класс браузер дал элементу и сколько раз за последние три секунды менялась прозрачность текста: измерение идёт прямо в кадре.
Только CSS-анимация меняет прозрачность и действительно мигает: у неё счётчик больше нуля. У тега, у значения blink и у обычного текста счётчик равен нулю.
Чем заменить тег blink: CSS-анимация прозрачности
Мигание делает CSS-анимация: правило @keyframes меняет прозрачность, а свойство animation запускает его без конца. Текст гаснет на середине цикла и возвращается в конце.
<p class="blink">Внимание!</p>.blink {
animation: blink 1s steps(1, end) infinite;
}
@keyframes blink {
50% { opacity: 0; }
}Функция steps(1, end) даёт резкую смену, как у старого тега, а значение ease, которое действует по умолчанию, гасит текст плавно. Период, то есть длительность цикла: при 1s текст гаснет и загорается раз в секунду. Как работают длительность и повтор, объясняет урок «Длительность и повтор: animation-duration и animation-iteration-count».
| Что нужно | Как делали с тегом | Чем заменить |
|---|---|---|
| Мигание без конца | <blink>Текст</blink> | animation: blink 1s steps(1) infinite; |
| Плавное мигание | Нельзя | animation-timing-function: ease; |
| Мигание три раза и стоп | Нельзя | animation-iteration-count: 3; |
| Скорость мигания | Нельзя | animation-duration: период в секундах |
Пример: период и плавность мигания
Кнопки подставляют период и способ смены прозрачности. Под рамкой записан расчёт числа вспышек в секунду, оценка по пределу WCAG 2.3.1 и счётчик миганий, который кадр ведёт сам.
Чем короче период, тем выше риск перейти предел: при 0,25 секунды получается четыре вспышки в секунду, и кадр помечает такую запись красным.
Ограничения: WCAG, число миганий и пауза
У мигающего текста есть два ограничения доступности. Критерий WCAG 2.3.1 уровня A ограничивает вспышки: больше трёх раз в секунду содержимое мигать не должно, если только вспыхивающая площадь не меньше порога (примерно четверть поля зрения в 10 градусов). Частые вспышки на крупной площади опасны для людей, склонных к приступам, поэтому проще всегда держаться трёх вспышек в секунду. Критерий WCAG 2.2.2 уровня A требует, чтобы мигание, которое запускается само и длится дольше 5 секунд, можно было приостановить, остановить или скрыть.
Самый простой выход: ограничить число миганий свойством animation-iteration-count, тогда текст перестанет мигать сам. Учтите и настройку системы «уменьшить движение»: для неё анимацию отключают отдельным правилом.
.blink {
animation: blink 1s steps(1, end) 3;
}
@media (prefers-reduced-motion: reduce) {
.blink {
animation: none;
}
}У паузы есть ловушка. Свойство animation-play-state со значением paused замораживает текст в той фазе, в которой он был, и в тёмной фазе на странице остаётся пустое место. Чтобы текст остался видимым, останавливают анимацию целиком: animation: none.
Пример: три мигания, пауза и остановка
Кнопки «Без конца» и «3 раза» задают число миганий. Кнопки «Пауза» и «Остановить» показывают разницу: под рамкой написано, виден ли текст после каждой из них.
Нажимайте «Пауза» несколько раз, каждый раз перезапуская анимацию кнопкой «Запустить»: иногда текст остаётся видимым, иногда исчезает. Подробнее о паузе в уроке «Пауза и запуск: animation-play-state», о настройке уменьшения движения в уроке «prefers-reduced-motion: уважение к выбору пользователя».
