Auch 2023 arbeiten alle großen Browseranbieter und andere Beteiligte zusammen, um die häufigsten Browserkompatibilitätsprobleme zu lösen.
Auch 2023 arbeiten alle großen Browser-Anbieter und andere Interessengruppen zusammen, um die häufigsten Browserkompatibilitätsprobleme zu lösen. Diese Bemühungen begannen mit dem Interop 2022. Was wir gemeinsam erreicht haben, erfahren Sie in unserem Post zum Jahresende. Alle Beteiligten sind der Meinung, dass dies dazu beitragen wird, die Erfahrung für Webentwickler auf der ganzen Welt zu verbessern. In diesem Jahr haben wir den Angebotsprozess zum ersten Mal öffentlich bekannt gegeben und viele tolle Vorschläge von Frameworks, großen Unternehmen, Browseranbietern und Entwicklern aus aller Welt erhalten.
Schwerpunkte des Interop-2023
Diesmal haben wir nicht weniger als 26 Schwerpunkte, die in unserem Projektdokument ausführlich beschrieben sind. Diese sind in alphabetischer Reihenfolge:
- Rahmenbild in CSS
- Farbräume und Funktionen in CSS
- Containerabfragen in CSS
- Begrenzung in CSS
- CSS-Pseudoklassen
- Benutzerdefinierte Eigenschaften in CSS
- Flexbox
- Erkennung von Schriftarten und Farbpaletten
- Google Formulare
- Raster
- :has()
- Inert
- Maskierung in CSS
- Mathematische Funktionen in CSS
- Medienabfragen
- Module in Web Workers
- Bewegungspfad in CSS-Animationen
- Leinwand außerhalb des sichtbaren Bereichs
- Zeiger- und Mausereignisse
- URL
- Web Compat 2023: Ein allgemeiner Schwerpunktbereich für kleine Fehler, die bekannte Kompatibilitätsprobleme mit Websites verursachen
- Web-Codecs (Video)
- Webkomponenten
Vollständige Details zu allen Schwerpunkten finden Sie in den Webplattform-Tests, die auf MDN Web Docs basieren. Hier sind einige, die Sie vielleicht besonders interessant finden.
Containerabfragen
Containerabfragen sind seit vielen Jahren eine häufigste Anfrage von Entwicklern, die 2022 von Chrome und Safari ausgeliefert wurden. Firefox erwartet, Containerabfragen in Firefox 110 ausliefern zu können. Die Tests für diesen Fokusbereich tragen dazu bei, dass Containerabfragen zuverlässig und browserübergreifend und gemäß der Spezifikation funktionieren.
:has(...)
Entwickler wünschen sich schon lange einen übergeordneten Selektor in CSS. Die Pseudoklasse :has() ermöglicht viele der Anwendungsfälle für übergeordnete Selektoren sowie die Auswahl eines vorherigen gleichgeordneten Elements in Bezug auf ein Referenzelement. Auf diese Weise ist es beispielsweise möglich, eine Figur mit einer Bildunterschrift anders zu gestalten als eine Abbildung ohne Beschriftung. Weitere Informationen zu Anwendungsfällen für has() findest du unter :has(), der Familienauswahl.
Benutzerdefinierte Attribute
Benutzerdefinierte CSS-Eigenschaften, auch CSS-Variablen genannt, ermöglichen es, einen Wert einmal in einem Stylesheet zu definieren und an vielen Stellen wiederzuverwenden, um Wiederholungen zu reduzieren. Beispielsweise können Sie eine gemeinsame Farbe oder Schriftgröße einmal in einem Stylesheet definieren und dann für alle Komponenten verwenden. Benutzerdefinierte Eigenschaften werden in Browsern schon seit Langem unterstützt. Bei Interop 2023 liegt der Schwerpunkt auf der @property-At-Regel. @property steht für die Registrierung benutzerdefinierter Eigenschaften in einem Stylesheet. Damit können Sie den Eigenschaftstyp prüfen, Standardwerte festlegen und festlegen, ob die Eigenschaft Werte übernehmen soll. Weitere Informationen
CSS-Maskierung
Die CSS-Maskierung bietet Methoden zum Anwenden von Bildeffekten, wie sie beispielsweise in einer Grafikanwendung mithilfe von CSS zu sehen sind. Die verschiedenen Maskierungseigenschaften werden nur lückenhaft unterstützt, sodass das Maskieren schwerer zu verwenden ist, als es sein sollte. Dieser Fokusbereich hilft Entwicklern, kreative Effekte browserübergreifend souverän einzusetzen. Weitere Informationen zum Anwenden von Effekten auf Bilder finden Sie in diesem Artikel zur Bildmaskierung.
OffscreenCanvas
Das <canvas>-Element und die Canvas API bieten eine skriptfähige Möglichkeit, Grafiken auf dem Bildschirm zu zeichnen. Dies kann jedoch zu Leistungsproblemen führen, da die Arbeit im selben Thread wie die Nutzerinteraktion abgeschlossen wird. Mit OffscreenCanvas steht Entwicklern ein Canvas zur Verfügung, das vom DOM und von der Canvas API entkoppelt ist. Entwickler können Rendering-Aufgaben auch getrennt vom Hauptthread in einem Web Worker ausführen. Weitere Informationen zu den Leistungsvorteilen von OffscreenCanvas
Zeiger- und Mausereignisse
Zeiger-Ereignisse werden ausgelöst, wenn Sie über die Maus, einen Stift, einen Eingabestift oder einen Touchscreen mit einer Seite interagieren. Mausereignisse werden bei Verwendung einer Maus ausgelöst, aus historischen Gründen aber auch bei Berührung. Dieser Fokusbereich befasst sich mit dem Verhalten von Zeiger- und Mausinteraktionen mit Seiten, einschließlich der Interaktion mit Treffertests und Scrollbereichen. Im Fokusbereich für 2023 sind Touch und Eingabestifte ausgeschlossen, da in diesem Bereich keine Webplattform-Tests vorhanden sind.
WebCodecs
Die WebCodecs API bietet Entwicklern Methoden, um auf die einzelnen Videoframes und Audioblöcke zuzugreifen. Sie bietet Zugriff auf Codecs, die bereits im Browser verfügbar sind, sowie verschiedene Schnittstellen zur Interaktion mit ihnen. Im Artikel Videoverarbeitung mit WebCodecs wird gezeigt, wie Sie mit der API einzelne Frames in einem Canvas decodieren und rendern.
Webkomponenten
Webkomponenten ist ein Überbegriff für eine Reihe von Technologien, mit denen wiederverwendbare Komponenten wie benutzerdefinierte Elemente und Shadow DOM erstellt werden. Bei Interop 2023 liegt der Fokus auf der Verbesserung der Interoperabilität dieser grundlegenden Technologien.
Dashboard
Auf dem Interoperabilitäts-Dashboard 2023 können Sie die Fortschritte im Laufe des Jahres verfolgen. Dort finden Sie aktuelle Ergebnisse und den Stand der Maßnahmen in Bezug auf diese Schwerpunkte über alle großen Browser-Engines hinweg.
Die Punktzahlen für den Fokusbereich werden basierend auf den Erfolgsquoten für die Prüfungen berechnet. Wenn Sie Feedback haben oder zur Verbesserung von WPT beitragen möchten, können Sie ein Problem melden und beantragen, dass der Satz von Tests aktualisiert wird, die für die Bewertung verwendet werden.
