Unterstützung älterer Browser

Jede Website unterscheidet sich in ihrer Zielgruppe. Bevor Sie sich für einen Ansatz entscheiden, sollten Sie die Anzahl der Besucher ermitteln, die ältere Browser verwenden. Dies ist einfach, wenn Sie eine vorhandene Website ergänzen oder ersetzen, da Sie wahrscheinlich Analysen verfügbar haben, die Ihnen die von Ihren Besuchern verwendete Technologie zeigen. Wenn Sie keine Analysen haben oder eine brandneue Website starten, können Websites wie Statcounter relevante Statistiken bereitstellen, die nach Standort gefiltert werden können.

Berücksichtigen Sie auch die Art der Geräte und die Art, wie Menschen Ihre Website nutzen. Beispielsweise können Sie eine überdurchschnittliche Nutzung Ihrer Website auf mobilen Geräten erwarten. Priorisieren Sie immer die Barrierefreiheit und Menschen, die unterstützende Technologien nutzen; für einige Websites kann dies sogar noch kritischer sein. Entwickler machen sich oft sehr viele Gedanken über die Erfahrung von 1 % der Nutzer, während sie die weitaus größere Anzahl von Menschen mit Barrierefreiheitserfordernissen übersehen.

Eine Website kann in allen Browsern nicht identisch aussehen. Einige Ihrer Nutzer werden die Seite auf einem Telefon ansehen, andere auf einem großen Desktop-Bildschirm. Ebenso werden einige Ihrer Nutzer eine alte Browserversion haben, und andere die neueste. Einige Ihrer Nutzer hören sich möglicherweise Ihre Inhalte von einem Bildschirmleser vorlesen, während andere möglicherweise auf der Seite zoomen müssen, um sie lesen zu können. Alle zu unterstützen bedeutet, eine Version Ihrer Inhalte bereitzustellen, die defensiv gestaltet ist, sodass sie auf modernen Browsern großartig aussieht, aber auf allen Geräten, auf denen Ihre Inhalte aufgerufen werden, auf grundlegender Ebene nutzbar bleibt.

Ein grundlegendes Maß an Unterstützung kommt von der guten Strukturierung Ihrer Inhalte, damit der normale Fluss Ihrer Seite sinnvoll ist. Für Nutzer mit einem begrenzten Datentarif sind ihre Browser möglicherweise so eingestellt, dass sie keine Bilder, Schriftarten oder sogar Ihr CSS laden. Dennoch sollten die Inhalte so präsentiert werden, dass sie auch dann zugänglich und lesbar sind, wenn diese Elemente nicht vollständig geladen sind. Ein gut strukturiertes HTML-Dokument sollte immer Ihr Ausgangspunkt sein. Fragen Sie sich: Wenn Sie Ihr Stylesheet entfernen, machen Ihre Inhalte immer noch Sinn?

Es macht keinen kommerziellen Sinn, Zeit damit zu verbringen, jedem eine identische Erfahrung auf Ihrer Webseite bieten zu wollen. Dies liegt daran, dass Nutzerumgebungen stark variieren und sich Ihrer Kontrolle entziehen können. Es gibt ein Gleichgewicht, das Sie zwischen einer einfachen HTML-Seite und einer voll funktionsfähigen Website finden müssen. Es ist hilfreich, eine einfache, CSS-lose Ansicht Ihrer Seite zu testen, um sicherzustellen, dass die Ausweichmöglichkeit Ihrer Seite zugänglich ist. Diese Ausweichmöglichkeit wird möglicherweise nie von Menschen mit sehr alten oder eingeschränkten Browsern gesehen, könnte aber von Ihrer Hauptzielgruppe — Nutzern moderner Browser — aufgerufen werden, wenn ihr Browser oder ihre Internetverbindung vorübergehend versagt. CSS vereinfacht das Erstellen dieser Ausweichszenarien. Daher ist es besser, sich auf das zu konzentrieren, was Sie kontrollieren können, das heißt, nehmen Sie sich die Zeit, Ihre Website zugänglich zu machen und somit mehr Nutzern zu dienen.

CSS-Spezifikationen enthalten Informationen, die erklären, was der Browser tut, wenn zwei ähnliche Methoden wie Layout-Methoden auf dasselbe Element angewendet werden. Beispielsweise definieren sie, was passiert, wenn ein Element gefloatet ist und gleichzeitig ein Grid-Element und Teil einer CSS-Grid-Container 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 auszulösen. Da Browser CSS-Eigenschaften und -Werte verwerfen, die sie nicht unterstützen, können alte und neue Werte im selben Regelset koexistieren. Stellen Sie nur sicher, dass Sie den alten Wert vor dem neuen erklären, sodass, wenn unterstützt, der neue den alten Wert überschreibt (die Ausweichmöglichkeit).

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

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

Ebenso stellt dieses Fehler-Handling sicher, dass alte CSS-Codebasen weiterhin funktionieren, auch wenn veraltete vendor-prefixed Funktionen nicht mehr unterstützt werden. Obwohl das Verwenden von Vendor-Präfixen nicht mehr häufig vorkommt, falls Sie eine vendor-präfixierte Eigenschaft oder einen Wert einfügen müssen, stellen Sie sicher, dass Sie den Präfixwert vor dem Standardwert erklären, sodass, wenn unterstützt, der neue Wert den Ausweichwert überschreibt.

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

Wenn vendor-präfixierte Pseudoelemente oder neue Pseudoklassen verwendet werden, die ein Browser möglicherweise noch nicht unterstützt, fügen 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 aber nicht red sein.

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

Wir können eine Funktionsabfrage 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>

Funktionsabfragen werden in allen modernen Browsern unterstützt. Schreiben Sie Ihr CSS für voll unterstützte Eigenschaften zuerst, außerhalb von Funktionsabfragen. Sobald Ihre Website für alle Benutzer nutzbar und zugänglich ist, fügen Sie neue Funktionen innerhalb von Funktionsabfrageblöcken hinzu. Browser, die die abgefragte Funktion unterstützen, können dann das neuere CSS innerhalb des Funktionsabfrageblocks darstellen. Verwenden Sie den Ansatz, gut unterstütztes CSS zuerst zu schreiben und dann Funktionen basierend auf der Unterstützung zu erweitern.

Ein Weg ist die Verwendung eines Online-Testtools wie Sauce Labs, wie im Testen Modul beschrieben.

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

Nachdem Sie nun unsere Artikel zum CSS-Layout durchgearbeitet haben, ist es Zeit, Ihr Verständnis mit unserer Bewertung für das Modul zu testen: Grundlegendes Layoutverständnis.

• @supports At-Regel
• CSS At-Regeln
• Verwendung von Funktionsabfragen
• CSS-Bedingungsregeln Modul