Revision 670: Neuerungen in WebKit

In dieser Folge widmen wir uns erneut ganz WebKit – und dem, was sich dort aktuell alles tut und in den letzten Monaten getan hat. Schepp und Peter diskutieren neue Features, (alte) Probleme sowie APIs, die bereits in Safari gelandet sind oder bald landen werden.

Schaunotizen

[00:01:09] Google I/O 2025 & CSS-only Carousels Zum Einstieg beklagen wir wie themenarm die Google I/O dieses Jahr für uns Frontend-Menschen war. Das einzig wirklich spannende Ding waren die Vorstellung der CSS-Primitiven für den Bau von Karussells. Allerdings steckt in dem Thema noch sehr viel Arbeit an der Barrierefreiheitsfront, wie Sara Soueidan dargelegt hat. Der Rest bestand aus eilig herbei-geprototypeten Demos. [00:19:34] Multipage View Transitions Mit nur zwei Zeilen Code aus dem WebKit-Blogpost lassen sich flüssige Seitenübergänge realisieren. Wir berichten von unseren eigenen Versuchen mit View Transitions und verweisen auf die Library ramjet, die ähnliche Effekte wie die View Transitions schon seit zehn Jahren ermöglicht. [00:25:46] (Root) Line-Height Units: lh/rlh WebKit führt neue Einheiten für die Zeilenhöhe ein, die konsistentere Text-Layouts erlauben. Wir schweifen an dieser Stelle kurz ab und sprechen darüber, wie das CSS Typed OM funktioniert. [00:29:24] margin-trim Mit margin-trim lassen sich über den Rand ragende Margins von Kind-Elementen abschneiden, was bestimmte Layouts gegenüber der :first-child/:last-child-Technik deutlich robuster umsetzbar werden lässt. [00:33:52] text-wrap: pretty Das neue Umbruch-Verhalten text-wrap: pretty sorgt für elegantere Zeilenumbrüche und optimierte Worttrennung. Die WebKit-Menschen haben es aber nicht dabei belassen, mit Chrome nachzuziehen, sondern haben noch kräftig „Gold-Plating“ betrieben ‐ mit sehenswertem Ergebnis! Wem das nicht reicht, der kann in Zukunft vielleicht auf Machine-Learning zurückgreifen, um Text nach seinen Vorstellungen zu formatieren, wie es jemand in diesem Video namens „Badness 0“ demonstriert. [00:35:20] WebKit-Bug bei Ligaturen So stark WebKit allerdings bei Typografie sonst ist, bei einer Sache verkackt er hart: Bei der Berechnung der Laufweite von Ligaturen. Ligaturen sind eine fantastische Sache und ermöglichen es, Fonts regelrecht zu programmieren. Schrift-Entwicklerin Ulrike Rausch bildet hier die Speerspitze mit ihren „Liebe“-Fonts und dem Font „Liebe Heide“ im Speziellen. Ein wenig in das Thema eingetaucht ist Schepp neulich auch, als er mit Hilfe eines SVG und OpenType.js (master Branch) eine Ligatur in eine Schrift eingebaut hat, welche alle Vorkommen eines bestimmten Wortes im Text-Rendering automatisch durch die SVG-Grafik ersetzt. Diese Grafik läuft allerdings weiter als der damit ersetzte Text. Chrome und Firefox bemerken da