--- title: "3 New Additions to CSS in 2023" url: "https://www.bekk.christmas/post/2023/11/3-new-additions-to-css-in-2023" authors: ["Kjetil Svalestuen"] published: "2023-12-11" updated: "2024-11-27T12:49:26Z" language: "en-US" type: "article" tags: ["CSS"] keywords: ["CSS", "2023", "Grid", "Responsive"] --- # 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](https://caniuse.com/css-grid), [Variables](https://caniuse.com/css-variables) (Custom properties) and [New viewport units](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic) – among other improvements. ## In short CSS gained three production-ready additions in 2023: container queries, a more intuitive media range syntax, and subgrids. Together, they make responsive layouts and grid-based components more flexible, especially for reusable UI that needs to adapt to its available space. - **For:** Frontend developers working with CSS - **Good to know beforehand:** Basic CSS, media queries, and CSS Grid _AI-generated_ 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](https://caniuse.com/?search=container%20queries) 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. ```css .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. ```css @container (width > 500px) { .panel { flex-direction: row; } } ``` ## Crocodile Signs 🐊 Did you notice the «crocodile signs» in the last example? The new [Media Range Syntax](https://caniuse.com/css-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: ```css @media (min-width: 500px) and (max-width: 2000px) ``` Now, you can do this instead: ```css @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](https://dev.to/kenbellows/why-we-need-css-subgrid-53mh). 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](https://caniuse.com/css-display-contents) 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»! ## Relevant resources recommended by the author - [3 Upcoming CSS features](https://bekk-blogg.vercel.app/post/2023/22/3-upcoming-css-features)