Unterstützung älterer Browser

Jede Website ist anders in Bezug auf ihre Zielgruppe. Bevor Sie sich für eine Vorgehensweise entscheiden, finden Sie heraus, wie viele Besucher Ihre Website mit älteren Browsern besuchen. Das ist einfach, wenn Sie eine bestehende Website erweitern oder ersetzen, da Sie wahrscheinlich Analysen zur Verfügung haben, die Ihnen die Technologie Ihrer Besucher verraten. Wenn Sie keine Analysen haben oder eine brandneue Website starten, können Websites wie Statcounter relevante Statistiken liefern, die nach Standort gefiltert werden können.

Sie sollten auch die Art der Geräte und die Art und Weise, wie Menschen Ihre Website nutzen, berücksichtigen. Beispielsweise können Sie mit einer überdurchschnittlichen Nutzung Ihrer Website auf mobilen Geräten rechnen. Priorisieren Sie immer die Barrierefreiheit und Menschen, die unterstützende Technologien nutzen; für einige Websites kann dies sogar noch kritischer sein. Entwickler sind oft sehr besorgt über die Erfahrung von 1 % der Benutzer, während sie die weitaus größere Anzahl von Benutzern mit Barrierefreiheitsbedürfnissen übersehen.

Eine Website kann nicht in allen Browsern gleich aussehen. Einige Ihrer Benutzer werden die Website auf einem Telefon anzeigen und andere auf einem großen Desktop-Bildschirm. Ähnlich werden einige Ihrer Benutzer eine alte Browserversion haben, und andere die neueste Version. Einige Ihrer Benutzer hören möglicherweise Ihre Inhalte von einem Screenreader vorgelesen, während andere die Seite vergrößern müssen, um sie lesen zu können. Jeden zu unterstützen, bedeutet, eine Version Ihrer Inhalte bereitzustellen, die defensiv gestaltet ist, sodass sie in modernen Browsern großartig aussieht, aber auf einer grundlegenden Ebene für alle Benutzer nutzbar bleibt, egal wie sie auf Ihre Inhalte zugreifen.

Ein grundlegendes Maß an Unterstützung ergibt sich daraus, Ihre Inhalte so zu strukturieren, dass der normale Fluss Ihrer Seite sinnvoll ist. Für Benutzer mit einem begrenzten Datentarif lädt ihr Browser möglicherweise keine Bilder, Schriftarten oder sogar Ihr CSS. Der Inhalt sollte jedoch so präsentiert werden, dass er zugänglich und lesbar bleibt, selbst wenn diese Elemente nicht vollständig geladen sind. Ein gut strukturiertes HTML-Dokument sollte immer Ihr Ausgangspunkt sein. Fragen Sie sich: Macht Ihr Inhalt noch Sinn, wenn Sie Ihr Stylesheet entfernen?

Es macht keinen kommerziellen Sinn, Zeit dafür aufzuwenden, jedem ein identisches Erlebnis Ihrer Website zu bieten. Dies liegt daran, dass sich Benutzerumgebungen stark unterscheiden können und außerhalb Ihrer Kontrolle liegen. Sie müssen ein Gleichgewicht zwischen einer einfachen HTML-Seite und einer vollständig ausgestatteten Website finden. Es ist hilfreich, eine einfache, CSS-freie Ansicht Ihrer Website zu testen, um sicherzustellen, dass das Fallback Ihrer Website zugänglich ist. Dieses Fallback wird möglicherweise nie von Personen genutzt, die sehr alte oder eingeschränkte Browser verwenden, könnte aber von Ihrer Hauptzielgruppe — den Nutzern moderner Browser — genutzt werden, wenn ihr Browser oder ihre Internetverbindung vorübergehend ausfällt. CSS vereinfacht die Erstellung dieser Fallbacks. Daher ist es besser, sich darauf zu konzentrieren, was Sie kontrollieren können, also die Zeit zu investieren, um Ihre Seite zugänglich zu machen und somit mehr Benutzer zu bedienen.

CSS-Spezifikationen enthalten Informationen darüber, was der Browser tut, wenn zwei ähnliche Funktionen, wie Layout-Methoden, auf dasselbe Element angewendet werden. Beispielsweise definieren sie, was passiert, wenn ein Element gefloatet ist und gleichzeitig ein Grid-Item und Teil eines CSS-Grid-Containers ist. Es gibt auch eine Definition dafür, was passiert, wenn ein Element sowohl die Eigenschaften margin-top als auch margin-block-start gesetzt hat.

Wenn ein Browser eine neue Funktion nicht erkennt, verwirft er die Deklaration als ungültig ohne einen Fehler zu werfen. Da Browser CSS-Eigenschaften und -Werte, die sie nicht unterstützen, verwerfen, können alte und neue Werte im selben Regelset koexistieren. Stellen Sie einfach sicher, dass Sie den alten Wert vor dem neuen Wert deklarieren, damit der neue Wert, wenn er unterstützt wird, den alten Wert überschreibt (das Fallback).

Zum Beispiel unterstützen die meisten Browser die Zweiwertsyntax der Eigenschaft display. Wenn ein Browser dies nicht tut, verwendet er die ältere, einwertige Syntax.

.container {
  display: inline-flex;
  display: inline flex;
}

Ähnlich stellt diese Fehlerbehebung sicher, dass alte CSS-Codebasen weiterhin funktionieren, selbst wenn veraltete vendor-prefixed Funktionen nicht mehr unterstützt werden. Obwohl das Präfixieren von Anbietern nicht mehr häufig verwendet wird, sollten Sie, wenn Sie ein vendor-präfixiertes Attribut oder einen Wert einfügen müssen, den präfixierten Wert vor dem Standardwert deklarieren, damit der neue Wert, wenn er unterstützt wird, den Fallback-Wert überschreibt.

Das Einbeziehen neuer Selektoren, die nicht in allen Browsern unterstützt werden, muss sorgfältiger gehandhabt werden. Wenn ein Selektor in einer kommagetrennten Liste von Selektoren ungültig ist, wird der gesamte Stilblock ignoriert.

Wenn Sie vendor-präfixierte Pseudo-Elemente oder neue Pseudo-Klassen verwenden, die ein Browser möglicherweise noch nicht unterstützt, schließen Sie die präfixierten Werte in eine nachsichtige Selektorliste ein, indem Sie :is() oder :where() verwenden, damit der gesamte Selektorblock nicht ungültig wird und ignoriert wird.

:is(:-prefix-mistake, :unsupported-pseudo),
.valid {
  font-family: sans-serif;
}
:-prefix-mistake,
:unsupported-pseudo,
.valid {
  color: red;
}

Im obigen Beispiel wird der .valid-Inhalt sans-serif sein, aber nicht red.

Feature-Abfragen ermöglichen es Ihnen zu testen, ob ein Browser eine bestimmte CSS-Funktion unterstützt. Das bedeutet, dass Sie etwas CSS für Browser schreiben können, die eine bestimmte Funktion nicht unterstützen, dann prüfen, ob der Browser Unterstützung hat, und wenn ja, Ihre neuen Funktionen hinzufügen.

Wir können eine Feature-Abfrage hinzufügen, um die Unterstützung für subgrid zu testen und basierend auf dieser Unterstützung Stile bereitzustellen:

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: palegoldenrod;
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border-radius: 5px;
  background-color: rgb(207 232 220);
}

@supports (grid-template-rows: subgrid) {
  .wrapper {
    grid-template-rows: subgrid;
    gap: 10px;
    background-color: lightblue;
    text-align: center;
  }
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
  <div class="item">Item Four</div>
  <div class="item">Item Five</div>
  <div class="item">Item Six</div>
</div>

Feature-Abfragen werden in allen modernen Browsern unterstützt. Schreiben Sie Ihr CSS zuerst für vollständig unterstützte Funktionen, außerhalb jeglicher Feature-Abfrage. Sobald Ihre Website für alle Benutzer nutzbar und zugänglich ist, fügen Sie neue Funktionen innerhalb der Feature-Query-Blöcke hinzu. Browser, die die abgefragte Funktion unterstützen, können dann das neuere CSS innerhalb des Feature-Query-Blocks rendern. Verwenden Sie den Ansatz, gut unterstütztes CSS zuerst zu schreiben, und verbessern Sie dann die Funktionen basierend auf der Unterstützung.

Eine Möglichkeit ist die Verwendung eines Online-Testtools wie Sauce Labs, wie im Testing Modul beschrieben.

Sie haben jetzt das Wissen, um Fallback-CSS für ältere Browser bereitzustellen und neue Funktionen sicher zu testen. Sie sollten jetzt in der Lage sein, neue Techniken zu nutzen, die möglicherweise hinzukommen.

Jetzt, da Sie unsere Artikel zu CSS-Layout durchgearbeitet haben, ist es an der Zeit, Ihr Verständnis mit unserer Bewertung für das Modul zu testen: Fundamental layout comprehension.

• @supports At-Regel
• CSS At-Regeln
• Verwenden von Feature-Abfragen
• CSS-Bedingungsregeln Modul