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.
![Das Dashboard mit Scores-Interop: 65, Untersuchungen: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=de)
![Das Dashboard mit Scores-Interop: 75, Investigations: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=de)
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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.