La balise HTML <Blink>
La balise <blink> est un élément HTML déprécié qui faisait clignoter le texte. Découvrez pourquoi elle a été supprimée et comment recréer cet effet avec CSS ou JavaScript.
La balise <blink> était un élément HTML non standard utilisé pour faire clignoter le texte qu'elle contenait. Introduite par Netscape Navigator dans les années 1990, elle n'a jamais été intégrée à aucune spécification HTML officielle. Les navigateurs modernes ne la prennent plus en charge, de sorte qu'elle n'a aucun effet sur le Web actuel.
Cette page explique l'origine de cette balise, les raisons pour lesquelles tous les navigateurs l'ont supprimée, et comment créer un effet de clignotement de la bonne manière en utilisant CSS ou JavaScript, tout en respectant les préférences d'accessibilité de vos utilisateurs.
Pourquoi la balise <blink> a été supprimée
L'élément <blink> a été abandonné pour deux raisons principales :
- Il n'a jamais été standardisé. Étant une extension propriétaire de Netscape et n'ayant jamais fait partie de la spécification HTML du W3C, les éditeurs de navigateurs n'avaient aucune obligation de le conserver. Mozilla a supprimé la prise en charge de
<blink>dans Firefox en 2013, et les autres navigateurs ont suivi. - Il nuit à l'accessibilité. Les contenus qui clignotent ou bougent de manière autonome constituent un problème d'utilisabilité et d'accessibilité reconnu. Ils distraient les lecteurs, rendent le texte difficile à lire et peuvent causer de réelles difficultés aux personnes souffrant de troubles cognitifs, de troubles de l'attention ou de troubles vestibulaires. Le mouvement incontrôlable peut également provoquer de l'inconfort, voire des crises d'épilepsie dans les cas extrêmes.
Pour ces raisons, les contenus clignotants sont encadrés par les Règles pour l'accessibilité des contenus Web (WCAG). Le Critère de succès 2.2.2 « Mettre en pause, arrêter, masquer » exige que tout contenu en mouvement, clignotant ou mis à jour automatiquement pendant plus de cinq secondes puisse être mis en pause, arrêté ou masqué par l'utilisateur. L'ancienne balise <blink> ne donnait aux utilisateurs aucun moyen de le faire, ce qui en fait un anti-pattern.
Si vous souhaitez tout de même créer un effet de clignotement, utilisez CSS ou JavaScript (voir ci-dessous) et prévoyez toujours un moyen de respecter les préférences des utilisateurs qui optent pour la réduction des animations.
La balise <blink> est une balise HTML dépréciée. Même si certains navigateurs peuvent encore la prendre en charge, ce support est en cours de suppression. N'utilisez pas cet élément, au risque de casser vos pages. Vous pouvez utiliser CSS et JavaScript à la place pour créer un effet de clignotement.
Exemple de code HTML avec <blink> :
Exemple de la balise 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>Effet de clignotement avec CSS
La méthode recommandée et conforme aux standards pour créer un effet de clignotement consiste à utiliser l'animation CSS avec la règle @keyframes. Cela vous donne un contrôle total sur le minutage et vous permet surtout de désactiver l'animation pour les utilisateurs ayant demandé à leur système de réduire les animations.
Associez toujours l'animation à un bloc @media (prefers-reduced-motion: reduce). Cette media feature détecte le paramètre du système d'exploitation que certaines personnes activent pour éviter les mouvements susceptibles de causer de l'inconfort — c'est ainsi que vous répondez au problème d'accessibilité décrit ci-dessus.
Exemple d'effet de clignotement avec l'animation CSS3 :
Exemple d'effet de clignotement avec l'animation CSS
<!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>La valeur historique text-decoration: blink (à ne pas utiliser)
Vous pouvez encore rencontrer du code ancien utilisant le mot-clé blink de la propriété CSS text-decoration. Cette information est présentée ici uniquement pour vous permettre de la reconnaître dans des pages héritées. Ne l'utilisez pas dans vos nouveaux projets.
Le mot-clé blink de la propriété text-decoration ne fait pas partie de la spécification CSS et n'est pas pris en charge par les navigateurs modernes. Il est purement historique et n'a aucun effet aujourd'hui.
Exemple d'effet de clignotement avec la propriété CSS text-decoration (héritage) :
Exemple d'effet de clignotement créé avec 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>Effet de clignotement avec JavaScript
Vous pouvez également utiliser des scripts pour faire clignoter un élément.
Exemple d'effet de clignotement avec JavaScript :
Exemple de clignotement avec 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>Sujets connexes
- Balises HTML dépréciées — la liste complète des éléments à éviter, dont
<blink>. - La balise HTML marquee — un autre élément déprécié basé sur le mouvement, présentant les mêmes problèmes d'accessibilité.
- Les éléments sémantiques en HTML5 — écrivez un balisage significatif et accessible plutôt que d'utiliser des effets purement visuels.
- CSS @keyframes et animation CSS — la méthode moderne pour animer.