BROADCASTS.com

Published: Dec. 12, 2023, 6:55 a.m.

Diverse Release-Ank\xfcndigungen des Apple-Teams stellten f\xfcr Peter und Schepp den\nAnlass, zu schauen, was sich bei Team WebKit so tut. Und das ist eine ganze\nMenge! Deshalb haben wir es auch nicht in eine Revision quetschen k\xf6nnen,\nsondern sie ben\xf6tigten derer zwei. Wir st\xfctzen uns dabei auf die Release-Notes\nvon Safari 17 und 17.2 Beta sowie den Safari Technology Previews 178, 180 und\n181.\n\n\nSCHAUNOTIZEN\n\n[00:01:49] DIE COOKIE STORE API\n\nDie Cookie Store API erh\xe4lt nun auch in Safari Einzug und verbessert die\nDeveloper Experience in einem lange vernachl\xe4ssigten Bereich: Dem Umgang mit\nCookies. Zuvor gab es ja nur document.cookie f\xfcr den Zugriff auf selbige, wobei\ndas Setzen von Cookies dar\xfcber noch gerade so okay war, aber beim Auslesen alle\nCookies zusammen in einem gro\xdfen zusammengemantschten String herauskamen, den\nman im Anschluss selber parsen musste. Fehlt nun noch Firefox, auf dass alle\nBrowser die neue API unterst\xfctzen. Peter verweist auf einen Edgecase, bei dem\nChrome in der alten \u201eAPI\u201c document.cookie jegliche Daten, die nicht\nUTF-8-formatiert sind stillschweigend fallen l\xe4sst. Hier herrscht(e) wohl beim\nneuen Standard noch Unklarheit, ob man Dinge hier ebenso handhaben m\xf6chte, oder\nnicht. Peter kommt in dme Zuge auf das Intl.Segmenter-Objekt zu sprechen, das\nf\xfcr das Arbeiten mit erweiterten Zeichens\xe4tzen und auch Emojis gedacht ist, aber\nleider nicht vom Firefox unterst\xfctzt wird.\n\n[00:10:24] DAS -ELEMENT\n\nDas neue -Element dient wie damals das -Element als syntaktischer\nZucker, um eine passende Landmark/ARIA-Role implizit ins Element einzubacken.\nDass das sinnvoll ist, belegt eindrucksvoll der Web Almanac 2022, der zeigt,\ndass passende Elemente viel \xf6fter genutzt werden als die dazugeh\xf6rigen\nrole-Attribute.\n\n[00:25:00] POPOVER API\n\nHinsichtlich der nun auch in Safari eingebauten Popover API verweisen wir auf\ndie Revision 585.\n\n[00:26:30]

---

S IN S\n\nF\xfcr eine \xfcbersichtlichere Strukturierung von s erlauben es Safari und\nChrome nun,

---

s unter die \u2013 und -Elemente zu mischen. Peter\nund Schepp testen in dem Zuge, was Browser mit unzul\xe4ssigen HTML-Elementen in\ns machen.\n\n[00:33:48] FONT-SIZE-ADJUST: FROM-FONT\n\nAnders als von Schepp vermutet, dient dieser Wert dazu, ein Verrutschen von\nInhalt zu verhindern, wenn eine Schrift aus dem Font-Stack nicht geladen werden\nkann und dann eine Fallback-Schrift mit ganz anderen Metriken genutzt wird. Mit\ncode>font-size-adjust: from-font werden diese Werte aus der ersten verf\xfcgbaren\nSchrift abgeleitet.\n\n[00:37:46] HYPHENATE-CHARACTER\n\nAb jetzt k\xf6nnt Ihr angeben, mit Hilfe welchen Zeichens Worttrennungen\nstattfinden m\xf6gen. Da uns der Usecase nicht so ganz klar ist, forschen wir live\nein wenig dazu und lernen, dass es das Canadian Syllabics gibt, das wie ein\nGleichzeichen aussieht.\n\n[00:40:20] @COUNTER-STYLE\n\nMit der @counter-style-Rule l\xe4sst sich eine Art visuelles Template f\xfcr\nAufz\xe4hlungen anlegen, das man anschlie\xdfend per list-style-Angabe referenzieren\nkann. Dar\xfcber kommen wir auch auf die \xe4hnlich hei\xdfenden CSS Counter zu sprechen,\nmit denen man in CSS hochz\xe4hlen und die aktuelle Zahl jeweils ausgeben kann. Wir\nkommen darauf zu sprechen, dass man CSS Counters und deren\ncounter-reset-Eigenschaft zusammen mit content als eine Art Steigb\xfcgelhalter zur\nAusgabe von numerischen Custom Properties verwenden kann. Au\xdferdem erz\xe4hlt\nSchepp von seinem irritierenden Erlebnis bei der Kombination von CSS Countern\nund contain: style \u2013 jedoch alles Spec-konform! Oder dass es (noch) keine gute\nIdee ist, ein contain: size oder contain: strict mit aspect-ratio zu\nkombinieren. Stattdessen nutzt Schepp nun lieber geinlinedte SVG-Platzhalter als\neine Art Spacer-GIF 2.0.\n\n[00:46:10] DISPLAY: CONTENTS\n\nWir freuen uns dar\xfcber, dass mit Safari alle (und bekannten) verbliebenen\nAccessibility-Probleme von display: contents behoben sind! Peter findet, dass\ndieses Feature gut zeigt, wie irgendwas konzeptionell super einfach sein kann,\naber in der Implementierung dann das genaue Gegenteil ist. Ein Beispiel ist, was\npassiert, wenn man display: contents auf ein sogenanntes \u201eReplaced Element\u201c,\nalso ein Bild oder ein Select anwendet. Die CSS Spezifikation hat deshalb\neigenen Block mit Sonderregeln f\xfcr alle m\xf6glichen Elemente, die dort als\n\u201eUnusual Elements\u201c gef\xfchrt werden.\n\n[00:51:07] DAS SCRIPTING CSS MEDIA FEATURE\n\nNun lassen sich auch Media Queries und media-Attribute f\xfcr den Fall verdrahten,\ndass ein Endger\xe4t keine Scripte versteht oder ausf\xfchren kann, via scripting:\nnone. Neben scripting: enabled g\xe4be es dar\xfcberhinaus laut Spec noch die Variante\nscripting: initial-only, f\xfcr den Fall dass ein Client nur zu Beginn einmal\nScripte ausf\xfchrt und dann nicht mehr. Allerdings ist diese Definition reichlich\nunscharf und wird daher noch von keinem Browser unterst\xfctzt.\n\n[01:02:55] IMAGE-SET() AKTUALISIERT UND PR\xc4FIX-FREI\n\nDie gepr\xe4fixte CSS -webkit-image-set()-Funktion schlummert in WebKit (und auch\nChrome) seit mit dem iPhone 4 Retina-Bildschirme das Licht der Welt erblickt\nhaben. Diese ehemals Apple-eigene Erfindung wurde derweil in den CSS-Standard\n\xfcberf\xfchrt und dabei um einige weitere F\xe4higkeiten wie File-Format-Angaben\nerweitert. Safaris Implementation wurde nun entsprechend aktualisiert und in dem\nZuge auch gleich von seinem Pr\xe4fix befreit. \xdcber den Bug-Tracker von Firefox\nst\xf6\xdft Peter darauf, dass man sich eigene cursor mit Gradienten bauen kann.\n\n[01:05:03] JPEG XL\n\nAls erster Browser hat Safari nun standardm\xe4\xdfig auf den neusten\nApple-Betriebssystemen JPEG XL aktiviert (und AV1). Schepp findet es\nbedauerlich, dass Chrome JPEG XL bis vor ein paar Monaten zumindest hinter Flags\neingebaut hatte, man dort aber aus fadenscheinigen Gr\xfcnden entschied, es wieder\nherauszuwerfen. Von Jason Grigsby gab es vor ein paar Monaten einen spannenden\nArtikel dazu, wie JPEG XL mit seinen einzigartigen Eigenschaften das Dilemma mit\nder Kombination von responsiven Bildern und Container Queries l\xf6sen k\xf6nnte.\nEtwas abgemildert wird das Problem dadurch dass zumindest lazy ladende Bilder\nzuk\xfcnftig mit einem sizes="auto" ausger\xfcstet werden k\xf6nnen.\n\n[01:21:55] \u201eADD TO DOCK\u201c-FUNKTION AUF DESKTOP\n\nNun bietet auch der Desktop-Safari die M\xf6glichkeit, WebApps wie normale Apps ins\nDock zu installieren. Schepp zweifelt allerdings an der Durchsetzungsf\xe4higkeit\ninstallierbarer WebApps sofern diese nicht aus einem AppStore kommen. Peter\nhingegen wei\xdf aus seinem Umfeld zu berichten, dass WebApps durchaus von\nnicht-technischen Anwender*innen verstanden und genutzt werden. Durch seine\nReiset\xe4tigkeit ist Peter zudem ein gro\xdfer Fan von WebApps. Schepp weist auf die\njuristischen Auseinandersetzungen von Epic mit Apple und Google hinsichtlich des\nPayment-Plattform-Zwangs hin, die es mit einer WebApp so nie geben w\xfcrde.\n\n[01:29:26] REGEXP: V-FLAG\n\nAnalog zum Wacken-V meint das v-Flag eigentlich ein u f\xfcr *U*nicode-Support.\n\n[01:34:50] ECMASCRIPT SET-OPERATIONEN\n\nEndlich k\xf6nnen wir zwei Sets miteinander vergleichen und zum Beispiel die\n\xdcberschneidungen oder auch die Unterschiede beider herausarbeiten, in Form von\nIntersection, Union und Difference. Ein bisschen so wie Schepp das von\nVektorzeichenprogrammen und deren Shapes kennt. Peter h\xe4tte jetzt gerne noch die\nderzeit im Entwurf befindlichen Records und Tuples, mit Hilfe derer er die\nM\xf6glichkeit erh\xe4lt, zwei verschiedene Objekte auf Inhaltsgleichheit zu pr\xfcfen.\nSchepp wei\xdf zu berichten, dass es so etwas zumindest f\xfcr den Vergleich zweier\nDOM-Nodes gibt, in Form der Node.isEqualNode()-Methode. Wie diese bei dem\nVergleich vorgeht, erf\xe4hrt man in der HTML-Spec. Schepps Idee, DOM-Nodes f\xfcr\nsein Vorhaben zweckzuentfremden bezeichnet er als \u201ekriminell\u201c \U0001f603\n\n[01:41:35] IOS-SIMULATORENIN DEN SAFARI DEVTOOLS\n\nSafari bietet nun ganz neu die M\xf6glichkeit, eine Webseite aus den Devtools\nheraus in einem echten iOS-Simulator zu testen. Allerdings muss man daf\xfcr einen\nsolchen Arsch voll Zusatzsoftware wie z.B. Xcode installieren, dass daf\xfcr die\nSSD von Schepps Mac Mini nicht mehr ausreicht. Und so endet diese Revision denn\nauch damit, dass Peter und Schepp noch eine Weile \xfcber Software, Betriebssysteme\nund Hardware diskutieren.\n\n\nANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT\n\nHIER GEHT\u2019S ZUR ANMELDUNG AUF MEETUP\n\nFeiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem\neinzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der\neinige Teilnehmer im \u2018inneren Kreis\u2019 diskutieren, w\xe4hrend andere im \u2018\xe4u\xdferen\nKreis\u2019 zuh\xf6ren und dann einsteigen k\xf6nnen. Es ist eine interaktive und\ndynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung\neinzutauchen. Wir freuen uns auf euch!