Entdecken Sie einige der Funktionen, die 2022 interoperabel wurden.
Wir haben das Ende eines weiteren Jahres erreicht und es ist an der Zeit, sich die Verbesserungen anzusehen, die die Browser vorgenommen haben, während wir gemeinsam an der Verbesserung der Interoperabilität der Webplattform arbeiten. Wie die Initiative begonnen hat, erfahrt ihr in unserem Beitrag im März dieses Jahres.
<ph type="x-smartling-placeholder">
Die Gesamtergebnisse am Jahresende zeigen in allen Suchmaschinen eine erhebliche Verbesserung.
<ph type="x-smartling-placeholder">
In diesem Beitrag erfahren Sie mehr über die Fortschritte im Jahr 2022. Zusätzlich zu diesen Funktionen für Anzeigentitel wurden bei allen Suchmaschinen viele kleinere Verbesserungen vorgenommen. Kleine Probleme, die zu Inkonsistenzen zwischen Motoren führen und dich während der Entwicklung auslösen können, wurden behoben. Sicherlich sind vielfältige, browserübergreifende Funktionen faszinierend, aber manchmal verursachen die kleinen Dinge die meisten Probleme, und es ist fantastisch, die Verbesserungen zu sehen.
Ebenen kaskadieren
Mit Kaskadenebenen können Sie die Kaskade verwalten, indem Sie Selektoren in Ebenen gruppieren. Diese Funktion ist nur dann nützlich, wenn sie überall unterstützt wird. Alle gängigen Suchmaschinen unterstützen jetzt Kaskaden-Layers und die Punktzahlen bei allen Browsern spiegeln wider, wie interoperabel die Funktion ist. Es fehlen nur noch ein paar Tests für Firefox.
Das Dialogelement
Mit dem Dialogelement können modale und nicht modale Dialogfelder erstellt werden. Dies ist ein gängiges Muster im Web. Die Verwendung dieses Elements bietet Ihnen eine Nutzungsfreundlichkeit und Zugänglichkeit, die Sie sonst beim Erstellen Ihrer eigenen Komponenten entwickeln und testen müssten. Im Artikel Dialogfeldkomponente erstellen erläutert Adam Argyle, wie Sie auf diesem Element aufbauen und verschiedene Arten von Dialogfeldern erstellen.
Unternetz
Anfang 2022 war Firefox der einzige Browser, der den Wert subgrid für grid-template-rows und grid-template-columns unterstützt. 2022 wurde Safari unterstützt und die Funktion befindet sich derzeit in der Entwicklungsphase. Die Frist für die Interoperabilität zum Jahresende wird versäumt, aber sie ist auf dem Weg.
Darstellungsbereich-Einheiten
Anzeigenblöcke im Darstellungsbereich sind die einzige Funktion, die 100% der Tests in allen Suchmaschinen bestanden hat. Dazu gehören auch die Konzepte des kleinen und großen Darstellungsbereichs, der die sich ändernde Größe des Darstellungsbereichs auf Mobilgeräten berücksichtigt, wenn UI-Elemente von Geräten ein- und ausgeblendet werden. Weitere Informationen zu diesen Anzeigenblöcken finden Sie im Beitrag Große, kleine und dynamische Darstellungsbereiche.
Unterstützte Browser
- 108
- 108
- 101
- 15,4
Farbe 4
Durch diese Farbarbeit kann CSS nicht nur Farben in höheren Definitionsgamuten (z. B. display p3, rec2020) angeben, sondern auch neue Farbfunktionen bereitstellen, die jeweils eigene Dienstprogramme für die Arbeit mit Farben haben. Die neuen Farbräume sind lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: Probieren Sie sie heute in Canary mit aktiviertem Flag aus. Diese Änderungen gelten auch für Farbverläufe, sodass Autoren angeben können, welcher Farbraum für die Farbverläufe verwendet werden soll. Dasselbe Flag ermöglicht auch die Unterstützung von color-mix(), sodass Sie zwei Farben in einem Bereich Ihrer Wahl kombinieren können. Die Funktion color-mix() befindet sich auch in Safari und Firefox hinter einer Markierung. Mehr Farben, bessere Farben, bessere Farbverläufe und bessere Tools.
Interop 2023
Ich hoffe, Sie freuen sich, dass wir Ende 2022 nicht beenden möchten und die erste Planungsphase von Interop 2023 bereits weit fortgeschritten ist. Im neuen Jahr können wir die ausgewählten Funktionen ankündigen und freuen uns auf ein weiteres Jahr, in dem die Entwicklung für das Web einfacher wird.
Hero-Image von Ian Schneider