Unterstützung älterer Browser

Jede Website ist in Bezug auf ihr Zielpublikum unterschiedlich. Bevor Sie einen Ansatz wählen, sollten Sie herausfinden, wie viele Besucher Ihrer Seite ältere Browser verwenden. Dies ist unkompliziert, wenn Sie eine bestehende Website ergänzen oder ersetzen, da Sie wahrscheinlich über Analysen verfügen, die Ihnen die verwendete Technologie Ihrer Besucher aufzeigen. Wenn Sie keine Analysen haben oder eine brandneue Seite starten, können Seiten wie Statcounter relevante Statistiken liefern, die nach Standort gefiltert werden können.

Sie sollten auch die Art der Geräte und die Nutzung Ihrer Seite berücksichtigen. Erwarten Sie beispielsweise eine überdurchschnittliche Nutzung Ihrer Website auf mobilen Geräten? Priorisieren Sie immer die Barrierefreiheit und Menschen mit unterstützender Technologie; für einige Seiten kann dies noch wichtiger sein. Entwickler sorgen sich oft sehr um das Erlebnis von 1% der Benutzer, während sie die weitaus größere Anzahl mit Barrierefreiheitsanforderungen übersehen.

Eine Website kann in allen Browsern unmöglich gleich aussehen. Einige Ihrer Benutzer werden die Seite auf einem Telefon betrachten, andere auf einem großen Desktop-Bildschirm. Ebenso werden einige Ihrer Benutzer eine alte Browserversion haben und andere die neueste. Einige Ihrer Benutzer hören Ihre Inhalte möglicherweise über einen Bildschirmleser, während andere die Seite vergrößern müssen, um sie lesen zu können. Alle Nutzenden 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 unabhängig davon nutzbar bleibt, wie sie auf Ihre Inhalte zugreifen.

Ein grundlegendes Maß an Unterstützung ergibt sich aus der guten Strukturierung Ihrer Inhalte, sodass der normale Fluss Ihrer Seite Sinn ergibt. Für Benutzer mit einem begrenzten Datentarif können ihre Browser möglicherweise keine Bilder, Schriften oder sogar Ihr CSS laden. Der Inhalt sollte jedoch in einer Weise präsentiert werden, dass er zugänglich und lesbar ist, selbst wenn diese Elemente nicht vollständig geladen werden. Ein gut strukturiertes HTML-Dokument sollte immer Ihr Ausgangspunkt sein. Fragen Sie sich: Wenn Sie Ihr Stylesheet entfernen, macht Ihr Inhalt dann immer noch Sinn?

Es macht keinen kommerziellen Sinn, Zeit damit zu verbringen, jedem ein identisches Erlebnis Ihrer Website zu bieten. Dies liegt daran, dass sich Benutzerumgebungen stark unterscheiden und Ihrer Kontrolle entzogen sind. Es ist ein Gleichgewicht zwischen einer einfachen HTML-Seite und einer voll ausgestatteten Website zu finden. Es ist hilfreich, eine einfache, CSS-lose Ansicht Ihrer Seite zu testen, um sicherzustellen, dass die Fallback-Erfahrung Ihrer Seite zugänglich ist. Dieses Fallback wird möglicherweise nie von Personen mit sehr alten oder eingeschränkten Browsern betrachtet, könnte aber von Ihrer Hauptzielgruppe — Nutzern moderner Browser — betrachtet werden, wenn ihr Browser oder ihre Internetverbindung vorübergehend ausfällt. CSS vereinfacht die Erstellung dieser Fallbacks. Daher ist es besser, sich auf das zu konzentrieren, was Sie kontrollieren können, d. h. die Zeit aufzuwenden, um Ihre Seite zugänglich zu machen und so mehr Nutzern zu dienen.

CSS-Spezifikationen enthalten Informationen, die erklären, was der Browser tut, wenn zwei ähnliche Funktionen, wie Layoutmethoden, auf dasselbe Element angewendet werden. Zum Beispiel definieren sie, was passiert, wenn ein Element gefloatet ist und gleichzeitig ein Grid-Element 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 ein neues Feature nicht erkennt, verwirft er die Deklaration als ungültig ohne einen Fehler auszulösen. Da Browser CSS-Eigenschaften und -Werte, die sie nicht unterstützen, verwerfen, können sowohl alte als auch neue Werte im selben Regelwerk koexistieren. Achten Sie darauf, den alten Wert vor dem neuen Wert zu deklarieren, damit der neue Wert, wenn er unterstützt wird, den alten Wert (das Fallback) überschreibt.

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

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

Ähnlich sorgt dieses Fehlerbehandlungsverfahren dafür, dass alte CSS-Codebasen weiterhin funktionieren, selbst wenn veraltete Browser-Vendor-Präfixe nicht mehr unterstützt werden. Während Vendor-Präfixe nicht mehr häufig verwendet werden, sollten Sie, falls Sie ein solches Präfix oder einen Wert hinzufügen müssen, darauf achten, den präfixierten Wert vor dem Standardwert zu deklarieren, sodass, wenn unterstützt, der neue Wert den Fallback-Wert überschreibt.

Das Einfügen 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 veraltete Pseudo-Elemente oder neue Pseudo-Klassen verwenden, die ein Browser möglicherweise noch nicht unterstützt, sollten Sie die präfixierten Werte in eine nachsichtige Selektorliste einfügen, 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, aber nicht red sein.

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

Wir können eine Feature-Abfrage hinzufügen, um die subgrid-Unterstützung 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 für vollständig unterstützte Funktionen zuerst, außerhalb von Feature-Abfragen. Sobald Ihre Seite für alle Benutzer nutzbar und zugänglich ist, fügen Sie neue Funktionen innerhalb von Feature-Abfrageblöcken hinzu. Browser, die das angeforderte Feature unterstützen, können dann das neuere CSS innerhalb des Feature-Abfrageblocks rendern. Verwenden Sie den Ansatz, gut unterstütztes CSS zuerst zu schreiben und dann Funktionen basierend auf der Unterstützung zu erweitern.

Eine Möglichkeit besteht darin, ein Online-Testtool wie Sauce Labs zu verwenden, wie im Cross-Browser-Testing-Modul beschrieben.

Sie verfügen nun über das Wissen, um Fallback-CSS für ältere Browser bereitzustellen und neue Funktionen sicher zu testen. Sie sollten sich jetzt sicher fühlen, neue Techniken anzuwenden, die möglicherweise aufkommen.

Nachdem 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: Grundlegendes Verständnis von Layouts.

• @supports At-Regel
• CSS-At-Regeln
• Verwendung von Feature-Abfragen
• CSS-Bedingte Regeln Modul

• Zurück
• Übersicht: CSS Layout
• Weiter