Zwischenjahres-Update zum Interop 2024

Rachel Andrew

Der Beginn der zweiten Jahreshälfte ist ein guter Zeitpunkt, Interop 2024 hat die Interoperabilität im Web dieses Jahr verbessert.

Wie wir angefangen haben

Zu Beginn des Jahres Chrome hatte eine experimentelle Browser-Unterstützung von 83.

<ph type="x-smartling-placeholder">
</ph> Das Dashboard mit Scores-Interop: 65, Untersuchungen: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
Das Interop 2024-Dashboard im Februar 2024
<ph type="x-smartling-placeholder">
</ph> Das Dashboard mit Scores-Interop: 75, Investigations: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.
Das Interoperabilitäts-Dashboard 2024, Ende Juni 2024.

Heute liegt dieser Wert bei 90, mit einem Wert von 85 für stabile Browser im Juni veröffentlicht wurde. Der experimentelle Interoperabilitätswert ist gestiegen 10 Punkte. In diesem Beitrag werden einige der Funktionen vorgestellt, die uns bei diese Punktzahl.

Pop-over

Popover wurde im April 2024 in „Baseline Newly available“ aufgenommen. Pop-over ist interessant, weil so viele UI-Funktionen, die Sie erstellen müssen, Menüs, Kurzinfos, Overlays für die Auswahl und Unterrichts-UIs – Pop-over. Vor dem Pop-over waren für die Erstellung dieser Funktionen viele Code. Code, um sicherzustellen, dass nicht mehrere Elemente gleichzeitig geöffnet waren, oder um leicht schließen, wenn der Nutzer auf eine Stelle außerhalb des Elements geklickt hat. Möglicherweise haben Sie auch mit z-index zu kämpfen hatten, um sicherzustellen, dass ein UI-Element im Vordergrund blieb der Benutzeroberfläche.

All diese und weitere Funktionen sind in der Popover API die Entwicklungszeit gespart und helfen dabei, leistungsfähigere und barrierefreiere Schnittstellen zu schaffen. Für Beispiel: Mit dem folgenden Code wird ein Pop-over mit leicht zu schließendem Display erstellt, andere Pop-over beim Öffnen automatisch schließen.

<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>

Unterstützte Browser

  • Chrome: 114. <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen finden Sie unter Popover API landet in Baseline. Viele Anwendungen bereits die Vorteile von Popover erkennen. Tokopedia konnte den Umfang des React-Codes erheblich reduzieren. indem ihr die Funktion nutzt und für nicht unterstützte Browser ein Polyfill verwendet.

Erweiterte benutzerdefinierte Eigenschaften mit @property

Mit der CSS-Regel @property können Sie erweiterte benutzerdefinierte Eigenschaften erstellen, mehr Details als der Name und Wert, die in benutzerdefinierten Standardeigenschaften verfügbar sind. Legen Sie die zulässige Syntax fest, um zu definieren, welchen Datentyp diese Property enthält – zum Beispiel eine Farbe, eine Zahl oder eine Länge. Legen Sie dann fest, ob die Eigenschaft übernimmt und einen Anfangswert.

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

Die Regel @property verbessert derzeit die Testpunktzahl für Firefox, Steigerung der stabilen Bewertung bei der Veröffentlichung von Firefox 128 im Laufe des Monats. Außerdem verbindet es Baseline neu verfügbar.

Unterstützte Browser

  • Chrome: 85 <ph type="x-smartling-placeholder">
  • Edge: 85. <ph type="x-smartling-placeholder">
  • Firefox: 128. <ph type="x-smartling-placeholder">
  • Safari: 16.4 <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen finden Sie unter @property: CSS-Variablen Superkräfte zuweisen.

Das Attribut font-size-adjust

Mit der CSS-Eigenschaft font-size-adjust können Sie die Größe von Kleinbuchstaben ändern. bezogen auf die Größe der Großbuchstaben. Dies ist in bestimmten Situationen nützlich, wo ein Schriftart-Fallback auftreten kann, da so sichergestellt wird, dass eine Fallback-Schriftart insbesondere bei kleinen Schriftgrößen.

Die Property font-size-adjust ist derzeit im Testwert enthalten für Chrome, aber die stabile Punktzahl wird dadurch erhöht, wenn sie mit Chrome 127. Außerdem verbindet es Baseline Newly Availability.

Unterstützte Browser

  • Chrome: 127. <ph type="x-smartling-placeholder">
  • Edge: 127. <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 16.4 <ph type="x-smartling-placeholder">

Quelle

Textumbruch: Balance

Mit text-wrap: balance wird der Browser angewiesen, die beste Balance Zeilenumbruch für den Text. Das ist besonders nützlich für Überschriften, z. B. in ein einzelnes Wort in Zeile zwei.

Dies wird seit Kurzem auch von Safari unterstützt. Andere Browser arbeiten daran, dieses Problem zu beheben. nicht bestandene Tests, um sicherzustellen, dass diese Funktion in allen Browsern funktioniert.

Unterstützte Browser

  • Chrome: 114. <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 121. <ph type="x-smartling-placeholder">
  • Safari: 17.5 <ph type="x-smartling-placeholder">

Quelle

Neben diesen wichtigen Funktionen, die interoperabel werden, gibt es noch viele weitere Verbesserungen vorgenommen. Jeder bestandene Test stellt eine Interoperabilitätsproblem, das Ihnen nicht begegnet. Wir sind gespannt, bis zum Jahresende einen Quote von 100% erreichen.