Cross-Browser-Layouts

Der Browserkrieg ist vorbei. Chrome und Edge teilen sich dieselbe Engine, und Flexbox oder Grid verhalten sich überall gleich. Trotzdem bleiben Fragen: Darf ich diese neue Eigenschaft schon benutzen? Warum sieht das Feld in Firefox anders aus? Solche Fragen klären wir hier.

Was du am Ende kannst

• nachschlagen, welcher Browser was unterstützt
• Baseline einordnen
• mit @supports neue Technik sicher einsetzen
• erklären, was Herstellerpräfixe sind
• typische Unterschiede in zwei Browsern prüfen

Live-Coding zum Mitmachen

⤓ demo-15-cross-browser.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html, stil.css

Die Browserlandschaft

Engine	Browser
Blink	Chrome, Edge, Opera, Samsung Internet
Gecko	Firefox
WebKit	Safari, und auf dem iPhone weitgehend alle anderen Browser

Wer Chrome testet, testet also auch Edge zu großen Teilen. Sinnvoll ist der Test in je einem Browser pro Engine. In verwalteten Umgebungen kommt die Frage hinzu, welche Version läuft: Firmenrechner hängen oft etwas zurück.

Nachschlagen

• caniuse.com zeigt für jede Funktion eine Tabelle nach Browser und Version.
• MDN hat am Ende jeder Eigenschaftsseite eine Kompatibilitätstabelle.
• Baseline fasst das zu einem einfachen Signal zusammen:

Stufe	Bedeutung	Für uns
Widely available	seit mindestens 30 Monaten in allen großen Browsern	ohne Bedenken benutzen
Newly available	gerade in allen großen Browsern angekommen	mit @supports oder als Verbesserung
Limited	noch nicht überall	nur als Verbesserung, sonst warten

MDN und caniuse zeigen die Baseline-Stufe direkt an. In dieser Schulung gilt die Regel Widely available.

Fortschreitende Verbesserung

Der wichtigste Gedanke dieses Kapitels: Browser überspringen, was sie nicht kennen. Eine unbekannte Eigenschaft ist kein Fehler, sie wirkt einfach nicht. Darum baust du zuerst eine Fassung, die überall funktioniert, und legst die Verbesserung darüber.

h1 {
  text-wrap: balance;   /* Wer es kennt, gleicht die Zeilen aus. Wer nicht, merkt nichts. */
}

Wenn mehrere Regeln zusammengehören, reicht das nicht. Dafür gibt es @supports.

@supports

Was sagt dein Browser?

.karte { padding: 1rem; background: #e0e7ff; }
.hinweis::after { content: "Dieser Browser kennt backdrop-filter nicht."; }
@supports (backdrop-filter: blur(4px)) {
  .hinweis::after { content: "Dieser Browser kennt backdrop-filter."; }
}

<div class="karte hinweis"></div>

/* Grundfassung für alle */
.kopf {
  background: #312e81;
}

/* Nur wenn der Browser es kann */
@supports (backdrop-filter: blur(8px)) {
  .kopf {
    background: rgb(49 46 129 / 0.85);
    backdrop-filter: blur(8px);
  }
}

@supports not (…) kehrt die Bedingung um, @supports selector(:has(a)) prüft einen Selektor.

Herstellerpräfixe

Früher führten Browser neue Eigenschaften mit Präfix ein: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (der alte Internet Explorer). In alten Stylesheets siehst du dann so etwas:

.alt {
  -webkit-box-shadow: 0 0 4px #000;
  -moz-box-shadow: 0 0 4px #000;
  box-shadow: 0 0 4px #000;
}

Für die allermeisten Eigenschaften ist das heute nicht mehr nötig. Neue Funktionen kommen hinter Schaltern statt mit Präfix. Wenn du noch welche brauchst, schreibt sie ein Werkzeug wie Autoprefixer. Kopiere sie nicht aus alten Anleitungen.

Was wirklich noch abweicht

Bereich	Unterschied	Umgang
Formularelemente	select, Datums- und Farbfelder sehen je Browser anders aus	akzeptieren oder appearance: none und selbst gestalten
Bildlaufleisten	Breite und Aussehen unterscheiden sich	scrollbar-width, scrollbar-color; sonst akzeptieren
Schriften	Systemschriften und Glättung	Schriftliste gut wählen
Standardstile	kleine Unterschiede bei margin und Überschriften	eigene Basis setzen
neue Funktionen	Implementierung noch nicht gleich weit	siehe oben

Eine Seite muss nicht in jedem Browser gleich aussehen, sondern in jedem gut funktionieren.

Live-Coding: Zwei Browser nebeneinander

Wir öffnen das Aufgabenbrett in Edge oder Chrome und in Firefox, vergleichen die Auswahlliste, vereinheitlichen sie und legen über den Kopf eine Milchglas-Optik als Verbesserung.

stil.css

.filter {
  margin-bottom: var(--abstand-m);
}

/* Auswahlfelder sehen in jedem Browser anders aus. appearance schaltet das Standardaussehen ab. */
select {
  appearance: none;
  padding: 0.25rem 2rem 0.25rem 0.75rem;
  border: 1px solid #76818f;
  border-radius: var(--radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231c2330'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.6rem;
  font: inherit;
}

/* Grundfassung für alle: deckender Kopf (oben schon gesetzt).
   Wer den Effekt beherrscht, bekommt zusätzlich die Milchglas-Optik. */
@supports (backdrop-filter: blur(8px)) {
  .kopf {
    background: rgb(49 46 129 / 0.85);
    backdrop-filter: blur(8px);
  }
}

/* Fortschreitende Verbesserung: Ein Browser, der das nicht kennt, überspringt die Zeile einfach. */
h1 {
  text-wrap: balance;
}

Übung

Starter für die Übung

⤓ uebung-15-cross-browser.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, stil.css, uebung.css

Stufe 1: Nachschlagen

Schlage nach und notiere in uebung.css als Kommentar, welche Baseline-Stufe diese Funktionen haben: Flexbox-gap, Grid, Subgrid, Container Queries und Anchor Positioning.

Stufe 2: Vergleichen

Öffne die App in zwei verschiedenen Browsern und finde drei Unterschiede. Prüfe in beiden, ob die Tastaturbedienung funktioniert.

Stufe 3: @supports

Gib den Spaltenüberschriften einen halbtransparenten Hintergrund mit backdrop-filter, aber nur, wenn der Browser es kann.

Für Schnelle

Hebe Karten mit der Marke „Neu“ durch eine Kontur hervor und nutze dafür :has(), geschützt mit @supports selector(…). Ergänze mit @supports not einen Rückfall für die Überschriften.