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.

Fonds de carte  (gmap)

We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width or height.

However, using the vh unit on mobile is buggy. The reason is that the viewport size won’t include the browser’s address bar UI.

To solve that, we now have new viewport units. Let’s find out about them in this article.