Post

CSS by T. Afif
@css-only.dev

💡 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

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.

0 reposts11 likes

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)

Bramus
@bram.us

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