Balise HTML <blink>
La balise <blink> était un élément HTML utilisé pour créer du texte clignotant sur une page web. Cette balise a été dépréciée dans HTML 4.0 et n'est pas prise en charge par les navigateurs modernes. Elle était largement considérée comme un mauvais choix de conception et était souvent associée à une mauvaise expérience utilisateur.
La balise <blink> n'étant plus utilisée, il est recommandé d'obtenir des effets similaires à l'aide de CSS ou de JavaScript. Cependant, gardez à l'esprit que le contenu clignotant ou changeant rapidement peut être ennuyeux ou distrayant pour les utilisateurs et peut ne pas respecter les directives d'accessibilité.
DANGER
La balise <blink> est une balise HTML dépréciée. Bien que certains navigateurs puissent encore prendre en charge <blink>, elle est en cours de suppression. N'utilisez pas cet élément, sinon vos pages pourraient être cassées. Vous pouvez utiliser CSS et JavaScript à la place pour créer un effet de clignotement.
Exemple de code HTML <blink> :
Exemple de 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
Une autre façon d'obtenir l'effet de clignotement est d'utiliser l'animation CSS3 avec la règle @keyframes.
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;
}
}
</style>
</head>
<body>
<h1 class="blink">Blinking Text Example</h1>
</body>
</html>DANGER
Cependant, 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 la plupart des navigateurs.
Une autre façon d'obtenir l'effet de clignotement est d'utiliser le mot-clé blink de la propriété CSS text-decoration.
Exemple d'effet de clignotement avec la propriété CSS text-decoration :
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 l'é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() {
var blink = document.getElementById('blink');
setInterval(function() {
blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
}, 1000);
});
</script>
</body>
</html>Pratique
Quel est le comportement et le statut de la balise HTML <blink> ?