CSS Variable Secrets | Lea Verou | CSS Day 2022

By now most developers use CSS custom properties on the regular, but few understand them deeply enough to harness their full power. Lea will take you on a journey from the practical to the mind-blowing, and from the widely implemented to the cutting edge, demonstrating a host of tips, tricks, and gotchas relating to CSS variables in her trademark interactive style. You will leave this talk with both your CSS toolbox and your mind refreshed, and a much deeper understanding of CSS custom properties that you ever thought possible.
Slides: projects.verou...
About Rety (live coding, without the stress): lea.verou.me/2...
About Lea: lea.verou.me
Follow Lea: ‪@LeaVerou‬ or / leaverou
More about CSS Day: cssday.nl or / cssdayconf
Receive conference announcements in your inbox: cssday.nl/subs...

[@gbegerow]

I never seen a talk of lea without learning something new but this blows it out of the water.

[@beardcat]

same here! she is amazing :D

[@WellSaint001]

omg.. this presentation is just mindblowing! thanks lea!

[@adamuk73]

Shout out to everyone who came here via Kevin Powell

[@WebConferencesAmsterdam]

What did he do?! :)

[@adamuk73]

@@WebConferencesAmsterdam he posted a link to this talk on his weekly email.

[@WebConferencesAmsterdam]

Ah, brilliant! And we’ve got more talks coming up in the next few weeks, so make sure to subscribe if you liked this one.

[@yannicknana]

Mind blowingly informative, great talk !

[@LD-oq1co]

woah Lea is so impressive!! Amazing Talk

[@yashmmee]

Amazing stuff! Must watch for ui library maintainers

[@kamiln022]

love your t-shirt and ofc whole lecture

[@LucasGenzelis]

Wow, this was amazing! Thanks a lot Lea!

[@NoiseLeGGa]

my brain hurts - but thx - brilliant as always

[@josh_finnis]

I was following along the example and getting an error with the calc in the linear gradient: `calc(.3 var(--glossy, + .3))`. Turns out it was the sass preprocessor throwing the error, it works fine in css.

[@WebConferencesAmsterdam]

Go standards!

[@JaneOri]

34:55 👋👽

[@kishoreandra]

amazing 🙌

[@AlexanderBarakhov]

Very useful!

[@iftekharrousseau493]

Thank you!

[@jhacris7189]

Worked, thx

[@jesh182]

Is there a way to know if the browser supports the "container style queries" mentioned as the future of css?

[@WebConferencesAmsterdam]

Good question! Hopefully Miriam Suzanne will cover that in three weeks: cssday.nl/2023

[@bluntman2k6]

does anyone know the tool that she uses to record and playback the coding?

[@WebConferencesAmsterdam]

Rety; lea.verou.me/2022/07/rety/

[@GodOfMacro]

Fun stuff

[@joaomelo9774]

anyone knows which code playground she is using?

[@WebConferencesAmsterdam]

She coded this herself: twitter.com/LeaVerou/status/1532362352263299072 (not sure if it’s released already) Update: Lea released it: rety.verou.me/

[@mohamedlabarre166]

Hi everyone Can know how to become a member of this chain

[@WebConferencesAmsterdam]

Not via the iOS app, only via the website: www.youtube.com/@WebConferencesAmsterdam/join

[@peryMimon]

So how can I write "if 1 print 👍 if 2 print 👎" on some ":before {content}"

[@peryMimon]

trying those on my side project and it is not working @property --player-index { syntax: ''; inherits: true; initial-value: 0; } div:before { --player-index: 1; // condition properties from Lea Verou kzbin.info/www/bejne/kKa9mq2neatnp5o --is-player-1: calc(var(--player-index)); --is-not-player-1: calc(var(--player-index) - 1 ); counter-reset: calc( var(--is-player-1) * "👍" + var(--is-not-player-1) * "👎" ) player-icon; content: counter(player-icon); font-size: 2em; }

[@Georgije2]

I'm not at a computer right now, so this might not work at all, but based on this talk, I'd go with transform: scaleY(3 - (2 * var(--player-index))) and keep the content always equal to 👍. The idea being that it gets flipped upside down for player 2 :)

[@Georgije2]

I just checked it on my computer, and found that what I wrote above works, if i add a "calc" to the expression, and also display the ::before element as a block.

[@meaningmean]

brain hurts but thanks

[@haotianyang740]

what's this wizardry...

[@georgiiperepechko9321]

I absolutely love Lea, but it's horrifying to see how hacky implementing something in CSS instead of JS is... I'd probably request changes on any PR with this code at this point, hopefully with the spec changes we'll soon get something more readable.

[@WebConferencesAmsterdam]

Thanks for letting us know.