Revision 597: Neues in Safari, Teil 2 von 2

Diverse Release-Ankündigungen des Apple-Teams stellten für Peter und Schepp den

Anlass, zu schauen, was sich bei Team WebKit so tut. Und das ist eine ganze

Menge! Deshalb haben wir es auch nicht in eine Revision quetschen können,

sondern sie benötigten derer zwei. Wir stützen uns dabei auf die Release-Notes

von Safari 17 und 17.2 Beta sowie den Safari Technology Previews 178, 180 und

181.

SCHAUNOTIZEN

[00:01:49] DIE COOKIE STORE API

Die Cookie Store API erhält nun auch in Safari Einzug und verbessert die

Developer Experience in einem lange vernachlässigten Bereich: Dem Umgang mit

Cookies. Zuvor gab es ja nur document.cookie für den Zugriff auf selbige, wobei

das Setzen von Cookies darüber noch gerade so okay war, aber beim Auslesen alle

Cookies zusammen in einem großen zusammengemantschten String herauskamen, den

man im Anschluss selber parsen musste. Fehlt nun noch Firefox, auf dass alle

Browser die neue API unterstützen. Peter verweist auf einen Edgecase, bei dem

Chrome in der alten „API“ document.cookie jegliche Daten, die nicht

UTF-8-formatiert sind stillschweigend fallen lässt. Hier herrscht(e) wohl beim

neuen Standard noch Unklarheit, ob man Dinge hier ebenso handhaben möchte, oder

nicht. Peter kommt in dme Zuge auf das Intl.Segmenter-Objekt zu sprechen, das

für das Arbeiten mit erweiterten Zeichensätzen und auch Emojis gedacht ist, aber

leider nicht vom Firefox unterstützt wird.

[00:10:24] DAS -ELEMENT

Das neue -Element dient wie damals das -Element als syntaktischer

Zucker, um eine passende Landmark/ARIA-Role implizit ins Element einzubacken.

Dass das sinnvoll ist, belegt eindrucksvoll der Web Almanac 2022, der zeigt,

dass passende Elemente viel öfter genutzt werden als die dazugehörigen

role-Attribute.

[00:25:00] POPOVER API

Hinsichtlich der nun auch in Safari eingebauten Popover API verweisen wir auf

die Revision 585.

[00:26:30] S IN S

Für eine übersichtlichere Strukturierung von s erlauben es Safari und

Chrome nun, s unter die – und -Elemente zu mischen. Peter

und Schepp testen in dem Zuge, was Browser mit unzulässigen HTML-Elementen in

s machen.

[00:33:48] FONT-SIZE-ADJUST: FROM-FONT

Anders als von Schepp vermutet, dient dieser Wert dazu, ein Verrutschen von

Inhalt zu verhindern, wenn eine Schrift aus dem Font-Stack nicht geladen werden

kann und dann eine Fallback-Schrift mit ganz anderen Metriken genutzt wird. Mit

code>font-size-adjust: from-font werden diese Werte aus der ersten verfügbaren

Schrift abgeleitet.

[00:37:46] HYPHENATE-CHARACTER

Ab jetzt könnt Ihr angeben, mit Hilfe welchen Zeichens Worttrennungen

stattfinden mögen. Da uns der Usecase nicht so ganz klar ist, forschen wir live

ein wenig dazu und lernen, dass es das Canadian Syllabics gibt, das wie ein

Gleichzeichen aussieht.

[00:40:20] @COUNTER-STYLE

Mit der @counter-style-Rule lässt sich eine Art visuelles Template für

Aufzählungen anlegen, das man anschließend per list-style-Angabe referenzieren

kann. Darüber kommen wir auch auf die ähnlich heißenden CSS Counter zu sprechen,

mit denen man in CSS hochzählen und die aktuelle Zahl jeweils ausgeben kann. Wir

kommen darauf zu sprechen, dass man CSS Counters und deren

counter-reset-Eigenschaft zusammen mit content als eine Art Steigbügelhalter zur

Ausgabe von numerischen Custom Properties verwenden kann. Außerdem erzählt

Schepp von seinem irritierenden Erlebnis bei der Kombination von CSS Countern

und contain: style – jedoch alles Spec-konform! Oder dass es (noch) keine gute

Idee ist, ein contain: size oder contain: strict mit aspect-ratio zu

kombinieren. Stattdessen nutzt Schepp nun lieber geinlinedte SVG-Platzhalter als

eine Art Spacer-GIF 2.0.

[00:46:10] DISPLAY: CONTENTS

Wir freuen uns darüber, dass mit Safari alle (und bekannten) verbliebenen

Accessibility-Probleme von display: contents behoben sind! Peter findet, dass

dieses Feature gut zeigt, wie irgendwas konzeptionell super einfach sein kann,

aber in der Implementierung dann das genaue Gegenteil ist. Ein Beispiel ist, was

passiert, wenn man display: contents auf ein sogenanntes „Replaced Element“,

also ein Bild oder ein Select anwendet. Die CSS Spezifikation hat deshalb

eigenen Block mit Sonderregeln für alle möglichen Elemente, die dort als

„Unusual Elements“ geführt werden.

[00:51:07] DAS SCRIPTING CSS MEDIA FEATURE

Nun lassen sich auch Media Queries und media-Attribute für den Fall verdrahten,

dass ein Endgerät keine Scripte versteht oder ausführen kann, via scripting:

none. Neben scripting: enabled gäbe es darüberhinaus laut Spec noch die Variante

scripting: initial-only, für den Fall dass ein Client nur zu Beginn einmal

Scripte ausführt und dann nicht mehr. Allerdings ist diese Definition reichlich

unscharf und wird daher noch von keinem Browser unterstützt.

[01:02:55] IMAGE-SET() AKTUALISIERT UND PRÄFIX-FREI

Die gepräfixte CSS -webkit-image-set()-Funktion schlummert in WebKit (und auch

Chrome) seit mit dem iPhone 4 Retina-Bildschirme das Licht der Welt erblickt

haben. Diese ehemals Apple-eigene Erfindung wurde derweil in den CSS-Standard

überführt und dabei um einige weitere Fähigkeiten wie File-Format-Angaben

erweitert. Safaris Implementation wurde nun entsprechend aktualisiert und in dem

Zuge auch gleich von seinem Präfix befreit. Über den Bug-Tracker von Firefox

stößt Peter darauf, dass man sich eigene cursor mit Gradienten bauen kann.

[01:05:03] JPEG XL

Als erster Browser hat Safari nun standardmäßig auf den neusten

Apple-Betriebssystemen JPEG XL aktiviert (und AV1). Schepp findet es

bedauerlich, dass Chrome JPEG XL bis vor ein paar Monaten zumindest hinter Flags

eingebaut hatte, man dort aber aus fadenscheinigen Gründen entschied, es wieder

herauszuwerfen. Von Jason Grigsby gab es vor ein paar Monaten einen spannenden

Artikel dazu, wie JPEG XL mit seinen einzigartigen Eigenschaften das Dilemma mit

der Kombination von responsiven Bildern und Container Queries lösen könnte.

Etwas abgemildert wird das Problem dadurch dass zumindest lazy ladende Bilder

zukünftig mit einem sizes="auto" ausgerüstet werden können.

[01:21:55] „ADD TO DOCK“-FUNKTION AUF DESKTOP

Nun bietet auch der Desktop-Safari die Möglichkeit, WebApps wie normale Apps ins

Dock zu installieren. Schepp zweifelt allerdings an der Durchsetzungsfähigkeit

installierbarer WebApps sofern diese nicht aus einem AppStore kommen. Peter

hingegen weiß aus seinem Umfeld zu berichten, dass WebApps durchaus von

nicht-technischen Anwender*innen verstanden und genutzt werden. Durch seine

Reisetätigkeit ist Peter zudem ein großer Fan von WebApps. Schepp weist auf die

juristischen Auseinandersetzungen von Epic mit Apple und Google hinsichtlich des

Payment-Plattform-Zwangs hin, die es mit einer WebApp so nie geben würde.

[01:29:26] REGEXP: V-FLAG

Analog zum Wacken-V meint das v-Flag eigentlich ein u für *U*nicode-Support.

[01:34:50] ECMASCRIPT SET-OPERATIONEN

Endlich können wir zwei Sets miteinander vergleichen und zum Beispiel die

Überschneidungen oder auch die Unterschiede beider herausarbeiten, in Form von

Intersection, Union und Difference. Ein bisschen so wie Schepp das von

Vektorzeichenprogrammen und deren Shapes kennt. Peter hätte jetzt gerne noch die

derzeit im Entwurf befindlichen Records und Tuples, mit Hilfe derer er die

Möglichkeit erhält, zwei verschiedene Objekte auf Inhaltsgleichheit zu prüfen.

Schepp weiß zu berichten, dass es so etwas zumindest für den Vergleich zweier

DOM-Nodes gibt, in Form der Node.isEqualNode()-Methode. Wie diese bei dem

Vergleich vorgeht, erfährt man in der HTML-Spec. Schepps Idee, DOM-Nodes für

sein Vorhaben zweckzuentfremden bezeichnet er als „kriminell“