Begrüßung – [00:00:53]
Retro
- Constantin: WWSIV-Geburtstagsglitzer – [00:04:03]
- Moritz: WWSIV ist immer und überall – [00:06:48]
Tagesthema: Noch mehr unbekannte CSS-Eigenschaften – [00:12:47]
- Break rules in pages, regions und multicolumn – [00:14:48]
- Container Queries – [00:21:06]
- MDN / caniuse
- <custom-ident>
- CodePen: Demo-Collection / Demo 1 / Demo 2 (nur in Chromium-Browsern mit gesetztem Flag!)
- Folge 11: Jäger der verlorenen CSS-Features – Kapitel II
- Folge 17: TIL: TTL (Tagged Template Literals)
- mix-blend-mode – [00:31:14]
- color-gamut – [00:36:37]
- perspective – [00:39:32]
- Intrinsic Sizing: min-content, max-content, fit-content – [00:46:35]
- color() – [00:51:22]
- @scroll-timeline – [00:56:55]
- caniuse
- Folge 11: Jäger der verlorenen CSS-Features – Kapitel II
- GSAP mit ScrollTrigger plugin
- Use-cases bei CSS-Tricks
- The Future of CSS: Scroll-Linked Animations with
@scroll-timeline: Part 1 / Part 2 - CodePen-Demo (nur mit experimental web platform features flag)
- color-scheme – [01:02:05]
- Assembler CSS, Ant Design – [01:06:16]
- Houdini @property – [01:21:54]
- CSS Masks, CSS Shapes (Folgen 11 und 21) – [01:24:24]
GeilTeil – [01:26:00]
Verabschiedung – [01:36:24]
Kommentare
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.
Moritzkommentierte
am
Danke für die Insights!
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)
Constantinkommentierte
am
Und das passiert ausgerechnet mir, der sich selbst oft an falscher Aussprache stört und sowohl Englisch- als auch Spanischkenntnisse vorzuweisen hat! 😂
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 😉
Constantinkommentierte
am
Danke für den guten Input! 🙂