3 New Additions to CSS in 2023
The web is constantly evolving, and CSS is no exception. The last few years have given us widely supported features such as Grids, Variables (Custom properties) and New viewport units – among other improvements.
2 min read
·
By Kjetil Svalestuen
·
December 11, 2023
New features are fine, but become great only when a sufficient amount of users have access to browser versions that support them. Let's look at three exciting additions that are now ready for production.
Container Queries 🖼️
As of February, Container queries for size are finally supported in all major browsers. Rather than relying solely on the viewport size of the whole viewport (browser window), container queries allow elements to adapt based on the size of their parent container.
Responsive design is typically implemented using a media query that checks the viewport width. In the code below, elements with the .panel class will flow vertically on small screens, and horizontally on screens larger than 500 pixels.
.panel {
display: flex;
flex-direction: column;
}
@media (min-width: 500px) {
.panel {
flex-direction: row;
}
}The example above might work well if the panel always uses the same amount of space on the page. But imagine the same panel is rendered in many different settings, as is often the case with reusable components. With container queries, we can query the actual amount of available space.
@container (width > 500px) {
.panel {
flex-direction: row;
}
}Crocodile Signs 🐊
Did you notice the «crocodile signs» in the last example? The new Media Range Syntax is also a welcome addition to CSS! These mathematical operators a more intuitive way to express ranges in conditions, and can be used with media queries as well as the new container queries.
The new syntax also supports more complex queries. Take this example:
@media (min-width: 500px) and (max-width: 2000px)Now, you can do this instead:
@media (500px <= width <= 2000px)Subgrids #️⃣
CSS Grids has enjoyed wide browser support for a while now. But if you've been using Grids, you might have missed one specific tool – subgrids. Subgrids solves the issue where you want a grid item to become a grid container itself, but use the grid tracks of its parent.
Confused? For details on why we need CSS Grids, I recommend this article by Ken Bellows. If you've already encountered this issue, I have good news for you. Subgrids are now supported by all major browsers!
This also goes for display: contents, which is useful for telling the Grid algorithm to ignore certain elements. Just don't use it for buttons yet!
Looking Ahead
If you think 2023 has been a good year for CSS, stay tuned! Next time, we'll dive into what you might expect in 2024 – including nested CSS, improved scoping and a new «parent selector»!
Up next...
Loading…
