Jedes Jahr bauen Chrome, Safari, Firefox und Edge neue Funktionen ein. Für Sie bedeutet das leichtere Websites mit weniger Code, der gepflegt werden muss.
1. Blöcke, die sich ihrem Platz anpassen (Container Queries)
Bisher konnte sich ein Layout nur an die Bildschirmbreite anpassen. Jetzt passt sich jeder Block an den Platz an, den er hat.
Beispiel: Eine Produktkarte erscheint im Hauptbereich nebeneinander (Foto links, Text rechts) und in einer schmalen Seitenleiste untereinander, mit demselben Code.
2. Animierte Seitenwechsel (View Transitions)
Das Foto eines Produkts kann aus der Liste auf seine Detailseite gleiten, wie in einer Smartphone-App, ohne zusätzliche Bibliothek. In einem Browser, der die Funktion noch nicht unterstützt, wechselt die Seite einfach ohne Animation.
3. Leichtere Bilder (AVIF)
Bei gleicher Bildqualität ist ein AVIF-Bild oft nur halb so groß wie ein JPEG. Alle aktuellen Browser unterstützen das Format. Leichtere Seiten erscheinen schneller, besonders auf dem Smartphone.
4. Eingebaute Menüs und Hinweisblasen (Popover)
Ein Menü oder eine Hinweisblase lässt sich jetzt mit wenigen Worten HTML festlegen. Der Browser übernimmt das Öffnen und das Schließen per Escape-Taste oder Klick daneben. Weniger Code und eine korrekte Bedienung per Tastatur.
5. Besser geordnete Stile (CSS Nesting)
Die Gestaltungsregeln eines Blocks lassen sich gruppieren, wie Unterordner. Früher brauchte man dafür ein zusätzliches Werkzeug (Sass) und einen Vorbereitungsschritt.
Was das für Sie ändert
Weniger externe Bibliotheken bedeuten eine schnellere Website, weniger Sicherheitsupdates und günstigere Wartung. Deshalb nutzen wir die eingebauten Browserfunktionen, wann immer sie ausreichen.