HTML <blink>-Tag
Das <blink>-Tag war ein HTML-Element, das zum Erstellen von blinkendem Text auf einer Webseite verwendet wurde. Dieses Tag wurde in HTML 4.0 als veraltet markiert und wird von modernen Browsern nicht mehr unterstützt. Es wurde weithin als schlechte Designentscheidung angesehen und war oft mit einer schlechten Benutzererfahrung verbunden.
Da das <blink>-Tag nicht mehr verwendet wird, empfiehlt es sich, ähnliche Effekte mit CSS oder JavaScript zu erzielen. Beachten Sie jedoch, dass blinkender oder sich schnell ändernder Inhalt für Benutzer ärgerlich oder ablenkend sein kann und möglicherweise nicht den Richtlinien für Barrierefreiheit entspricht.
DANGER
Das <blink> ist ein veraltetes HTML-Tag. Obwohl einige Browser <blink> möglicherweise noch unterstützen, wird die Unterstützung schrittweise eingestellt. Verwenden Sie dieses Element nicht, da Ihre Seiten sonst beschädigt werden könnten. Verwenden Sie stattdessen CSS und JavaScript, um einen Blink-Effekt zu erstellen.
Beispiel für HTML <blink>-Code:
Beispiel für das HTML <blink>-Tag
<!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>Blink-Effekt mit CSS
Eine weitere Möglichkeit, den Blink-Effekt zu erzielen, ist die Verwendung von CSS3-Animationen in Kombination mit der @keyframes-Regel.
Beispiel für Blink-Effekt mit CSS3-Animation:
Beispiel für Blink-Effekt mit CSS-Animation
<!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
Der Schlüsselwort blink der Eigenschaft text-decoration ist jedoch nicht Teil der CSS-Spezifikation und wird auf den meisten Browsern nicht unterstützt.
Eine Alternative, um den Blink-Effekt zu erzielen, ist die Verwendung des Schlüsselworts blink der CSS-Eigenschaft text-decoration.
Beispiel für Blink-Effekt mit der CSS-Eigenschaft text-decoration:
Beispiel für Blink-Effekt erstellt mit 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>Blink-Effekt mit JavaScript
Sie können auch Skripte verwenden, um das Element blinken zu lassen.
Beispiel für Blink-Effekt mit JavaScript:
Beispiel für Blinken mit 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>Practice
Was ist das Verhalten und der Status des HTML <blink> Tags?