rol4nd-css.bsky.social

rol4nd-css.bsky.social

@rol4nd-css.bsky.social

21 followers62 following22 posts

rol4nd-css.bsky.social
@rol4nd-css.bsky.social

Most CSS-only reading progress bars track the whole page. But what if I only care about the article? Turns out view-timeline + timeline-scope can do exactly that. No JS. Just CSS. 😏 And yes, the bar on the story is doing exactly that. rolandfranke.nl/frontend-sto...

rolandfranke.nlA CSS Reading Progress Bar That Tracks the Article - Roland FrankeBuild a CSS-only reading progress indicator that tracks the article itself, not the entire page, using view-timeline and timeline-scope.

rol4nd-css.bsky.social reposted

Josh Tumath
@joshtumath.uk

And finally PPK invites the speakers on stage. What another fantastic conference. Every talk on point. Incredible work by the audio team, caterers, volunteers and the audience!! Wonderful. And a shout out to @londonwebstandards.org State of the Browser.

rol4nd-css.bsky.social reposted

Bramus
@bram.us

YES, Dark Mode Toggles _should_ be a browser feature. I wrote about this before: brm.us/dark-mode-ov... Find the link to the Chrome Bug in the post, and hit the star next to it to "upvote" the bug. (I even have a prototype extension to provide this for you: brm.us/chrome-dark-...) #cssday

brm.usDark Mode Toggles Should be a Browser FeatureWhen implementing Dark Mode and ways to toggle it, developers currently need to duplicate code and roll their own toggle implementation. What if, instead, browsers would take care of all that?

rol4nd-css.bsky.social reposted

Brecht De Ruyte
@utilitybend.com

@bram.us with cranking up view transitions to 11. The program at #CSSday is on fire. Are we really already starting the last two talks of day 1? 😮 The view transitions API is a powerhouse... Easy to get, hard to master. Bramus helps us to get closer to the latter.

rol4nd-css.bsky.social
@rol4nd-css.bsky.social

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

rolandfranke.nlDrawing Connections with CSS Anchor Positioning - Roland FrankeA practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.
rol4nd-css.bsky.social
@rol4nd-css.bsky.social

😍😍😍 so much stuff coming so quick these days

Adam Argyle@nerdy.dev.web.brid.gy

nerdy.devLet the stagger experiments begin2019, 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

rol4nd-css.bsky.social reposted

Adam Argyle
@nerdy.dev.web.brid.gy
nerdy.devAn Emoji Naming ConventionThere 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.

rol4nd-css.bsky.social reposted

Brecht De Ruyte
@utilitybend.com

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

utilitybend.comLove at first slide! Creating a carousel purely out of CSS | utilitybendThis 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...
rol4nd-css.bsky.social
@rol4nd-css.bsky.social

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

github.comArtifacts in Chrome · Issue #48 · CSS-Next/logo.cssFirst 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...

rol4nd-css.bsky.social reposted

Josh W. Comeau
@joshwcomeau.com

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

joshwcomeau.comA Friendly Introduction to Container Queries • Josh W. ComeauIt’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...

You are up to date.