396 results
tagged
html
✕
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.
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.
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.
Large DOM sizes have more of an effect on interactivity than you might think. This guide explains why, and what you can do.
Writing better and more manageable CSS is something to strive for as a front-end developer. But what is better CSS? Well, it is a question that isn’t so easy to answer.
The Lab develops prototypes, projects and services that help make information meaningful and promote quality journalism, storytelling and content on the internet.
Storytelling
We build easy-to-use tools that can help you tell better stories.
Storytelling
We build easy-to-use tools that can help you tell better stories.
Using Sass’ @at-root for Nesting Variants