HTML-тег <blink>
Тег <blink> представлял собой элемент HTML, предназначенный для создания мигающего текста на веб-странице. Этот тег был признан устаревшим в HTML 4.0 и не поддерживается современными браузерами. Он широко считался плохим дизайнерским решением и часто ассоциировался с низким качеством пользовательского опыта.
Поскольку тег <blink> больше не используется, рекомендуется достигать аналогичных эффектов с помощью CSS или JavaScript. Однако имейте в виду, что мигающий или быстро меняющийся контент может раздражать пользователей или отвлекать их, а также может не соответствовать рекомендациям по доступности.
DANGER
Тег <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
Другой способ достижения эффекта мигания заключается в использовании CSS3 анимации с правилом @keyframes.
Пример эффекта мигания с анимацией CSS3:
Пример эффекта мигания с анимацией CSS
<!DOCTYPE html>
<html>
<head>
<style>
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<h1 class="blink">Blinking Text Example</h1>
</body>
</html>DANGER
Однако ключевое слово blink свойства text-decoration не входит в спецификацию CSS и не поддерживается в большинстве браузеров.
Альтернативный способ достижения эффекта мигания — использование ключевого слова blink свойства CSS text-decoration.
Пример эффекта мигания с помощью свойства 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() {
var blink = document.getElementById('blink');
setInterval(function() {
blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
}, 1000);
});
</script>
</body>
</html>Практика
Каково поведение и статус HTML-тега <blink>?