Neue CSS-Features in Chromium – oder auch nicht

[Gunnar Bittersmann]

Lea Verou muss das Pipi in den Augen stehen. Jahre (eher Jahrzehnte), nachdem sie das angeregt hatte, können Chromium-Browser ab jetzt (139) runde Ecken auch anders. ☞ Like a rounded corner-shape.

corner-shape [Spec] ist so „neu“, dass es noch nicht in MDN steht? 🤔

---

Ich hab mal in die Release-Notes geschaut (wer weiß, was man alles in der CSSBattle gebrauchen kann? 🤓), und da stand mir auch das Pipi in den Augen: font-feature-settings in @font-face. Das heißt, man kann bspw. Versalziffern als Default wählen.

Das heißt, man könnte. In meinem Test funktioniert das in Chromia nicht. In Firefox und Safari geht’s – zumindest für font-feature-settings; für font-variant-* noch nicht. (Sollte es aber irgendwann. [Spec])

Haben die was in die Release-Notes geschrieben, was sie noch gar nicht mit im Release drinhaben, oder übersehe ich was?

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

corner-shape [Spec]

Was ich noch nicht kannte (und ich weiß nicht, ob Lea das in ihrem ursprünglichen Entwurf drin hatte): superellipse().

Siehe Understanding CSS corner-shape and the Power of the Superellipse

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

vielleicht nicht die neueste Subversion? Ich habe die 139.0.7258.67 und damit sind die Ecken konkav.

Die .66 hatte ich heute morgen noch, damit habe ich es nicht versucht.

Nettes Feature, aber ob ich deshalb visuell inkontinent werden muss… 😉

Caniuse kennt es übrigens schon und holt sich die Info dazu von MDN 🤣:
https://caniuse.com/mdn-css_properties_corner-shape

Rolf

[Gunnar Bittersmann]

@@Rolf B

vielleicht nicht die neueste Subversion? Ich habe die 139.0.7258.67 und damit sind die Ecken konkav.

??

Mein „funktioniert in Chromia nicht“ bezieht sich auf den Teil von der Trennlinie, in dem es steht. Also nicht auf die Ecken, sondern auf font-feature-settings in @font-face.

Auf meiner Testseite werden in Chromia bei allen drei Malen „SPECIES 8472“ Mediävalziffern gesetzt (Default bei der verwendeten Schriftart Raleway). Das sieht man doch, dass das scheußlich aussieht:

In Firefox und Safari werden zumindest beim mittleren mit font-feature-settings: "lnum" 1 in der @font-face-Regel Versalziffern gesetzt – so wie es sein soll:

Beim letzten Mal mit font-variant-numeric: lining-nums in der @font-face-Regel sollte das auch so sein; ist aber wohl noch nicht implementiert.

🖖 Live long and prosper

Nachtrag: Ich hab auf meiner Testseite die Unterschriften jetzt etwas aussagekräftiger gemacht.

[Rolf B]

Hallo Gunnar,

autsch. Sorry, nicht genau gelesen.

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

In Firefox und Safari werden zumindest beim mittleren mit font-feature-settings: "lnum" 1 in der @font-face-Regel Versalziffern gesetzt – so wie es sein soll:

Hab mal eben den Kanarienvogel wieder installiert. Im Chromium 141 sieht’s gut aus, zumindest mit font-feature-settings: "lnum" 1.

Beim letzten Mal mit font-variant-numeric: lining-nums in der @font-face-Regel sollte das auch so sein; ist aber wohl noch nicht implementiert.

Im Chromium 141 auch noch nicht.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Auf meiner Testseite werden in Chromia bei allen drei Malen „SPECIES 8472“ Mediävalziffern gesetzt (Default bei der verwendeten Schriftart Raleway).

Raleway ist auch die verwendete Schriftart in Vorspann und Abspann von Star Trek: Discovery. Und da alles^[1] in Versalien geschrieben ist, müssen da auch Versalziffern verwendet werden. Was denen nicht immer gelungen ist.

Im Abspann von Folge 1.7 Magic to Make the Sanest Man Go Mad (deutscher Titel: T=Mudd²) bspw. steht geschrieben: DECK CREW #₁ und DECK CREW #₂.^[2]

Einen Wimpernschlag später dann: COMM OFFICER 2 und JOGGER #1 mit den richtigen Versalziffern.

Einige Ersteller der Abspanne hatten die OpenType-Features des Fonts nicht im Griff.

🖖 Live long and prosper

---

1. außer bei BLU del BARRIO ↩︎

2. Ich hab hier mal tiefgestellte Ziffern verwendet, um das zu verdeutlichen. Dort sind es Mediävalziffern. ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Raleway ist auch die verwendete Schriftart in Vorspann und Abspann von Star Trek: Discovery.

Nachgebaut mit animation: Star Trek: Discovery opening titles

Mind the cap: line-height: 1cap

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Lea Verou muss das Pipi in den Augen stehen. Jahre (eher Jahrzehnte), nachdem sie das angeregt hatte

Ich erinnere mich an ihren Talk „The Humble Border Radius“ auf der Front-Trends 2013 in Warschau. Ab 25:40 spricht sie über ihren Vorschlag border-corner-shape – später umbenannt in corner-shape, was auch Sinn macht, denn die Ecken haben ja nichts mit dem Rahmen zu tun. border-radius hätte auch nicht so heißen sollen.

Hm, ihr Talk auf der Front-Trends 2013 ist noch auf YouTube, meiner nicht‽‽ Seht schade; das war ein Spaß. Passend zum Thema hatte ich auf Polnisch begonnen (was die Hälfte des Publikums nicht verstanden hat), nach einer Minute oder zweien dann auf Englisch gewechselt und dasselbe nochmal erzählt.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

font-feature-settings in @font-face. Das heißt, man kann bspw. Versalziffern als Default wählen.

Das heißt, man könnte. In meinem Test funktioniert das in Chromia nicht. In Firefox und Safari geht’s – zumindest für font-feature-settings; für font-variant-* noch nicht. (Sollte es aber irgendwann. [Spec])

Haben die was in die Release-Notes geschrieben, was sie noch gar nicht mit im Release drinhaben, oder übersehe ich was?

Sieht so aus.

In Chrome 140 geht’s dann (mit font-feature-settings; mit font-variant-* noch nicht).

🖖 Live long and prosper