HTML-тег <Blink>
Тег <blink> — устаревший HTML-элемент для мигания текста. Узнайте, почему он был удалён и как создать мигание с помощью CSS или JavaScript.
Тег <blink> был нестандартным HTML-элементом, который заставлял заключённый в него текст мигать. Он появился в браузере Netscape Navigator в 1990-х годах, однако так и не вошёл ни в одну официальную спецификацию HTML. Современные браузеры больше не поддерживают его, поэтому на сегодняшнем веб он ничего не делает.
На этой странице рассказывается, откуда взялся тег, почему все браузеры от него отказались, и как правильно создать эффект мигания с помощью CSS или JavaScript, не забывая при этом об удобстве и доступности для пользователей.
Почему тег <blink> был удалён
Элемент <blink> был исключён по двум основным причинам:
- Он так и не был стандартизован. Поскольку это было проприетарное расширение Netscape, никогда не входившее в спецификацию W3C HTML, производители браузеров не были обязаны его поддерживать. Mozilla удалила поддержку
<blink>из Firefox в 2013 году, остальные браузеры последовали за ней. - Он ухудшает доступность. Контент, который мигает или движется самостоятельно, — известная проблема с точки зрения удобства использования и доступности. Он отвлекает читателей, затрудняет восприятие текста и может создавать серьёзные трудности для людей с когнитивными нарушениями, расстройствами внимания или вестибулярными расстройствами. Неконтролируемое движение может также вызвать дискомфорт или, в крайних случаях, спровоцировать судороги.
По этим причинам мигающий контент ограничен Руководством по обеспечению доступности веб-контента (WCAG). Критерий успеха 2.2.2 «Пауза, остановка, скрытие» требует, чтобы любой движущийся, мигающий или автоматически обновляемый контент, продолжающийся более пяти секунд, можно было поставить на паузу, остановить или скрыть. Старый тег <blink> не давал пользователям такой возможности — это одна из причин, по которой он считается антипаттерном.
Если вам всё же нужен эффект мигания, используйте CSS или JavaScript (примеры ниже) и всегда предусматривайте способ учесть настройки тех пользователей, которые предпочитают уменьшенное движение.
Тег <blink> является устаревшим HTML-тегом. Хотя некоторые браузеры ещё могут поддерживать <blink>, его поддержка постепенно прекращается. Не используйте этот элемент — иначе ваши страницы могут отображаться некорректно. Для создания эффекта мигания используйте вместо него CSS и JavaScript.
Пример кода HTML <blink>:
Пример тега HTML <blink>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blink {
color: #1c87c9;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>The <blink> Element </h1>
<blink>The <blink> element is deprecated. To attain blinking effect you should use CSS or JavaScript. See examples in the next section.</blink>
</body>
</html>Эффект мигания с помощью CSS
Рекомендуемый, основанный на стандартах способ создания эффекта мигания — CSS animation с правилом @keyframes. Это даёт полный контроль над временными параметрами и, что важно, позволяет отключить анимацию для пользователей, настроивших свою систему на уменьшение движения.
Всегда сопровождайте анимацию блоком @media (prefers-reduced-motion: reduce). Этот медиа-запрос определяет системную настройку, которую некоторые пользователи включают, чтобы избежать движения, способного вызвать дискомфорт, — именно так реализуются требования доступности, описанные выше.
Пример эффекта мигания с CSS3 animation:
Пример эффекта мигания с CSS animation
<!DOCTYPE html>
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
/* Turn the animation off for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.blink {
animation: none;
}
}
</style>
</head>
<body>
<h1 class="blink">Blinking Text Example</h1>
</body>
</html>Историческое значение text-decoration: blink (не используйте)
В старом коде вы можете встретить ключевое слово blink в свойстве CSS text-decoration. Оно приведено здесь только для того, чтобы вы могли узнать его в устаревших страницах. Не используйте его в новых проектах.
Ключевое слово blink свойства text-decoration не является частью спецификации CSS и не поддерживается современными браузерами. Оно носит сугубо исторический характер и не оказывает никакого эффекта сегодня.
Пример эффекта мигания с помощью свойства CSS text-decoration (устаревший):
Пример эффекта мигания, созданного с помощью text-decoration
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blink {
text-decoration: blink;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<p class="blink">This text may blink depending on the browser you use.</p>
</body>
</html>Эффект мигания с помощью JavaScript
Вы также можете использовать скрипты, чтобы заставить элемент мигать.
Пример эффекта мигания с JavaScript:
Пример мигания с JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blink {
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
color: #1c87c9;
transition: 0.4s;
}
</style>
</head>
<body>
<p id="blink">Blinking Effect with JavaScript</p>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const blink = document.getElementById('blink');
let visible = true;
setInterval(function() {
visible = !visible;
blink.style.opacity = visible === true ? 1 : 0;
}, 1000);
});
</script>
</body>
</html>Связанные темы
- Устаревшие HTML-теги — полный список элементов, которых следует избегать, включая
<blink>. - HTML-тег marquee — ещё один устаревший элемент с движением, имеющий те же проблемы с доступностью.
- Семантические элементы в HTML5 — пишите осмысленную, доступную разметку вместо декоративных приёмов.
- CSS @keyframes и CSS animation — современный способ создания анимации.