rol4nd-css.bsky.social
@rol4nd-css.bsky.social
Just published something new: a quick dive into the CSS light-dark() function 🌗
One line, two themes — it’s cleaner than my desk on a good day.
Have a look → rolandfranke.nl/frontend-sto...
Using the CSS light-dark() Function for Easy Theme Colors - Roland Franke
A simple introduction to the CSS light-dark() function and how it makes light and dark mode styling much easier.
rolandfranke.nl
November 20, 2025 at 1:48 PM
Reposted
A #sketchnotes for the talk "Multicol and fragmentation" by @rachelandrew.bsky.social‬ at the @cssday.nl #cssday
June 5, 2025 at 3:11 PM
Reposted
Multicol and fragmentation by @rachelandrew.bsky.social
June 5, 2025 at 3:09 PM
Reposted
All the demo's in one codepen collection

codepen.io/collection/J...
CSS Day 2025 - Ultimate Scroller - a Collection by Adam Argyle on CodePen
Slides: https://css-day-2025.argyleink.deno.net
codepen.io
June 5, 2025 at 9:23 AM
Reposted
Using Baseline and Chrome stickers to explain multicol at #cssday
June 5, 2025 at 12:30 PM
Reposted
Next up is @utilitybend.com to talk about customizable select.
June 5, 2025 at 12:51 PM
Reposted
G̶o̶o̶g̶l̶e̶r̶… ex-Googler.

nerdy.dev/ex-googler
G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025
My role at Google was eliminated.
nerdy.dev
April 11, 2025 at 6:05 PM
Reposted
#CSS only carousels arrive in Chrome 135

nerdy.dev/css-carousel...
March 20, 2025 at 4:40 PM
😍😍😍 so much stuff coming so quick these days
Let the stagger experiments begin
2019, I proposed an idea to help remove a ton of boilerplate code from CSS and HTML while also making stagger effects easier on authors. The proposal ended up being `sibling-index()` and `sibling-count()`. Fun news! **You can try it inCanary today** and I've got this little example to help kick off some ideas for you! Try on Codepen ## Staggering animation # Instead of inlining a CSS variable for each element: <div class="parent" style="--sibling-count: 5"> <div style="--sibling-index: 1"></div> <div style="--sibling-index: 2"></div> <div style="--sibling-index: 3"></div> <div style="--sibling-index: 4"></div> <div style="--sibling-index: 5"></div> </div> ` You can use `sibling-index()` to retrieve it just in time instead of doing the work in the template or JS. Clean that HTML up to make room for `sibling-index()` by removing all the inline styles: <div class="parent"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> ` and then drop in this new magic bomb: .parent > * { transition: opacity 0.3s ease; transition-delay: calc(sibling-index() * 100ms); } ` and now you have a `100ms` staggered crossfade transition effect 🤓 ## Staggering color # There's nothing stopping you from using `sibling-index()` to stagger a color change, or anything else! Here the hue increments by 50 each element. .parent > * { --hue: calc(sibling-index() * 50); color: oklch(70% 70% var(--hue)); } ` You could easily add a `min()` or `clamp()` or trig functions to help you too. ## Time to experiment # Share with me what you build! Fork this Codepen
nerdy.dev
March 12, 2025 at 12:48 PM
Reposted
An Emoji Naming Convention
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.
nerdy.dev
February 20, 2025 at 8:59 PM
Reposted
Happy Valentines Day ya’ll! ❤️ Traditionally, I always publish a new article about something I love. This year: an experimental feature that I’m really looking forward to. It’s about scroll–markers and the possibility create carousels with just CSS. I also added a cool no-js slick-slider. 🚀
Love at first slide! Creating a carousel purely out of CSS | utilitybend
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...
utilitybend.com
February 14, 2025 at 11:27 AM
Reposted
too lazy?
watch.
February 8, 2025 at 12:17 AM
Reposted
Focus By Demotion
a use case for #CSS `:hover > :not(:hover)`

nerdy.dev/hover-not-ho...
January 6, 2025 at 5:10 PM
@anatudor.bsky.social at the css next community group we’ve got this issue and I was hoping that you maybe have an idea of what could be causing this.

Thanks in advance.

github.com/CSS-Next/log...
Artifacts in Chrome · Issue #48 · CSS-Next/logo.css
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...
github.com
December 2, 2024 at 7:17 PM
Reposted
Donut scoping: Preventing the parent's styles from leaking inwards, courtesy of the @scope at-rule.

css-tricks.com/solved-by-cs...
Solved By CSS: Donuts Scopes | CSS-Tricks
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...
css-tricks.com
November 22, 2024 at 2:07 PM
Reposted
snippet.idx.dev now has the new (rebeccapurple) CSS icon, and coming soon to IDX proper too (the file icon theme) /cc @nerdy.dev
November 22, 2024 at 4:25 AM
Reposted
Thought a starter pack of CSS-Tricks authors would be a fun way to find folks.

go.bsky.app/SNVx5Wc
November 4, 2024 at 4:37 PM
After a long time I finally starting to try and write things done and created my own site with frontend stories. I hope to write more but here’s a start.

rolandfranke.nl/frontend-sto...
Mastering Layouts with CSS Grid - Roland Franke
Explore my CSS grid system that's kept layouts flexible and responsive for years, with named columns and custom constraints for consistent design.
rolandfranke.nl
November 7, 2024 at 5:35 PM
Reposted
🌠 For years, the #1 most requested feature in CSS was Container Queries. We wanted them so badly!

Well, they’ve arrived… and none of us are using them. 😂

I think I know why, and I just published a new blog post that will hopefully change that!

Check it out:
www.joshwcomeau.com/css/containe...
A Friendly Introduction to Container Queries • Josh W. Comeau
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...
www.joshwcomeau.com
November 4, 2024 at 4:36 PM
Reposted
after tons of iteration we're excited to share RC4 of the CSS logos, and we want the community to help us pick the final color:

https://github.com/CSS-Next/css-next/issues/105#issuecomment-2445341089

Vote by reacting to the comment!
October 29, 2024 at 9:17 PM