W3docs
de
Anmelden

HTML <Blink> Tag

Das <blink>-Tag ist ein veraltetes HTML-Element, das Text blinken ließ. Erfahren Sie, warum es entfernt wurde und wie Sie Blinken mit CSS oder JavaScript erzeugen.

Das <blink>-Tag war ein nicht standardisiertes HTML-Element, das den darin enthaltenen Text ein- und ausblenden ließ. Es wurde in den 1990er Jahren vom Netscape Navigator eingeführt, jedoch nie in eine offizielle HTML-Spezifikation aufgenommen. Moderne Browser unterstützen es nicht mehr, daher hat es im heutigen Web keine Wirkung.

Diese Seite erklärt, woher das Tag stammt, warum alle Browser es entfernt haben und wie man mit CSS oder JavaScript einen Blinkeffekt auf die richtige Weise erzeugt – dabei werden stets die Barrierefreiheitseinstellungen der Nutzer berücksichtigt.

Das <blink>-Element wurde aus zwei Hauptgründen abgeschafft:

  • Es wurde nie standardisiert. Da es eine proprietäre Netscape-Erweiterung war und nie Teil der W3C-HTML-Spezifikation, hatten Browser-Hersteller keine Verpflichtung, es beizubehalten. Mozilla entfernte die <blink>-Unterstützung 2013 aus Firefox, andere Browser folgten.
  • Es schadet der Barrierefreiheit. Inhalte, die von selbst blinken oder sich bewegen, sind ein bekanntes Usability- und Barrierefreiheitsproblem. Sie lenken Leser ab, machen Text schwer lesbar und können für Menschen mit kognitiven Beeinträchtigungen, Aufmerksamkeitsstörungen oder vestibulären Erkrankungen echte Schwierigkeiten verursachen. Unkontrollierbare Bewegungen können zudem Unbehagen oder in extremen Fällen Anfälle auslösen.

Aus diesem Grund ist blinkender Inhalt durch die Web Content Accessibility Guidelines (WCAG) eingeschränkt. Erfolgskriterium 2.2.2 „Pause, Stop, Hide" verlangt, dass alle bewegten, blinkenden oder automatisch aktualisierten Inhalte, die länger als fünf Sekunden dauern, vom Benutzer angehalten, gestoppt oder ausgeblendet werden können. Das alte <blink>-Tag bot den Nutzern keine Möglichkeit dazu – das ist einer der Gründe, warum es als Anti-Pattern gilt.

Wenn Sie dennoch einen Blinkeffekt wünschen, verwenden Sie CSS oder JavaScript (siehe unten) und stellen Sie stets sicher, dass die Präferenz für reduzierte Bewegung der Nutzer berücksichtigt wird.

HTML blink tag

Gefahr

Das <blink>-Tag ist ein veraltetes HTML-Tag. Obwohl einige Browser möglicherweise noch <blink> unterstützen, wird die Unterstützung schrittweise eingestellt. Verwenden Sie dieses Element nicht, da Ihre Seiten sonst beschädigt werden können. Sie können stattdessen CSS und JavaScript verwenden, um einen Blinkeffekt zu erzeugen.

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 &lt;blink&gt; Element </h1>
    <blink>The &lt;blink&gt; element is deprecated. To attain blinking effect you should use CSS or JavaScript. See examples in the next section.</blink>
  </body>
</html>
Probier es selbst »

Blinkeffekt mit CSS

Die empfohlene, standardbasierte Methode zur Erzeugung eines Blinkeffekts ist die CSS-Animation mit der @keyframes-Regel. Dies gibt Ihnen die volle Kontrolle über das Timing und ermöglicht es wichtigerweise, die Animation für Nutzer zu deaktivieren, die ihr System so eingestellt haben, dass Bewegungen reduziert werden.

Kombinieren Sie die Animation stets mit einem @media (prefers-reduced-motion: reduce)-Block. Dieses Media-Feature erkennt die Betriebssystemeinstellung, die manche Menschen aktivieren, um Bewegungen zu vermeiden, die Unbehagen verursachen können – und es ist die Methode, mit der Sie die oben beschriebene Barrierefreiheitsanforderung erfüllen.

Beispiel für einen Blinkeffekt mit CSS3-Animation:

Beispiel für einen Blinkeffekt mit CSS-Animation

<!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>
Probier es selbst »

Der historische text-decoration: blink-Wert (nicht verwenden)

Möglicherweise stoßen Sie noch auf alten Code, der das Schlüsselwort blink der CSS text-decoration-Eigenschaft verwendet. Es wird hier nur gezeigt, damit Sie es in veralteten Seiten erkennen können. Verwenden Sie es nicht in neuen Projekten.

Gefahr

Das Schlüsselwort blink der Eigenschaft text-decoration ist kein Teil der CSS-Spezifikation und wird von modernen Browsern nicht unterstützt. Es ist rein historisch und hat heute keine Wirkung.

Beispiel für einen Blinkeffekt mit der CSS-Eigenschaft text-decoration (veraltet):

Beispiel für einen Blinkeffekt 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>
Probier es selbst »

Blinkeffekt mit JavaScript

Sie können auch Skripte verwenden, um ein Element blinken zu lassen.

Beispiel für einen Blinkeffekt mit JavaScript:

Blinkeffekt mit JavaScript – Beispiel

<!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>
Probier es selbst »

Verwandte Themen

Übungen

Übung
Was ist der Status des HTML-blink-Elements?
Was ist der Status des HTML-blink-Elements?
Übung
Welche CSS-Regel sollten Sie einer blinkenden Animation hinzufügen, damit sie die Barrierefreiheitseinstellungen der Nutzer berücksichtigt?
Welche CSS-Regel sollten Sie einer blinkenden Animation hinzufügen, damit sie die Barrierefreiheitseinstellungen der Nutzer berücksichtigt?
Was this page helpful?