A simple introduction to the CSS light-dark() function and how it makes light and dark mode styling much easier.

Slides: https://css-day-2025.argyleink.deno.net

My role at Google was eliminated.

Discover the new <search> element in HTML, how it improves semantics and accessibility, and where to use it in your projects.

There are many new places in CSS for naming. You can now quickly find yourself using the same name, which is unique, but it's unique in a context… and that's really hard to remember. Here's a simple example: @keyframes foo {} @property --foo {} .element { --foo: bar; animation: foo linear both; view-timeline-name: --foo; view-transition-name: foo; anchor-name: --foo; container-name: foo; } ` Notice too how there's dashed names and undashed… some CSS features require the dashed names while others do not. Yay. Good news is that CSS can keep track of it all. Bad news, I'm strugglin. ## Not an answer, but an answer? # I'm not actually trying to tackle this problem with this suggestion, but… maybe I am? LOL We could, **use emoji to help delineate the intended use**. Here, keyframes, typed custom properties and font-palette-values are uniquely identified with **an emoji prefix**. @keyframes 🔑-example {} @property --﹫-example {} @font-palette-values --🔡-example {} ` This then makes it clear when you got to use them: .element { --﹫-example: bar; animation: 🔑-example linear both; } ` So building on this, I went a little further… and have assigned emoji's for anything you can custom name: @keyframes 🔑-example {} @property --﹫-example {} @font-palette-values --🔡-example {} :root { --﹫-example-typed: baz; --🔒-example-private: foo; --regular-var: bar; } ::view-transition-group(.🏘️-example) {} ::view-transition-new(🏞️-example) {} @layer 🥞-example { .🤓-example-class { container-name: 📦-example; view-transition-name: 🏞️-example; view-transition-class: 🏘️-example; view-timeline-name: --📽️-example; anchor-name: --⚓-example; font-palette: --🔡-example; animation: 🔑-example 1s; > p { @container 📦-example (inline-size < 20ch) { font-size: var(--﹫-example); } } } } @layer 🥞-example-utilities { .🔧-utility-class, .🧹-reset-class, .🔍-debug-class { … } .🗣️-sr-only {} .🍱-grid {} } ` **Does this work?!** Yep, perfectly valid CSS. Try it on Codepen. **Did I miss an opportunity to pick an emoji prefix?** Probably! Comment on Bluesky or Mastodon and I'll add them! As a final mention here, I think it's a good idea to `--` all your custom names, just to make it really clear they aren't internal CSS keywords.

This Valentine's Day, fall in love with a new way to build carousels: pure CSS! Discover the power of CSS scroll-markers to create fully functional sliders without dependencies. Lets take a first loo...

First off, I want to say thanks to all involved! 🙏 Love this initiative and the logo 💜 This could just be me but when viewing the logo with Chrome on an external monitor I am seeing some visual art...

Donut scoping addresses the challenge of preventing parent styles from leaking to nested content. Originating from a 2011 concept by Nicole Sullivan, the issue has evolved, culminating in 2024's @scop...

Rebeccapurple becomes the official CSS logo color! Explore the new repo for formats and future variants, including CSS4, CSS5, and beyond. 💜

Explore my CSS grid system that's kept layouts flexible and responsive for years, with named columns and custom constraints for consistent design.

It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them? It turns out that container queries are kinda tricky; they’re not as straightforward as...