679 results
tagged
css
✕
clamp - Le responsive fluide sans Media Queries
An Interactive Guide to CSS Container Queries
Learn how to use CSS container queries today.
Learn how to use CSS container queries today.
26 Seamless CSS Page Transitions
Locking scroll with :has().
It's finally happened – with the release of Firefox 121.0 :has() has landed in all browsers (though writing ":has() has" is sadly no less awkward). In celebration, I thought it a good time to share one of my favourite practical uses of :has() so far – scroll locks.
Imagine that you need to open a modal window, or flyout menu. To prevent from losing the user's place in the page whilst that modal is open – particularly on mobile devices – it's good practice to prevent the page behind it from scrolling. That's a scroll lock.
Let's take a look at how we might implement one.
It's finally happened – with the release of Firefox 121.0 :has() has landed in all browsers (though writing ":has() has" is sadly no less awkward). In celebration, I thought it a good time to share one of my favourite practical uses of :has() so far – scroll locks.
Imagine that you need to open a modal window, or flyout menu. To prevent from losing the user's place in the page whilst that modal is open – particularly on mobile devices – it's good practice to prevent the page behind it from scrolling. That's a scroll lock.
Let's take a look at how we might implement one.
Quantity Queries are Very Easy with CSS :has()
DECEMBER 11, 2023
What is a quantity query? It’s a bit of CSS that allows you to style an element (and its descendants) based on how many children the element has.
DECEMBER 11, 2023
What is a quantity query? It’s a bit of CSS that allows you to style an element (and its descendants) based on how many children the element has.