+++LIVE+++ #WWSIV heute gegen 20:00 Uhr LIVE auf Twitch! +++LIVE+++

10 merkwürdig unbekannte CSS-Eigenschaften (und zwei Frameworks)

Folge №32 · Veröffentlicht am: · Spielzeit: 100 Minuten

Es war wieder „State of CSS“-Time! Kennst du schon „break-before“, „mix-blend-mode“, „@scroll-timeline“ und weißt wie Container Queries funktionieren? Wie steht’s mit „color-gamut“, „perspective“ oder Intrinsic Sizing mit z.B. „fit-content“? In dieser Folge besprechen wir wieder die Eigenschaften, die uns aus der Umfrage noch unbekannt waren, unseren Geburtstagsstream und rätseln über die Zukunft der Entwicklung mit GitHub Copilot. Wer die „17 CSS-Eigenschaften, die wir noch nicht kannten“ mochte, wird diese Folge LIEBEN! ❤️

Shownotes

Begrüßung – [00:00:53]

Retro

  • Constantin: WWSIV-Geburtstagsglitzer – [00:04:03]
    • „Geburtstagsstream! 2 Jahre #WWSIV!“ auf YouTube: Teil 1, Teil 2
  • Moritz: WWSIV ist immer und überall – [00:06:48]

Tagesthema: Noch mehr unbekannte CSS-Eigenschaften – [00:12:47]

  1. Break rules in pages, regions und multicolumn – [00:14:48]
  2. Container Queries – [00:21:06]
  3. mix-blend-mode – [00:31:14]
  4. color-gamut – [00:36:37]
  5. perspective – [00:39:32]
  6. Intrinsic Sizing: min-content, max-content, fit-content – [00:46:35]
  7. color() – [00:51:22]
  8. @scroll-timeline – [00:56:55]
  9. color-scheme – [01:02:05]
  10. Assembler CSS, Ant Design – [01:06:16]
  11. Houdini @property – [01:21:54]
  12. CSS Masks, CSS Shapes (Folgen 11 und 21) – [01:24:24]

GeilTeil – [01:26:00]

Verabschiedung – [01:36:24]

Kommentare

Name

Donnerknallikommentierte

am

Zum Thema AntD:
Ich verwende das aktuell in einem Web Projekt und es bietet ziemlich viel an Umfang, allerdings muss ich sagen das ein paar Sachen etwas komisch gelöst sind und man sehr viel rumprobieren muss bis man eine Lösung hat. Was auch nachteilig ist, dass auf Github viele Issues in Chinesisch geschrieben werden.

Zum Thema Github Copilot:
Ich hab den Zugang schon seit längerem (k.A. ca. 2 Monate oder so) und muss sagen ich bin sehr begeistert. Ich kann es derzeit leider nur für private Hobbyprojekte nutzen, aber da hab ich es mit den Sprachen: JavaScript, TypeScript, CSS, C++, Python ausprobiert und es funktioniert wirklich super.

Name

Moritzkommentierte

am

Danke für die Insights!

Name

Lars Pourlardkommentierte

am

Das Singvögelchen „canary“ wird wie auf deutsch und spanisch (Hola, Sr Grande!) auf der zweiten Silbe betont – hat nichts mit der Cannery Row zu tun. Wäre natürlich klarer, wenn Google sich für „stool pigeon“ entschieden hätte (maybe for a credit card and a Thunderbird, s. https://songmeanings.com/songs/view/3530822107858683993/), wobei dann natürlich ein bisschen das Chromatische fehlen würde (s. https://www.freethesaurus.com/canary)

Name

Constantinkommentierte

am

Und das passiert ausgerechnet mir, der sich selbst oft an falscher Aussprache stört und sowohl Englisch- als auch Spanischkenntnisse vorzuweisen hat! 😂

Name

Harrykommentierte

am

Ich halte die @property-Rule aus dem Houdini-Universum für das derzeit praktischste Feature, denn was die im Prinzip macht, ist CSS Custom Properties zu typisieren. Zuvor waren Custom Properties ja nur dumme Strings, was man sich wahlweise für solche Späße zu nutze machen kann: https://adamwathan.me/composing-the-uncomposable-with-css-variables/
…oder es nervt einen kolossal, nämlich weil der Browser Custom Properties genau so wenig animieren/transitionieren kann, wie andere Strings (z.B. in der content-Property).
Hier setzt @property an und informiert den Browser darüber, dass eine Custom-Property von nun an als z.B. ein Farbwert zu betrachten sei, und von dem Zeitpunkt an, weiß der Browser, wie er zwischen zwei (Farb-)Zuständen dieser Property weich hin und her wechseln kann. Ziemlich cool!
Insofern finde ich es schade, dass @property, wie auch sein JavaScript-Pendant `window.CSS.registerProperty()` mit ihrer „CSS Properties and Values API Level 1“-Spec unter dem Dach von Houdini gelandet sind, welches wiederum die Mozilla- und WebKit-Menschen nicht umzusetzen zu gedenken (übrigens wohl auch mit Recht: https://iamvdo.me/en/blog/css-houdini).

Tolle Folge, vielen Dank dafür!

Euer Harry 😉

Name

Constantinkommentierte

am

Danke für den guten Input! 🙂

Kommentiere!
Folgendes HTML erlaubt
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

Die E-Mail-Adresse wird nicht öffentlich angezeigt.

Wir sind im Moment live auf Twitch!