Re­sur­rec­tion of the Blink Tag

In den frühen Tagen des Internets war bei weitem nicht alles schlecht. Ganz im Gegenteil: Es gab eine Vielzahl sinnvoller und solider Möglichkeiten, Websites optisch interessant zu gestalten. Zu erwähnen sind hier vor allem die praktischen Framesets sowie stabile tabellenbasierte Webdesigns – entsprechende Designs lassen sich heutzutage nur mit viel Aufwand und umständlichem CSS3 reproduzieren. Zwei hilfreiche Tags waren außerdem der Marquee- und der Blink-Tag. Beide waren hervorragend geeignet, um Informationen hervorzuheben und Websites zu verschönern – z.B. durch Aufblinkenlassen wichtiger Headlines, Menüeinträge, Textabsätze oder ganzer Tabellen. Leider funktionieren diese Tags derzeit nicht zuverlässig in aktuellen Browsern. Für den Blink-Tag haben wir jedoch eine Lösung!

Status Quo in HTML5 & Co

Bei der Weiterentwicklung von HTML4 und XHTML war man unachtsam und hat vergessen, wichtige Funktionen in neue Standards zu migrieren. So ist der Blink-Tag lt. Can I Use bereits seit Opera 15 bzw. Firefox 22 nach wie vor nicht verfügbar. Allerdings wird bei Can I Use auch der Netscape-Navigator in der Liste der Browser gar nicht aufgeführt!!1 Nachdem man wohl beim W3C diese Fehler bemerkt hat, hat man die Tags in der Dokumentation einfach als „obsolete“ und „deprecated“ angegeben – so einfach kann das Leben sein ¯\_(ツ)_/¯.

Dass der Blink-Tag aber sehr sinnvoll und wichtig für eine gute User Experience ist, lässt sich zweifelsfrei damit belegen, dass Google die Funktion in den eigenen SERPs implementiert hat. Daher haben wir nach einer allgemeingültigen Lösung gesucht, den Tag wieder nutzbar zu machen.

Wie verwendet man den Blink Tag richtig?

Der Blink-Tag ist ein einfaches HTML-Element, das sich überall einsetzen ließ bzw. lässt. Der Inhalt innerhalb des Tags wird durch eine angenehme Blink-Animation hervorgehoben.

Example

Ein typisches Beispiel für die Verwendung sieht z.B. wie folgt aus:

<table border=20 bgcolor=green bordercolor=purple>
 <tr>
  <td>
   <h1>
    <font size=+4 color=red>
     <b><blink>Hello World! I'm blinking.</blink></b>
    </font>
   </h1>
  </td>
 </tr>
</table>

Leider stellt man fest, dass der Blink-Tag keine Auswirkungen mehr hat. Aber es gibt Abhilfe.

Blink Tag Polyfill

Wenn man den Blink-Tag wieder zum Leben erwecken möchte, kann man dies ganz einfach tun, indem man folgenden Code bei jeder HTML-Datei im Header hinzufügt:

<style>
 @keyframes blink-tag {
  to { visibility: hidden; } 
 } 
 blink { 
  animation: blink-tag 1s steps(5, start) infinite;
 } 
 </style>

Et voilà! Ab sofort kann der Blink-Tag wieder genutzt werden. Hier gibt’s das Beispiel in Aktion und als kostenlosen Download!

Good old Days

Wir wollen die Serie über solide gute alte Technik fortführen; folgende Themen sind in Planung:

• Marquee-Tag-Polyfill auf jQuery-Basis (vsl. 1. April 2023)
• Box-Shadow durch Gifs und Tabellen ersetzen (vsl. 1. April 2024)
• Polyfill für Framesets mit DHTML (vsl. 1. April 2025)
• Desktop First – richtiges Gestalten mit Tabellen-Designs (vsl. 1. April 2026)