La balise HTML blink et son remplacement en CSS

Remplacer la balise HTML blink

Balise HTML blink : pourquoi elle a disparu et son remplacement CSS | We.Inc

L'élément blink est obsolète et les navigateurs modernes ne le font plus clignoter. Créez un clignotement CSS accessible avec un bouton pause, une limite de cycles et la prise en charge du mouvement réduit.

L'élément blink est obsolète : le standard HTML le classe comme non conforme et recommande d'utiliser CSS, et les navigateurs actuels affichent son texte comme du texte simple et fixe. Pour faire clignoter un élément aujourd'hui, écrivez une animation CSS avec keyframes, arrêtez-la après quelques cycles ou offrez une commande de pause, et désactivez-la sous prefers-reduced-motion.

L'ancien markup blink et ce qu'il faut utiliser maintenant

Ancienne méthode
Statut
À utiliser à la place

<blink>text</blink>
Obsolète, non conforme
Une animation CSS sur un span

text-decoration: blink
Dépréciée, les navigateurs peuvent ne pas clignoter
@keyframes qui modifient l'opacité

<marquee>
Obsolète, non conforme
Transitions ou animations CSS

Clignotement sans fin
Échoue au critère WCAG 2.2.2 après cinq secondes sans pause
Une limite de cycles ou un bouton pause

La balise blink est un morceau d'histoire du web que l'on recherche encore, généralement pour faire clignoter un point de statut, un curseur ou un badge de promotion. Le générateur ci-dessous produit cet effet de façon moderne et le maintient dans les règles d'accessibilité : le mouvement est court, peut être arrêté et respecte les réglages du visiteur.

Réglez la période de clignotement et choisissez un fondu doux ou une alternance franche allumé et éteint.
Choisissez le nombre de cycles, ou sélectionnez sans fin et gardez le bouton pause.
Surveillez la durée totale : au-delà de cinq secondes, il faut un moyen de mettre en pause.
Copiez le CSS et le HTML. La règle de mouvement réduit est incluse par défaut.

Faites clignoter un petit élément, comme un point ou un curseur, jamais un paragraphe que les gens doivent lire.
Gardez chaque cycle bien plus lent que trois flashs par seconde pour rester loin du seuil de crise du critère WCAG 2.3.1.
Une animation-iteration-count finie est le moyen le plus simple de rester sous cinq secondes sans ajouter de commande.
Quand le mouvement réduit est activé, affichez l'élément de façon fixe plutôt que de le masquer, pour que l'information reste présente.

Questions fréquentes

La balise blink fonctionne-t-elle encore ?

Aucun navigateur actuel ne la fait clignoter. Le standard HTML considère blink comme un élément obsolète et non conforme, donc son contenu s'affiche comme du texte inline ordinaire. Les validateurs le signalent comme une erreur.

Et text-decoration: blink ?

La valeur blink de text-decoration-line est dépréciée, et la spécification autorise les navigateurs à ne pas faire clignoter le texte du tout. Une animation keyframes est le remplacement fiable.

Le texte clignotant est-il autorisé par les WCAG ?

Le critère WCAG 2.2.2 Mettre en pause, arrêter, masquer est de niveau A : un clignotement qui démarre automatiquement, dure plus de cinq secondes et côtoie d'autres contenus doit pouvoir être mis en pause, arrêté ou masqué. Par ailleurs, le critère 2.3.1 limite les flashs à trois par seconde.

Comment créer un curseur clignotant en CSS ?

Animez une bordure fine ou un caractère barre verticale avec steps(1) pour alterner entre visible et masqué, à environ un cycle par seconde. Un curseur dans une démo de saisie est décoratif, donc donnez-lui aria-hidden="true".

Comment respecter le mouvement réduit ?

Placez une surcharge dans @media (prefers-reduced-motion: reduce) et définissez animation: none sur l'élément qui clignote. Cette media feature est largement prise en charge et suit le réglage de mouvement du système d'exploitation du visiteur.

Pourquoi blink a été supprimé

Un texte qui clignote détourne l'attention de tout le reste de la page et se lit mal puisqu'il est invisible la moitié du temps. Pour les personnes ayant des troubles de l'attention ou vestibulaires, il peut rendre une page inutilisable, c'est pourquoi les standards ont sorti le clignotement du HTML pour le placer dans CSS, où il peut être contrôlé.
L'effet lui-même n'est pas interdit. Ce qui compte, c'est sa durée, la vitesse des flashs et la possibilité de l'arrêter.

Un clignotement sûr en trois règles

D'abord, des keyframes qui modifient l'opacité, ce qui s'affiche de façon fluide. Ensuite, un nombre d'itérations fini ou une commande de pause visible. Enfin, une surcharge de mouvement réduit qui laisse l'élément fixe.
La propriété animation-play-state rend un bouton pause simple : basculez une classe qui la règle sur paused, et l'élément se fige là où il est.

Effets de clignotement modifiables

Un point de statut en direct qui pulse trois fois

Trois cycles d'une seconde se terminent bien avant cinq secondes, donc aucune commande de pause n'est nécessaire. Modifiez le code pour recharger le cadre.

Curseur de saisie avec alternance franche

steps(1, end) bascule instantanément au lieu de faire un fondu. Le curseur est décoratif, il est donc masqué aux lecteurs d'écran.

Ce que fait l'ancienne balise aujourd'hui

Les navigateurs affichent le contenu d'un élément blink obsolète comme du texte ordinaire. Rien ne clignote.

Un bouton pause pour un clignotement sans fin

Si le clignotement doit durer plus de cinq secondes, ajoutez un vrai bouton qui l'arrête.

Basculer une classe paused depuis un bouton

aria-pressed indique aux technologies d'assistance si l'animation est actuellement en pause.

Générateur de clignotement accessible

Nouveau

Le menu de printemps est arrivé

Un cycle : {n} ms

Fondu doux

Allumé et éteint franc

Cycles

Sans fin

Désactiver en mouvement réduit

Pause

Reprendre

Rejouer

Durée totale : {n} secondes

Tourne jusqu'à la pause

Moins de cinq secondes, aucune commande de pause n'est donc requise.

Plus de cinq secondes : gardez un bouton pause visible à côté (WCAG 2.2.2).

Copier le CSS

Commencer gratuitement · Sans carte bancaire