(@rol4nd-css) — KonKok

Drawing Connections with CSS Anchor Positioning - Roland Franke A practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.

CSS Anchor Positioning is one of those features that instantly changes how you think about layout. I built a small demo connecting comments and replies using nothing but anchor() — no JS, no extra markup.

🧵 Relationships, not coordinates.

rolandfranke.nl/frontend-sto...

26.01.2026 08:56 👍 20 🔁 7 💬 0 📌 0

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.

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...

20.11.2025 13:48 👍 2 🔁 0 💬 0 📌 0

A #sketchnotes for the talk "Multicol and fragmentation" by @rachelandrew.bsky.social‬ at the @cssday.nl #cssday

05.06.2025 15:11 👍 8 🔁 6 💬 1 📌 0

Multicol and fragmentation by @rachelandrew.bsky.social

05.06.2025 15:09 👍 6 🔁 2 💬 0 📌 1

CSS Day 2025 - Ultimate Scroller - a Collection by Adam Argyle on CodePen Slides: https://css-day-2025.argyleink.deno.net

All the demo's in one codepen collection

codepen.io/collection/J...

05.06.2025 09:23 👍 3 🔁 1 💬 2 📌 0

Thanks for sharing, to bad I could not be there in real life 😞

05.06.2025 12:57 👍 1 🔁 0 💬 0 📌 0

Several stickers lined up in columns on a wooden table.

Using Baseline and Chrome stickers to explain multicol at #cssday

05.06.2025 12:30 👍 25 🔁 2 💬 0 📌 0

Brecht on stage.

Next up is @utilitybend.com to talk about customizable select.

05.06.2025 12:51 👍 7 🔁 1 💬 1 📌 0

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025 My role at Google was eliminated.

G̶o̶o̶g̶l̶e̶r̶… ex-Googler.

nerdy.dev/ex-googler

11.04.2025 18:05 👍 1643 🔁 181 💬 493 📌 82

Oh man sorry to hear! I can imagine how you would feel at the moment. Take care man.

11.04.2025 18:30 👍 3 🔁 0 💬 0 📌 0

#CSS only carousels arrive in Chrome 135

⤷ nerdy.dev/css-carousel...

20.03.2025 16:40 👍 223 🔁 42 💬 13 📌 6

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

I just wrote a new post about the <search> element.

rolandfranke.nl/frontend-sto...

19.03.2025 12:54 👍 1 🔁 0 💬 0 📌 0

😍😍😍 so much stuff coming so quick these days

12.03.2025 12:48 👍 0 🔁 0 💬 0 📌 0

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.

20.02.2025 17:01 👍 1 🔁 1 💬 0 📌 0

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...

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. 🚀

14.02.2025 11:27 👍 24 🔁 7 💬 2 📌 1

too lazy?
watch.

08.02.2025 00:17 👍 255 🔁 33 💬 10 📌 0

Focus By Demotion
a use case for #CSS `:hover > :not(:hover)`

nerdy.dev/hover-not-ho...

06.01.2025 17:10 👍 248 🔁 32 💬 6 📌 6

Hmm personally not really a fan of the italic. But n the family html definitely should come with a new logo as well 😊

11.12.2024 18:56 👍 0 🔁 0 💬 0 📌 0

Thanks a lot for the help! 😊

03.12.2024 17:44 👍 0 🔁 0 💬 0 📌 0

Thanks for the quick response, at the moment we had only this one issue. But it’s a strange one.

02.12.2024 19:56 👍 0 🔁 0 💬 0 📌 0

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...

@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...

02.12.2024 19:17 👍 0 🔁 0 💬 1 📌 0

New CSS Logo - RC4 ...

Here you go,

codepen.io/argyleink/fu...

I think there is still an open issue to make it a full css only version

github.com/CSS-Next/log...

28.11.2024 21:02 👍 1 🔁 0 💬 0 📌 0

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...

Donut scoping: Preventing the parent's styles from leaking inwards, courtesy of the @scope at-rule.

css-tricks.com/solved-by-cs...

22.11.2024 14:07 👍 39 🔁 5 💬 0 📌 1

snippet.idx.dev now has the new (rebeccapurple) CSS icon, and coming soon to IDX proper too (the file icon theme) /cc @nerdy.dev

22.11.2024 04:25 👍 28 🔁 3 💬 1 📌 0

🙃

22.11.2024 10:54 👍 0 🔁 0 💬 0 📌 0

Why <details> is Not an Accordion I learned something this week and I thought I would share it. Earlier this year I read Adrian Roselli’s post “Details/Summary are not [insert control here]”. In this post Adrian says <details> is not ...

With these change is this post still valid?

daverupert.com/2019/12/why-...

20.11.2024 18:46 👍 3 🔁 0 💬 1 📌 0

To be honest the reason I also stay at X is because I don’t see stupid post like these that are hating on each other. Please stop it!!

“united we stand divided we fall”

20.11.2024 07:14 👍 0 🔁 0 💬 1 📌 0

CSS Unveils Its New Logo - Roland Franke Rebeccapurple becomes the official CSS logo color! Explore the new repo for formats and future variants, including CSS4, CSS5, and beyond. 💜

CSS Unveils Its New Logo 💜

rolandfranke.nl/frontend-sto...

17.11.2024 20:47 👍 0 🔁 0 💬 0 📌 0

Thought a starter pack of CSS-Tricks authors would be a fun way to find folks.

go.bsky.app/SNVx5Wc

04.11.2024 16:37 👍 88 🔁 29 💬 16 📌 2

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.

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...

07.11.2024 17:35 👍 0 🔁 0 💬 0 📌 0

Latest posts by @rol4nd-css