Post

💡 CSS Tip! Do you want to detect the overflow of an element? Does it have a scrollbar or not? It's possible with only CSS (No JavaScript!) You can even style any element on the page using this information 🤩 Code & demo 👉 css-tip.com/overflow-det... ⚠️ Chrome only for now ⚠️ #CSS

Bramus

@bram.us

10 Dec 2024

Yes, I did know – www.bram.us/2023/09/16/s... 😉 And soon you’ll be able to use scroll state queries for this: drafts.csswg.org/css-conditio... 🤩 Available in Chrome Canary behind a flag. @nerdy.dev has a bunch of demos built using it.

bram.usSolved by CSS Scroll-Driven Animations: Detect if an element can scroll or notLeverage Scroll-Driven Animations + a Space Toggle or State Query to selectively style an element based on it being scrollable or not.

CSS by T. Afif

@css-only.dev

10 Dec 2024

I was sure I have seen a similar article in your blog but I stopped searching when I reached "CSS wrapped 2023" 😅

CSS by T. Afif

@css-only.dev

"A downside of this approach is that is that you can only style child elements of the container". At least I am adding the case where you can style any element on the page which is a game changer 😄 (it was probably not possible one year ago)

10/12/24, 11:28 am0 reposts4 likes

Adam Argyle

@nerdy.dev

10 Dec 2024

Agree, came here to share the limits of the query vs the solution you're sharing, but you found it!

Bramus

@bram.us

10 Dec 2024

Yes, clever of you to hoist use `timeline-scope` to hoist up its reach – hadn’t thought of that!