Zwischenjahres-Update zum Interop 2024

Wir befinden uns jetzt in der zweiten Jahreshälfte und es ist an der Zeit, uns anzusehen, wie sich die Web-Interoperabilität durch Interop 2024 in diesem Jahr verbessert hat.

Anfang des Jahres hatte Chrome eine Bewertung von 83 für die experimentelle Browserunterstützung.

Das Dashboard mit den Bewertungen für Interoperabilität: 65, Untersuchungen: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
Im Februar 2024 im Interop 2024-Dashboard
Das Dashboard mit den Bewertungen: Interoperabilität: 75, Untersuchungen: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.
Das Interop 2024-Dashboard Ende Juni 2024.

Heute liegt dieser Wert bei 90, während stabile Browser seit der Veröffentlichung von Chrome 126 im Juni eine Bewertung von 85 erhalten. Die Gesamtbewertung der experimentellen Interoperabilität ist um 10 Punkte gestiegen. In diesem Beitrag werden einige der Funktionen beschrieben, die zu diesem Ergebnis beigetragen haben.

Pop-over

Pop-ups wurden im April 2024 Teil der Baseline „Neu verfügbar“. Pop-ups sind spannend, weil so viele der UI-Funktionen, die Sie erstellen müssen, z. B. Menüs, Kurzinfos, Overlays für Auswahlen und Anleitungen für die Benutzeroberfläche, Arten von Pop-ups sind. Vor dem Pop-over war für die Erstellung dieser Funktionen viel benutzerdefinierter Code erforderlich. Code, der dafür sorgt, dass nicht mehrere Elemente gleichzeitig geöffnet werden, oder der das Schließen des Elements ermöglicht, wenn der Nutzer außerhalb des Elements klickt. Möglicherweise hatten Sie auch Probleme mit z-index, um dafür zu sorgen, dass ein UI-Element immer über dem Rest der Benutzeroberfläche angezeigt wird.

All diese und weitere Funktionen sind in der Popover API enthalten. So sparen Sie Entwicklungszeit und können leistungsfähigere und barrierefreiere Benutzeroberflächen erstellen. Mit dem folgenden Code wird beispielsweise ein Pop-up mit „light-dismiss“ erstellt, das andere Pop-ups beim Öffnen automatisch schließt.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

Weitere Informationen finden Sie unter Die Popover API ist jetzt in der Baseline verfügbar. Viele Apps profitieren bereits von Pop-ups. Tokopedia konnte die Menge des React-Codes erheblich reduzieren, indem es die Funktion nutzte und für nicht unterstützte Browser einen Polyfill verwendete.

Erweiterte benutzerdefinierte Properties mit @property

Mit der @property-CSS-Regel können Sie erweiterte benutzerdefinierte Properties erstellen, die viel detaillierter sind als Name und Wert in Standard-benutzerdefinierten Properties. Legen Sie die zulässige Syntax fest, um zu definieren, welche Art von Daten diese Property enthält, z. B. Farbe, Zahl oder Länge. Legen Sie dann fest, ob die Property übernommen werden soll, und geben Sie einen Anfangswert an.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Die @property-Regel verbessert derzeit die Bewertung der experimentellen Version von Firefox. Dadurch wird auch die Bewertung der stabilen Version verbessert, wenn Firefox 128 später in diesem Monat veröffentlicht wird. Außerdem wird eine Verbindung zum Datensatz „Baseline Newly Available“ hergestellt.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

Weitere Informationen finden Sie unter @property: Superkräfte für CSS-Variablen.

Das font-size-adjust-Attribut

Mit der CSS-Eigenschaft font-size-adjust können Sie die Größe von Kleinbuchstaben im Verhältnis zur Größe von Großbuchstaben ändern. Das ist in Situationen nützlich, in denen ein Schriftfallback auftreten kann, da so sichergestellt wird, dass eine Fallback-Schrift weiterhin lesbar ist, insbesondere bei kleinen Schriftgrößen.

Die Property font-size-adjust ist derzeit in der experimentellen Bewertung für Chrome enthalten. Sie wird jedoch die Bewertung für die stabile Version erhöhen, wenn sie diesen Monat mit Chrome 127 veröffentlicht wird. Außerdem wird es der Gruppe „Baseline Newly Available“ (Baseline neu verfügbar) hinzugefügt.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

Mit text-wrap: balance wird der Browser angewiesen, die bestmögliche Zeilenschaltung für den Text zu ermitteln. Dies ist besonders nützlich für Überschriften, da verhindert wird, dass eine Überschrift beispielsweise auf ein einzelnes Wort in Zeile 2 umgebrochen wird.

Diese Funktion wird seit Kurzem von Safari unterstützt. Bei anderen Browsern werden derzeit Fehler behoben, damit die Funktion in allen Browsern einwandfrei funktioniert.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


Neben der Interoperabilität dieser wichtigen Funktionen wurden viele weitere Verbesserungen vorgenommen. Jeder bestandene Test steht für ein Interoperabilitätsproblem, das nicht auftritt. Wir sind gespannt, wie nah wir bis zum Jahresende an der 100-prozentigen Bewertung herankommen.