Zum ersten Mal arbeiten sich alle großen Browser-Anbieter und andere Interessenvertreter zusammen, um die von Webentwicklern identifizierten häufigsten Browserkompatibilitätsprobleme zu lösen. Interop 2022 wird die Entwicklung für das Web in 15 Kernbereichen verbessern. In diesem Artikel erfahren Sie, wie wir dieses Ziel erreicht haben, worauf sich das Projekt konzentriert, wie der Erfolg gemessen wird und wie Sie den Fortschritt verfolgen können.
Alles begann 2019
2019 begannen Mozilla, Google und andere Unternehmen mit erheblichen Bemühungen, die Probleme von Entwicklern zu verstehen, in Form von MDN Developer Needs Assessment-Umfragen und dem detaillierten Browserkompatibilitätsbericht. Diese Berichte lieferten uns detaillierte und umsetzbare Informationen, um die größten Herausforderungen für Entwickler mit der Webplattform anzugehen, und brachten die Initiative von Compat 2021 hervor.
Unter anderem hat Compat 2021 eine solide Grundlage für leistungsstarke Funktionen geschaffen, wie z. B. CSS-Raster (Nutzung um 12% und stetiges Wachstum) und CSS-Flexbox (Nutzung von 77%), einschließlich der Eigenschaft gap in die Flexbox, die ein Hauptproblem für Entwickler bei der Einführung neuer Layoutmethoden löst.
Ende 2021 haben wir bei allen Implementierungen einen Wert von über 90% erreicht.
Was ist der Interop 2022?
Der Interop 2022 ist ein Benchmark, auf den sich Vertreter dreier großer Browserimplementierungen geeinigt haben. Er wurde im Rahmen eines Prozesses zur öffentlichen Nominierung und einer Überprüfung entwickelt, der von Unterstützern Apple, Bocoup, Google, Igalia, Microsoft und Mozilla erarbeitet wurde.
Bei der Benchmark geht es um 15 Bereiche, die von Entwicklern als besonders störend eingestuft wurden, wenn sie nicht vorhanden sind oder Kompatibilitätsprobleme mit verschiedenen Browsern haben. Alle Browser-Anbieter haben sich darauf geeinigt, sich auf diese Bereiche zu konzentrieren, und alle Beteiligten freuen sich darauf, die Erfahrungen der Entwicklung für das Web messbar zu verbessern.
Die 15 Fokusbereiche
Folgende Funktionen stehen bei Interop 2022 im Mittelpunkt. Dazu gehören 10 neue Bereiche sowie 5 von der Compat 2021 übernommene Bereiche. Die neuen Schwerpunkte sind:
Ebenen übereinander weitergeben
Kaskadenebenen geben Webentwicklern mehr Kontrolle über die Kaskade. Sie ermöglichen es, Selektoren in Ebenen mit jeweils eigener Spezifität zu gruppieren. Das bedeutet, dass Sie Selektoren nicht sorgfältig anordnen oder sehr spezifische Selektoren erstellen müssen, um grundlegende CSS-Regeln zu überschreiben.
Farbräume und CSS-Farbfunktionen
Wenn Sie Farbfunktionen in einem Designsystem verwenden möchten, müssen Sie sich derzeit bei HSL-Werten auf Sass, PostCSS oder calc() verlassen. Farbfunktionen, die in CSS integriert sind, bedeuten, dass Farben dynamisch aktualisiert werden können, und durch neue Farbräume wird die Einschränkung auf den sRGB-Gamut und die wahrnehmungsbedingten Einschränkungen von HSL aufgehoben.
In CSS-Farbstufe 5 sind zwei Funktionen definiert, die ein dynamisches Design auf der Webplattform ermöglichen:
color-mix(): Nimmt zwei Farben an und gibt das Ergebnis der Mischung in einem bestimmten Farbraum um einen bestimmten Wert zurück.color-contrast(): Mit dieser Option wird aus der Liste die Farbe mit dem höchsten Kontrast zu einer angegebenen Einzelfarbe ausgewählt.
Diese Funktionen unterstützen erweiterte Farbräume (LAB, LCH und P3) und neben HSL und sRGB verwenden sie standardmäßig den einheitlichen LCH-Farbraum.
Neue Einheiten für den Darstellungsbereich
sowohl im MDN Browser Compatibility Report 2020 als auch in der neuen Umfrage State of CSS 2021. CSS-Werte und -Einheiten in Ebene 4: Für die größten, kleinsten und dynamischen Darstellungsbereiche lv*, sv* und dv* werden neue Einheiten hinzugefügt. Mit diesen Einheiten können Sie einfacher Layouts erstellen, die den sichtbaren Darstellungsbereich auf Mobilgeräten ausfüllen und dabei die Adressleiste berücksichtigen.
Außerdem wird das anbieterübergreifende Team, das für Interop 2022 zuständig ist, gemeinsam die Interoperabilität zwischen vorhandenen Messfunktionen für den Darstellungsbereich, einschließlich der bestehenden vh-Einheit, untersuchen und verbessern.
Scrollen
Der 2021 Scroll Survey Report bestätigt, dass Scrollfunktionen und die Scrollkompatibilität schwierig zu implementieren sind und viele verbesserungswürdige Bereiche aufweisen. Konzentrieren wir uns auf das Scroll-Snap, das Scrollverhalten und das Overscroll-Verhalten, damit das Scrollen auf allen Plattformen einheitlicher und flüssiger läuft.
Außerdem sehen wir uns neue Vorschläge für Scroll-Snap-Funktionen an.
Subgrid
Der Wert grid-template-columns und grid-template-rows in subgrid bedeutet, dass ein Rasterelement, auf das display: grid angewendet wurde, die Trackdefinition von dem Teil des übergeordneten Rasters übernehmen kann, über den es platziert wird.
Die folgenden drei Kartenkomponenten haben beispielsweise eine Kopf- und Fußzeile, die an den angrenzenden Kopf- und Fußzeilen der Karte ausgerichtet sind, obwohl jede Karte ein unabhängiges Raster hat. Dieses Muster funktioniert, da jede Karte ein Element ist, das sich über drei Zeilen des übergeordneten Rasters erstreckt und dann das Subgrid verwendet, um diese Zeilen in die Karte zu übernehmen.
Ebenfalls enthalten
- CSS-Begrenzung (die Eigenschaft
contain) - Das
<dialog>-Element - Formularsteuerelemente
- Typografie und Codierungen: einschließlich
font-variant-alternates,font-variant-position,ic-Einheit und CJK-Textcodierungen - Web Compat: Hier werden Unterschiede zwischen Browsern beschrieben, die Website-Kompatibilitätsprobleme verursacht haben und Endnutzer betreffen.
In den folgenden Bereichen haben wir beim Compat 2021-Projekt große Fortschritte gemacht, aber es gibt noch Raum für Verbesserungen. Daher wurden sie in den Interop 2022 aufgenommen, um die verbleibenden Probleme zu beheben.
- Seitenverhältnis
- Flexbox
- Raster
- Fixierte Positionierung
- Transformationen
Untersuchungsmaßnahmen
Zusätzlich zu den 15 Fokusbereichen umfasst der Interop 2022 drei Untersuchungsmaßnahmen. Dies sind Bereiche, die problematisch sind und verbesserungswürdig sind, aber in denen der aktuelle Stand der Spezifikationen oder Tests noch nicht gut genug ist, um anhand der Testergebnisse den Fortschritt zu bewerten:
- Wird bearbeitet,
contenteditableundexecCommand - Zeiger- und Mausereignisse
- Darstellungsbereich messen
Browser-Anbieter und andere Interessenvertreter arbeiten gemeinsam an der Verbesserung der Tests und Spezifikationen für diese Bereiche, damit sie in zukünftige Iterationen dieser Bemühungen einbezogen werden können.
Erfolgsmessung und Fortschrittsverfolgung
Das bestehende Dashboard für Webplattform-Tests wird verwendet, um den Fortschritt in den 15 Schwerpunktbereichen zu verfolgen. Für jedes Gebiet gibt es eine Reihe von Tests. Die Browser werden dann anhand dieser Tests bewertet und erhalten eine Gesamtpunktzahl für jedes Gebiet und eine Gesamtpunktzahl für alle 15 Gebiete.
Im Interop 2022-Dashboard können Sie den Fortschritt verfolgen. Im Laufe des Jahres können Sie beobachten, wie sich die Plattform, für die Sie entwickeln, immer weiter verbessert.
Was bedeutet das alles für die Entwickler?
Ziel dieser mehrjährigen Interoperabilitätsinitiativen in Form von Compat 2021, Interop 2022 und vielen anderen ist es, die Probleme, mit denen Entwickler seit vielen Jahren konfrontiert sind, vollständig anzuerkennen und zu beseitigen. Dabei handelt es sich nicht um einen einzigen Browser, sondern um eine starke Zusammenarbeit zwischen allen großen Browser-Anbietern und ihren Freunden, um die Webplattform in allen Bereichen zu verbessern.
Im Wesentlichen besteht das Ziel darin, die Webplattform für Entwickler nutzungsfreundlicher und zuverlässiger zu machen, damit sie mehr Zeit damit verbringen können, erstklassige Weberlebnisse zu entwickeln, anstatt Browser-Inkonsistenzen zu umgehen.
Ihre Meinung zählt
Wenn Sie uns Feedback zu den im Rahmen von Compat 2021 vorgenommenen Verbesserungen oder zu den Funktionen des Interop 2022 geben möchten, würden wir uns über Ihr Feedback freuen. Welche dieser Funktionen macht bei deiner Arbeit den größten Unterschied? Worauf freuen Sie sich wirklich? Sie können Probleme mit dem GitHub-Repository melden oder uns auf Twitter kontaktieren.
Weitere Informationen zum Interop 2022 finden Sie hier: