{"id":1013,"date":"2024-03-26T07:53:40","date_gmt":"2024-03-26T13:53:40","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1013"},"modified":"2025-09-26T17:43:21","modified_gmt":"2025-09-26T22:43:21","slug":"what-you-need-to-know-about-modern-css-spring-2024-edition","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/what-you-need-to-know-about-modern-css-spring-2024-edition\/","title":{"rendered":"What You Need to Know about Modern CSS (2024 Edition)"},"content":{"rendered":"\n

My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly<\/em> new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t have a great understanding of them and could use a plain language<\/strong> explanation of what it is, why they should care<\/em>, and a bit of reference code. Maybe that’s you.<\/p>\n\n\n\n

I’d like to work on our collective muscle memory on these features. Like I said<\/a>, “even if you know<\/em> about this stuff, it takes time to build the muscle memory around it.”<\/p>\n\n\n\n

There is quite a bit more syntax, detail, and nuance to these things than I am presenting here. I want you to know what’s possible, reference the most basic usage and syntax, then dig deeper when you need to. <\/p>\n\n\n\n

\n

Container Queries (Size)<\/span><\/h2>\n\n\n\n

What are Size Container Queries?<\/h3>\n\n\n\n

Container Queries allow you to write styles that apply to the children of a container element when that container matches certain media conditions, typically a width measurement.<\/p>\n\n\n\n

\n
<div<\/span> class<\/span>=\"element-wrap\"<\/span>><\/span>\n  <div<\/span> class<\/span>=\"element\"<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre><\/div>\n\n\n\n
.element-wrap<\/span> {\n  container<\/span>: element \/ inline-size;\n}\n@container<\/span> element (min-inline-size:<\/span> 300px<\/span>) {\n  .element<\/span> {\n    display<\/span>: flex;\n    gap<\/span>: 1rem<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre><\/div>\n<\/div>\n\n\n\n
When should you care?<\/h3>\n\n\n\n
If you’ve ever thought: I wish I could make styling decisions based on the size of this<\/em> element, not the entire page like @media<\/code> queries force me to do. Then using @container<\/code> queries are for you! People who work on design systems or heavily component-based websites will probably mostly<\/em> use Container Queries to style things based on size, because the size of the entire page is a poor proxy for the size of a component. <\/p>\n\n\n\n
Support<\/h3>\n\n\n\n
Browser Support<\/a><\/td>Full<\/td><\/tr>
Progressive Enhancement?<\/td>Potentially \u2014 if it’s not critical what you are styling, then yes.<\/td><\/tr>
Polyfillable<\/td>Yes<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Basic Demo of Usage<\/h3>\n\n\n\n
Use the resizer in the middle to see the calendar change layout depending on how much space it has. It has three breakpoints of its own.<\/p>\n\n\n\n