W3docs
de
Anmelden

HTML5-Browserunterstützung

Nützliche Informationen zur Browserunterstützung in HTML5, semantische Elemente, HTML5Shiv und moderne Feature-Erkennung mit Beispielen.

Jeder Evergreen-Browser — Chrome, Firefox, Safari und Edge — unterstützt HTML5 semantische Elemente seit über einem Jahrzehnt nativ (ungefähr seit 2013). Im heutigen Web ist das kaum noch ein Thema: Sie können <header>, <nav>, <article> und die anderen Elemente einfach verwenden, und sie funktionieren einfach.

Diese Seite behandelt zwei verwandte Themen. Erstens die eine kleine CSS-Zeile, die historisch gesehen garantierte, dass semantische Elemente als Blöcke gerendert wurden. Zweitens — hauptsächlich aus historischem Kontext — der HTML5Shiv-Polyfill, der einst benötigt wurde, damit diese Elemente im Internet Explorer 8 und früher überhaupt funktionierten. Abschließend wird der moderne Ansatz zur Überprüfung von Browserfähigkeiten vorgestellt.

Warum ältere Browser Hilfe benötigten

Wenn ein Browser auf ein unbekanntes Element trifft, ignoriert er es nicht — er fügt es trotzdem in das DOM ein. Die Frage ist, wie es gerendert wird. Standardmäßig wird ein unbekanntes Element als display: inline behandelt. Die neuen semantischen HTML5-Elemente sind jedoch alle von Natur aus Elemente auf Blockebene (wie <div>). In einem Browser, der z. B. <section> nicht kannte, würde dieses Element daher inline statt als Block dargestellt, was Abstände, Breiten und Stapelreihenfolge unauffällig beschädigte.

Ein älterer Browser konnte zwei separate Probleme haben:

  1. Layout — das Element existiert, wird aber inline statt als Block gerendert. Behoben durch eine CSS-Regel (siehe unten).
  2. CSS-Styling generell — Internet Explorer 8 und früher konnte überhaupt kein CSS auf Elemente anwenden, die es nicht kannte, bis sie per JavaScript „registriert" wurden. Das ist das Problem, das HTML5Shiv gelöst hat.

Semantische Elemente als Blockelemente

HTML5 definiert mehrere neue semantische Elemente, die alle Elemente auf Blockebene sind. Hier sind sie:

Um diese Elemente in einem älteren Browser als Blöcke darzustellen, legen Sie die CSS-display-Eigenschaft explizit fest. Moderne Browser wenden diese Regel bereits selbst an, daher schadet es nicht, sie beizubehalten:

header, section, footer, aside, nav, main, article, figure {
  display: block;
}

Beachten Sie, dass display: block allein ausreicht, um das Layout zu korrigieren. Es ermöglicht dem Internet Explorer 8 jedoch nicht von sich aus, das Element überhaupt zu stylen — diese ältere Einschränkung erforderte den JavaScript-Shim, der als Nächstes beschrieben wird.

HTML5Shiv (Legacy)

Legacy / historisch. HTML5Shiv (auch als „Shim" bezeichnet) war eine kleine JavaScript-Datei, die nur für Internet Explorer 8 und früher benötigt wurde, da dieser Browser kein CSS auf unbekannte Elemente anwenden konnte. Microsoft hat den Support für diese Versionen eingestellt, und Internet Explorer selbst erreichte 2022 sein End-of-Life. Sofern Sie keine ausdrückliche, ungewöhnliche Anforderung haben, IE 8 zu unterstützen, benötigen Sie HTML5Shiv heute nicht. Es ist hier nur zur Orientierung enthalten.

Der Shiv wird im <head> platziert und in einem <script>-Tag referenziert. Er ist in einen nur für IE gültigen bedingten Kommentar (<!--[if lt IE 9]>) eingebettet, sodass alle anderen Browser ihn vollständig ignorieren.

Beispiel für HTML5Shiv:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <section>
      <h1>The most beautiful places in the world</h1>
      <article>
        <h2>Salar de Uyuni, Bolivia</h2>
        <p>The world's largest salt flats, spanning 4086 miles (10,582 sq. km), Salar de Uyuni is unlike anywhere else on earth.</p>
      </article>
      <article>
        <h2>Moraine Lake, Canada</h2>
        <p>Moraine Lake may be only half the size of its nearby neighbour Lake Louise, but it's even more scenic.</p>
      </article>
      <article>
        <h2>Iguazu Falls, Argentina/Brazil border</h2>
        <p>One of the modern natural wonders of the world, this chain of mini waterfalls is one of the planet's most awe-inspiring sights.</p>
      </article>
    </section>
  </body>
</html>
Probier es selbst »

Der moderne Ansatz: Feature-Erkennung

Shiv-artige Polyfills haben ein fehlendes Element für einen bestimmten veralteten Browser nachgerüstet. Der zeitgemäße Umgang mit Browserunterschieden ist Feature-Erkennung: Statt zu fragen „Welcher Browser ist das?", fragt man „Unterstützt dieser Browser die gewünschte Funktion?" und passt sich entsprechend an.

In CSS prüft die @supports-At-Regel, ob ein Eigenschaft/Wert-Paar verstanden wird, bevor ein Stilblock angewendet wird:

/* Use a grid layout only where the browser supports it */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

In JavaScript prüfen Sie die API oder Eigenschaft direkt:

if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Provide a fallback
}

Dieses Muster ist zuverlässiger als das Ermitteln von Versionen, weil es die tatsächliche Fähigkeit testet, und es funktioniert weiterhin, wenn neue Browser und Versionen erscheinen. Für semantische HTML5-Elemente speziell ist in den heutigen Evergreen-Browsern überhaupt keine Erkennung erforderlich.

Was Sie noch lesen sollten

Übungen

Übung
Welche dieser Browser unterstützen HTML5 semantische Elemente nativ (kein Shiv erforderlich)?
Welche dieser Browser unterstützen HTML5 semantische Elemente nativ (kein Shiv erforderlich)?
Was this page helpful?