Das Web wird mit Interop 2024 noch besser

 (webkit.org)
2 Punkte von GN⁺ 2024-02-03 | 1 Kommentare | Auf WhatsApp teilen
  • Interop 2024 ist ein gemeinsames Projekt der wichtigsten Browser-Engine-Teams, um dieselben Web-Features konsistenter zu implementieren; in diesem Jahr umfasst es 17 Schwerpunktbereiche und 3 Untersuchungsprojekte
  • Verbesserungen bei der Interoperabilität werden mit automatisierten Tests wie den Web Platform Tests gemessen; WPT umfasst mehr als 1,8 Millionen Tests, von denen browserübergreifend über 95 % bestanden werden
  • Interop 2023 steigerte die gemeinsame Bestehensquote der ausgewählten Tests über die drei großen Browser-Engines hinweg von 48 % auf 95 % und glich die Unterstützung für P3 color, Subgrid, Container Queries, :has(), Web Components und Media Queries 4 deutlich an
  • In diesem Jahr wurden aus 96 Vorschlägen 16 ausgewählt, ein Teil der Arbeit aus 2023 übernommen und der Fokus auf 17 Bereiche gelegt, darunter Accessibility, CSS Nesting, Custom Properties, IndexedDB, Layout, Popover und URL
  • Microsoft Edge wurde dem Interop-Dashboard als eigene Spalte hinzugefügt, sodass sich der Fortschritt zwischen den Browsern direkter vergleichen lässt

Wie Browser-Interoperabilität abgestimmt wird

  • Das Web wurde dafür entworfen, auf unterschiedlichen Geräten zu funktionieren, damit Milliarden von Menschen es für Zusammenarbeit, Lernen und Vernetzung nutzen können
  • Damit Entwickler in allen Browsern und für alle Nutzer dieselbe Erfahrung bereitstellen können, müssen sich die Browser-Implementierungen von Web-Technologien möglichst ähnlich verhalten
  • Konsistenz in der Implementierung entsteht im Prozess der Web-Standards, in dem das Verhalten neuer Web-Technologien in detaillierten technischen Dokumenten definiert wird
  • Ob Browser den Web-Standards folgen, wird mit automatisierten Tests überprüft
    • Web Platform Tests umfassen mehr als 1,8 Millionen Tests
    • Browserübergreifend werden mehr als 95 % der WPT bestanden

Die Veränderungen durch Interop 2023

  • Interop 2023 startete 2023 damit, dass 48 % der im Januar 2023 ausgewählten Tests von allen drei großen Browser-Engines bestanden wurden
    • Die Referenzbrowser waren das an Nutzer ausgelieferte Chrome und Firefox Desktop Linux sowie Safari auf macOS Monterey
  • Ein Jahr später stieg die Bestehensquote auf 95 %
    • Die Referenzbrowser waren Chrome Dev, Firefox Nightly Desktop Linux und Safari Technology Preview auf macOS Ventura
  • Die browserübergreifende Unterstützung für viele Web-Features wurde verbessert
    • P3 color wird sieben Jahre nach dem ersten Release nun in allen Browsern vollständig unterstützt
    • Form controls unterstützen erstmals in der Geschichte des Webs den vertikalen Schreibmodus
    • CSS border-image funktioniert nun wie ursprünglich beabsichtigt
    • Subgrid, Container Queries, :has(), Motion Path, CSS Math Functions, inert und @property werden in allen modernen Browsern unterstützt
    • Web-APIs wie Offscreen Canvas, Modules in Web Workers, Import Maps, Import Assertions und JavaScript Modules wurden verbessert
    • Die gesamte Spezifikation von Media Queries 4 wird nun mit einfachererer Syntax überall unterstützt
    • Web Components wurden bei adoptedStyleSheets, ElementInternals, Form-Associated Custom Elements sowie im Grundverhalten von Shadow DOM und Custom Elements verbessert
    • Bei CSS-Pseudoklassen wie :nth-child(), :nth-last-child(), :modal, :user-valid und :user-invalid ist nun konsistente Browser-Unterstützung zu erwarten
    • Feature queries unterstützen nun auch die Erkennung von Schriftfunktionen
    • Font Palettes stärken die Unterstützung für Farbschriften
    • Auch bei CSS Masking, HTML Forms, Pointer and Mouse Events, Scrolling, Transforms, URL, WebCodecs und einem Bündel an Web-Kompatibilitätsfehlern gab es erhebliche Fortschritte
  • 20 der 26 Schwerpunktbereiche von Interop 2023 wurden erfolgreich abgeschlossen
  • 2024 werden die Arbeiten zu Custom Properties, Pointer and Mouse Events, URL sowie Layout als Paket aus Flexbox, Grid und Subgrid fortgesetzt

Aufbau von Interop 2024

  • 2024 wurden 96 Vorschläge für Schwerpunktbereiche geprüft, von denen letztlich 16 ausgewählt wurden
  • Durch die Bündelung einiger neuer Vorschläge und die Übernahme eines Teils der Arbeit aus 2023 kommt Interop 2024 insgesamt auf 17 Schwerpunktbereiche
  • Auf Basis stabiler Browser-Versionen startet die Gesamtpunktzahl von Interop 2024 zufällig erneut bei 48 %
  • Seit diesem Jahr gibt es im Interop dashboard eine eigene Spalte für Microsoft Edge
    • Diese Spalte steht derzeit für Edge und Edge Dev unter Windows 10

Schwerpunktbereiche 2024

  • Accessibility

    • Im Accessibility-Untersuchungsprojekt von Interop 2023 hat das Apple-Accessibility-Team eine Infrastruktur für Accessibility-Tests in WPT aufgebaut und mehr als 1.300 Accessibility-Tests geschrieben.
    • Diese Tests wurden in die Schwerpunktbereiche von Interop 2024 aufgenommen, um Verbesserungen bei der Accessibility-Unterstützung der Browser voranzutreiben.
    • Die meisten neuen Accessibility-Tests behandeln WAI-ARIA.
    • Im Mittelpunkt stehen insbesondere das Roles Model und Accessible Name and Description Computation.
    • Sie bieten einen konsistenten Mechanismus, damit Nutzer von Assistive Technologies den Zweck eines Elements und seine möglichen Aktionen verstehen können.
    • Ebenfalls enthalten sind Tests zur HTML Accessibility API Mappings specification.
    • Diese definiert die grundlegende semantische Bedeutung von HTML-Elementen für Accessibility sowie die Regeln für das Browser-Verhalten bei Funktionen wie <label> und dem alt-Text von Bildern.
    • Neu enthalten sind auch Accessibility-Tests für display: contents.
    • Dieser CSS-Anzeigemodus ist nützlich, um die Beziehungen zwischen Eltern-, Kind- und Enkel-Elementen für Flexbox oder Grid anzupassen, indem die Box um den Inhalt entfernt wird.
    • In frühen Implementierungen führte das Entfernen der Box dazu, dass der Inhalt auch aus dem Accessibility-Baum vollständig verschwand, was für Nutzer von Assistive Technologies problematisch war.
    • Die meisten Probleme wurden in den Browsern behoben, aber noch nicht in allen Situationen vollständig gelöst.

  • CSS Nesting

    • CSS Nesting wurde in Interop 2024 aufgenommen, um Implementierungsunterschiede zu verringern und sicherzustellen, dass Entwickler es verlässlich nutzen können.
    • CSS-Nesting wurde 2023 in allen vier großen Browsern eingeführt.
    • Chrome, Edge und Safari brachten es zuerst im April und Mai heraus.
    • Firefox folgte im August.
    • Der Webstandard änderte sich zwischen Mai und August leicht, sodass die ursprüngliche Anforderung gelockert wurde, dass alle verschachtelten Selektoren mit einem Symbol beginnen müssen.
    • Entwickler können nun statt & article einfach article schreiben.
    • Alle Implementierungen wurden aktualisiert, aber es gibt noch Raum für Verbesserungen bei der Interoperabilität, während die CSS Working Group das komplexe Detailverhalten von Nesting weiter präzisiert.
    • Die meisten fehlgeschlagenen Tests in Safari hängen damit zusammen, wie verschachteltes CSS über Shadow DOM und :host interagiert.

  • Custom Properties

    • Die At-Rule @property wird seit einigen Jahren schrittweise in Browsern eingeführt.
    • Im Bereich Custom Properties von Interop 2023 stieg die gemeinsame Bestehensquote der stabilen Browser bei den Tests von 4 % auf 7,6 %, während bei allen Preview-Browsern 90,7 % bestanden wurden.
    • Firefox ist der letzte Browser, der Unterstützung ergänzt, und die Arbeit daran läuft derzeit in Firefox Nightly.
    • Da die Arbeiten noch nicht abgeschlossen sind, bleibt dies auch 2024 ein Schwerpunktbereich.
    • Mit @property lassen sich Syntax, Vererbungsverhalten und Initialwert von CSS Custom Properties ähnlich deklarieren, wie Browser-Engines CSS-Eigenschaften definieren.
    • Dadurch werden Animationen möglich, die zuvor mit CSS nicht realisierbar waren, etwa bei Gradients oder bestimmten Teilen von transform.

  • Declarative Shadow DOM

    • Declarative Shadow DOM ist eine deklarative API, mit der sich wiederverwendbare Widgets und Komponenten allein mit HTML und ohne JavaScript erstellen lassen.
    • Safari 16.4 unterstützt dies seit März 2023, Chrome 90 seit April 2021.
    • Firefox verfügt in Firefox Nightly über eine Implementierung.
    • Es war eine der häufig angefragten Funktionen in der Umfrage State of HTML 2023 und wurde in Interop 2024 aufgenommen, um Interoperabilität über alle Browser hinweg sicherzustellen.

  • Font size adjust

    • font-size-adjust ist ein Beispiel dafür, wie nützlich die Beschäftigung mit älteren Technologien sein kann.
    • Firefox implementierte es erstmals 2008, doch unter Webdesignern und Entwicklern wurde es kaum genutzt oder diskutiert.
    • Die ursprüngliche Spezifikation wurde im Lauf der Zeit erweitert, um mit der Syntax aus zwei Werten mehr Sprachen zu unterstützen und die Nutzbarkeit mit dem Wert from-font zu verbessern.
    • Das WebKit-Team implementierte die Basisversion in Safari 16.4 und ergänzte Updates in Safari 17.0.
    • Mozilla aktualisierte die Implementierung in Firefox 118, und Safari sowie Firefox bestehen derzeit 100 % aller Tests.
    • Chrome begann 2015 mit einer experimentellen Implementierung, hat sie aber noch nicht veröffentlicht.
    • Font size adjust bietet eine Möglichkeit, mehrere Schriftarten innerhalb einer Textzeichenfolge so anzupassen, dass sie visuell gleich groß wirken.
    • So lassen sich zum Beispiel bei 1.4rem-Text x-height, cap height, ch-Breite, ic-Breite und ic-Höhe angleichen.
    • Das ist nützlich, wenn man Code und normalen Text mischt oder mehrere Sprachen in einem Satz kombiniert.

  • HTTPS URLs for WebSocket

    • Die WebSocket-API hat die Besonderheit, dass sie die nicht zu HTTP(S) gehörenden Schemas ws: und wss: verwenden muss.
    • Da sich das URL-Verhalten fast genauso verhält wie bei HTTP(S)-URLs, kann die Nutzung der API umständlich sein.
    • Auf Basis von Feedback von Webentwicklern hat das WebKit-Team die API so erweitert, dass sie auch HTTP(S)-URLs unterstützt, und dies in Safari 17.0 veröffentlicht.
    • Bisher war Code nötig, der je nach location.protocol zu wss: oder ws: wechselt, jetzt kann man stattdessen einfach new WebSocket(path) verwenden.
    • Durch die Aufnahme in Interop 2024 sollen auch andere Browser dies übernehmen.

  • IndexedDB

    • IndexedDB ist eine API zum Speichern von Daten auf Client-Seite in Form einer objektorientierten Datenbank.
    • Sie wird seit 2011 schrittweise in Browsern eingeführt, und der Webstandard hat sich seitdem weiterentwickelt.
    • Version 2 und Version 3 werden von allen großen Browsern unterstützt.
    • Version 2 ist vollständig interoperabel, bei Version 3 ist jedoch zusätzliche Arbeit nötig, um die Qualität der Implementierungen anzugleichen.

  • Layout

    • CSS Grid und Flexbox waren bereits 2021 Teil des ursprünglichen Interop-Projekts.
    • Subgrid kam in Interop 2023 hinzu.
    • Alle drei Layout-Methoden befinden sich in einem guten Zustand, sind aber noch nicht perfekt.
    • 2024 werden die Tests aus allen drei Bereichen zu einem einzigen Schwerpunktbereich namens Layout zusammengeführt.
    • Die Arbeit an höherer Interoperabilität in komplexen Randfällen geht weiter.
    • Entwickler können sich auf Flexbox, Grid und Subgrid verlassen und sie einsetzen; alle Browser unterstützen sie robust.

  • Pointer and Mouse Events

    • Pointer events behandeln Zeigegeräte wie Maus, Pen oder Stylus sowie Berührungen mit einem oder mehreren Fingern in einem einheitlichen DOM-Ereignismodell.
    • Diese API wurde ab 2012 in Browsern eingeführt und war bis 2019 in allen Browsern vorhanden, doch die Interoperabilität war instabil.

  • Das Interop-Team startete 2022 das Untersuchungsprojekt zu Pointer and Mouse Events, um den Konsens zu präzisieren und entsprechende Tests zu schreiben

    • In Interop 2023 wurden diese Tests zu einem Schwerpunktbereich, und die Bestehensquote stieg von 34 % auf 81 %
    • Es bleibt noch Arbeit, daher bleibt dies auch 2024 ein Schwerpunktbereich

  • Popover

    • Das popover-Attribut von HTML bietet eine browserintegrierte Möglichkeit, Elemente in der obersten Ebene einer Seite erscheinen zu lassen
    • Für Overlays, die die gesamte Webseite abdecken, ist das dialog-Element am besten geeignet
    • Wenn andere Elemente zu Popup-Meldungen, Benutzeroberflächen oder ein- und ausblendbaren Inhalten werden sollen, stellt popover dafür ein Framework bereit
    • Die Unterstützung für popover wurde 2023 in Chrome 114 und Safari 17.0 eingeführt
    • Firefox arbeitet in Firefox Nightly an der Unterstützung

  • Relative Color Syntax

    • Relative Color Syntax ist eine neue Methode, CSS-Farben durch Bezug auf andere Farben zu definieren
    • Eine vorhandene Farbe kann um einen bestimmten Betrag aufgehellt oder abgedunkelt werden, oder die Sättigung einer Farbvariablen kann angepasst und einer zweiten Variablen zugewiesen werden
    • Beim Aufbau von Design-Systemen kann das besonders leistungsfähig sein
    • Safari 16.4 brachte im März 2023 als Erstes Unterstützung dafür
    • Chrome 119 und Edge 119 führten die Unterstützung im Oktober bzw. November 2023 ein
    • Derzeit gibt es keine Implementierung, die die Verwendung von currentcolor zusammen mit Relative Color Syntax unterstützt
    • Der Bereich Relative Color Syntax in Interop 2024 konzentriert sich nicht auf die vollständige Unterstützung, sondern gezielt auf currentcolor-Support und Tests zum Verhalten außerhalb des Farbraums
    • Dabei wird geprüft, was auf Displays geschieht, die P3 color nicht unterstützen

  • requestVideoFrameCallback

    • Das <video>-Element bietet leistungsfähige Funktionen, um Videos im Web einzubinden
    • HTMLVideoElement stellt Eigenschaften und Methoden bereit, um Videoobjekte in JavaScript zu steuern
    • requestVideoFrameCallback() ermöglicht es, Aufgaben effizient pro Videoframe auszuführen
      • Videoverarbeitung oder -analyse
      • Zeichnen auf einem Canvas
      • Synchronisierung mit einer Audioquelle
    • Unterstützt ab Chrome 83 und Safari 15.4
    • Die Aufnahme in Interop 2024 hilft dabei, Browser-Implementierungen zu vervollständigen und zu verfeinern

  • Scrollbar Styling

    • Der Bereich Scrollbar Styling umfasst zwei CSS-Eigenschaften, die für die Gestaltung von Scrollbars verwendet werden können
    • scrollbar-width bietet die drei Werte auto, thin und none
      • auto ist die Standardbreite
      • thin stellt eine schmalere Scrollbar bereit
      • none blendet die Scrollbar aus, während das Scrollen des Inhalts erhalten bleibt
    • Firefox 64 implementierte die Unterstützung im Dezember 2018, und sie wurde gerade auch in Chrome 121 und Edge 121 eingeführt
    • scrollbar-gutter reserviert Platz für die Scrollbar, damit dasselbe Layout unabhängig davon erhalten bleibt, ob eine Scrollbar vorhanden ist
    • scrollbar-gutter: stable weist den Browser an, selbst ohne Scrollbar Platz zu reservieren
    • So lässt sich ein Layout-Shift verhindern, wenn sich der Bedarf an einer Scrollbar ändert
    • Eingeführt 2021 bis 2022 in Chrome 94, Edge 94 und Firefox 97
    • Safari muss am meisten Arbeit leisten, um diesen Schwerpunktbereich abzuschließen
    • Chrome und Firefox bestehen die Tests bereits zu 100 %
    • Safari bot bereits 2009 zuerst Funktionen zur Scrollbar-Gestaltung mit neun Pseudoelementen ::-webkit-scrollbar-*, aber dieser Ansatz wurde kein offizieller CSS-Webstandard
    • Die CSS Working Group entschied sich für einen wesentlich einfacheren Ansatz

  • @starting-style and transition-behavior

    • Dieser Bereich konzentriert sich auf zwei neue Funktionen zur Steuerung von Animationen
    • Beide Funktionen wurden im September 2023 in Chrome 117 und Edge 177 eingeführt
    • @starting-style ermöglicht es, einen Startwert für ein bestimmtes Element zu definieren
    • Das ist nötig, wenn ein Element eine Transition durchlaufen soll
    • Es bietet auch eine Möglichkeit für Übergänge beim Wechsel nach oder von display:none
    • transition-behavior erweitert die Behandlung diskret animierbarer Eigenschaften, die zuvor nur in Animationen möglich war, auf CSS-Transitions
    • Dadurch wird es möglich, beim Ein- oder Ausblenden eines Elements die Eigenschaft display zu überblenden

  • Text Directionality

    • Die Richtung des Textflusses ist ein wichtiger Faktor in der Webtypografie
    • Einige Sprachen verlaufen von links nach rechts, andere von rechts nach links
    • Das dir attribute ermöglicht es, bei HTML-Elementen die Richtung mit left, right und auto anzugeben
    • auto fordert den Browser auf, die Richtung anhand des ersten Buchstabens zu schätzen
    • Das Zusammenspiel von Richtung und shadow tree war bis vor Kurzem nicht klar definiert
    • Dieses Problem wurde auf Standardebene behandelt, und die Aufnahme in Interop 2024 überprüft die Angleichung der Implementierungen

  • text-wrap: balance

    • Webdesigner wünschen sich schon lange eine Möglichkeit, sehr kurze oder nur aus einem Wort bestehende Zeilen zu vermeiden
    • Durch responsives Webdesign und die fehlende Kontrolle über Spaltenbreiten wird dieses Problem noch schwieriger
    • text-wrap bietet mehrere Optionen, mit denen dem Browser mitgeteilt wird, wie Zeilenumbrüche für bestimmte Anwendungsfälle berechnet werden sollen
    • text-wrap: balance ist eine passende Lösung für Überschriften
    • Es verteilt einige Textzeilen ausgewogen, sodass jede Zeile eine ähnliche Menge an Text enthält
    • Eingeführt in Chrome 114 und Firefox 121, implementiert in Safari Technology Preview
    • Interop 2024 umfasst auch Verhaltenstests für text-wrap-mode, text-wrap-style und white-space-collapse
    • Die CSS Working Group hat kürzlich geändert, wie diese Longhands miteinander interagieren, weshalb die Unterstützung zwischen Browsern derzeit uneinheitlich ist

  • URL

    • URLs sind eines der grundlegendsten Elemente des Webs, und ohne URLs gäbe es das Web nicht
    • Wie bei vielen Dingen, die in der frühen Geschichte des Webs erfunden wurden, ist auch die URL-Unterstützung noch nicht vollständig interoperabel
    • WHATWG verfasste den URL Living Standard, der detailliert festlegt, wie URLs genau funktionieren sollen
    • Tests zur Unterstützung dieses Standards waren ein Schwerpunktbereich von Interop 2023, und die Bestehensquote verbesserte sich von 77 % auf 85 %
    • Auch 2024 wird weiter an der Interoperabilität gearbeitet
    • Safari besteht 99,7 % der Tests

Untersuchungsprojekte und Fortschrittsverfolgung

  • Interop 2024 umfasst auch drei Untersuchungsbereiche
    • Accessibility Testing
    • Mobile Testing
    • WebAssembly Testing
  • Die Untersuchungsbereiche sind Aufgaben, mit denen das Interop-Team mehr Tests schreibt und ausführbar macht
  • Das Untersuchungsprojekt Mobile Testing hat zum Ziel, die für WPT notwendige Infrastruktur zu vervollständigen, damit Browser auf mobilen Betriebssystemen getestet werden können
    • Künftig könnten im Interop-Projekt-Dashboard auch mobile Bewertungen enthalten sein
  • Zwei der drei Untersuchungen sind Projekte, die bereits seit dem letzten Jahr fortgeführt werden, beginnen 2024 aber alle bei 0 % Fortschritt
  • Die beteiligten Teams setzen in diesem Jahr neue Ziele, und das Dashboard zeigt den Fortschritt im Verhältnis zu diesen Zielen an
  • Den Fortschritt von Interop 2024 kann man im Interop 2024 dashboard verfolgen
  • Interoperabilität ist eine der grundlegenden Säulen für den Erfolg des Webs, und auf Basis der Arbeiten von Interop 2022 und 2023 wird die Zusammenarbeit auch 2024 fortgesetzt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-02-03
Hacker-News-Meinungen

  • Hier gibt es definitiv einige coole Änderungen, und bessere Unterstützung ist erfreulich.
    Zum Beispiel ist CSS Nesting eine große Änderung, weil es einer der Hauptgründe war, warum SASS und LESS nützlich waren. Es war ohnehin sinnvoller, dass so etwas als Kernfunktion von CSS kommt statt als Präprozessor-Feature wie Variablen.
    Es ist auch immer spannend, was man mit Custom Properties alles machen kann, und das wirkt wie ein guter nächster Schritt nach Shadow DOM und Custom Elements. Auch popover ist überraschend gut; dass man jetzt popupartige Modals ohne JavaScript bauen kann, ist sehr nützlich. Das kann Zeit sparen, die sonst für Custom-Modals, Dropdown-Menüs, Hamburger-Buttons und Ähnliches draufgeht.
    Allerdings würde ich mir wünschen, dass solchen Projekten auch Forms mehr Aufmerksamkeit schenken. Der aktuelle Zustand, in dem viele Felder aus der HTML-5-Ära je nach Browser viel zu unterschiedlich sind, für die Darstellung auf proprietäre Pseudoklassen-Styles angewiesen sind und insgesamt schwer zu customizen sind, wirkt für eine Plattform, auf der man fast alles machen kann, erstaunlich veraltet.

    • Wenn UI-Designer freie Hand haben, wollen sie diese neuen Standard-Modals, Menüs und Buttons oft nicht, selbst wenn sie frühere Versionen mochten.
      Diese Änderung wird zwar helfen, aber bei UI scheint Konsistenz eher wie eine Schwäche behandelt zu werden statt wie ein Feature, das alle anstreben sollten.
    • CSS Nesting ist der letzte Grund, noch CSS-Präprozessoren zu verwenden.
      Sobald Safari 17.2+ weiter verbreitet ist, kann man einfach reines CSS nutzen.
      Ansonsten sind Variablen für @media-Queries noch ein Grund, aber das ist ein weniger häufiger Bedarf.

  • Am Ende scheint JPEG XL doch nicht dabei zu sein. Wenn man bedenkt, dass es das erste Bildformat seit sehr langer Zeit ist, das insgesamt wirklich klare Verbesserungen bringt, ist das ziemlich schwer nachzuvollziehen.
    Ich hatte gehofft, Interop würde die Situation beenden, in der Google die Einführung faktisch blockiert, aber offenbar müssen wir weiter warten, während sich halbgare Ersatzlösungen für weitverbreitete alte Formate weiter stapeln.

    • Das finde ich auch schade.
      Ich weiß nicht, was Google an JPEG XL auszusetzen hat.

  • Die Aussage, „alle Browser unterstützen P3-Farben nun vollständig“, stimmt so nicht ganz.
    Firefox clamppt weiterhin alle Farben auf sRGB, bevor sie an das Gerät gesendet werden. https://bugzilla.mozilla.org/show_bug.cgi?id=1626624#c16

  • Ich mache nur sehr gelegentlich Web-Arbeit und bin daher wohl nicht die Hauptzielgruppe, aber die auffälligste fehlende Funktion in WebKit ist für mich die fehlende Unterstützung für SVG-Favicons.
    Das ist wirklich schwer zu verstehen, und all die Apple-spezifischen Icons in verschiedenen Größen mitzupflegen, ist für einen Gelegenheits-Webentwickler wie mich ziemlich lästig.

    • Du wirst froh sein, dass es inzwischen nicht mehr wie früher ist. Heute braucht man nur noch ein einziges Apple-spezifisches Icon [1]:
      [1]: https://evilmartians.com/chronicles/how-to-favicon-in-2021-s...
    • Etwas verwandt: Chrome verwendet kein SVG-Favicon, wenn ein ico-Favicon vorhanden ist. (https://bugs.chromium.org/p/chromium/issues/detail?id=145085...) Deshalb liefere ich PNG-Favicons zusammen mit SVG-Favicons aus.
    • Zur Info: Safari unterstützt einfarbige SVG-Favicons in diesem Format.
      Wenn man etwas wie Vite nutzt, kann man auch die komplette Erzeugung von Favicons und Home-Screen-Icons aus einem einzigen Quellbild automatisieren.
    • SVG skaliert nicht so, wie man es möchte. Selbst wenn man zum Beispiel ein quadratisches 256px-Bild als Vektor erstellt hat, macht eine reine Vektorumwandlung es bei 24px nicht automatisch gut aussehend.
    • Stimmt. Es sollte nicht nötig sein, all diese Icons erzeugen zu müssen.
      Und es wäre schön, wenn man auch Listen stylen könnte, zum Beispiel indem man einem Element so etwas wie eine Flagge anhängt.
      CSS Page Transitions oder Scroll-basierte Animationen werden ebenfalls nicht erwähnt; auch sie könnten Boilerplate-JavaScript reduzieren.

  • Ich war nach dem Lesen dieses Beitrags viel begeisterter als erwartet
    Ich frage mich, warum es im teilnehmenden Konsortium keinen PWA-Schwerpunktbereich gibt

    • Historisch gesehen lag der Fokus von Interop eher auf CSS, aber das ändert sich allmählich
      Trotzdem enthalten viele Testbereiche Worker-Tests, wodurch sich auch der Zustand von PWAs verbessern dürfte. 2023 gab es einen ganzen Modules-Abschnitt, in dem viele PWA-/Worker-spezifische Funktionen getestet wurden. Auch ein beträchtlicher Teil der APIs, die getestet und untersucht werden, etwa OffscreenCanvas oder mobile Tests, ist für viele PWA-Anwendungen sehr relevant
      Dieses Jahr ist Interop so wenig CSS-zentriert wie im letzten Jahr. Aus meiner Sicht gibt es Abschnitte zu IndexedDB, WebSocket und wichtigen Verbesserungen bei der Barrierefreiheit, auf die PWAs vor allem angewiesen sind. Auch die drei Untersuchungsbereiche WebAssembly, Barrierefreiheit und mobile Tests sind alle für PWAs relevant
      Ich frage mich, auf welche konkreten APIs du dir mehr Fokus wünschen würdest
    • Soweit ich mich erinnere, besteht das Konsortium aus ungefähr 12 Personen, die auch bei Browser-Unternehmen arbeiten
      Ziel ist es, zusammenzukommen und unter Berücksichtigung der aktuellen Roadmaps und Arbeitslast Funktionen zu finden, an denen man ein Jahr lang gemeinsam arbeiten oder die man verbessern kann. Man kann Interop als kleine zusätzliche Tickets sehen, die zwischen der Entwicklung wichtiger Funktionen im Hauptjob erledigt werden können
      Bisher lag der Fokus auf sehr niedrigstufigen Details der Art und Weise, wie Browser Inhalte rendern. Da JavaScript-APIs größtenteils standardisiert und „upstream“ zusammengeführt sind, ist dies der Bereich mit dem größten Verbesserungspotenzial
      Bevor es einen Trend gibt, neue Funktionen gleichzeitig in allen Engines zu implementieren, wird vermutlich weiterhin mehr Arbeit darin bestehen, Lücken zwischen Browsern zu schließen
      Allerdings kommt Apple, nachdem es endlich Web Push zu Mobile Safari hinzugefügt hat, den Teilen schon ziemlich nahe, die die meisten Web-Apps benötigen, um von PWA-Funktionen zu profitieren. Ich frage mich, welche Funktionen, die es noch nicht browserübergreifend gibt, du gern nutzen würdest
    • Mich würde interessieren, was deiner Ansicht nach in einem PWA-Schwerpunktbereich enthalten wäre
      An anderer Stelle wurden https://web.dev/learn/pwa/capabilities und https://whatpwacando.today verlinkt, aber ich denke, dass viele dieser Funktionen ihrem Wesen nach kaum als PWA-Funktionen gelten können. Da sehr viele davon auch außerhalb von PWAs breit genutzt werden, verliert eine Einordnung in einen „PWA“-Block an Aussagekraft. Für Webentwickler sind Kategorien wie „Storage“ oder „Media“ wahrscheinlich sinnvoller
      Nach der grundlegenden Definition von PWA geht es hauptsächlich um Manifest und Service Worker sowie darum, diese mit der Webplattform zu kombinieren
      Manifeste sind schwer automatisch zu testen. Ihre Inhalte werden in unterschiedlichen Teilen der Browser-UI angezeigt, und UI ist in Webstandards im Allgemeinen nicht spezifiziert, weil Anbieter die Freiheit haben wollen, eigene UI-Entscheidungen zu treffen. Daher ist das schwer aufzunehmen, und unklar ist auch, wie viele Interoperabilitätsprobleme es dort gibt
      Service Worker könnten vorgeschlagen werden. In den letzten Jahren wurden sie zwar nicht vorgeschlagen, aber auch hier sehe ich derzeit nicht so viele Interoperabilitätsprobleme
    • PWAs umgehen das App-Store-Modell. Man kann Apps direkt aus dem Browser installieren
      Deshalb ist es in ihrem Interesse, dieses Thema hinauszuzögern und die PWA-Erfahrung absichtlich weniger attraktiv zu machen
      Warum Firefox die PWA-Unterstützung entfernt hat, weiß ich nicht genau, aber es könnte an den Wartungskosten liegen
    • Weil PWA im Vergleich zum viel breiteren Anwendungsfall „Inhalte anzeigen“ ein Nischen-Use-Case ist

  • Fonts
    Ich würde mir wünschen, dass mehr Aufwand in CSS-Typografie fließt
    Insbesondere brauchen wir leading-trim und margin-trim
    https://medium.com/microsoft-design/leading-trim-the-future-...
    https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim

  • Der größte Fortschritt wäre, dass Safari-Updates nicht mehr an Betriebssystem-Updates gekoppelt sind

    • Auf macOS ist das möglich
      Auf iOS allerdings nicht
      Und da iOS-Updates alle 3–4 Monate neu erscheinen, ist das in der Praxis auf iOS kein Problem

  • Ich frage mich, ob das ein Zeichen dafür ist, dass WebKit beginnt, bei WebAssembly-Funktionen aufzuholen
    Derzeit liegt es gegenüber Chrome und Firefox ziemlich zurück, und große, wichtige Funktionen wie multiple memories oder garbage collection fehlen

    • Beides ist noch nicht Teil der Wasm-Spezifikation und befindet sich in der Standardisierung
      Google ist eher bei „Bereit! Feuer! Zielen! Noch mal feuern!“ und veröffentlicht daher leichter Implementierungen unfertiger Spezifikationen, während Apple eher bei „Bereit! Zielen! Zielen! Feuer!“ ist und so etwas im Allgemeinen scheut. Zu Firefox ist es schwer etwas zu sagen

  • Ich kann kaum glauben, dass die Cookie Store API noch immer nicht offiziell implementiert ist
    Wir haben 2024, und man soll immer noch einen riesigen, chaotischen String parsen, nur um ein Cookie anhand seines Namens zu holen?

    • Vielleicht, weil es seit HTML 5 localStorage gibt

  • Das WebSocket-Protokoll-Thema verstehe ich nicht ganz
    Nach dem Upgrade ist die Verbindung nicht mehr das http(s)-Protokoll; ist es da nicht irreführend, hier die Verwendung von http oder https zu erlauben? Ist es wirklich so schlimm, einen ternären Operator zu verwenden oder einen anderen Wert zu haben als den, zu dem die aktuelle Seite navigiert ist? Ich freue mich über Browser-Normalisierungsarbeit, aber dieser Punkt wirkt selbst dann ziemlich niedrig priorisiert, wenn er eine Änderung wert ist