{"id":74193,"date":"2025-11-28T21:00:03","date_gmt":"2025-11-28T13:00:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74193"},"modified":"2025-11-21T16:27:09","modified_gmt":"2025-11-21T08:27:09","slug":"modern-css-features","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/modern-css-features\/","title":{"rendered":"10 Modern CSS Features You Can Use Today"},"content":{"rendered":"

CSS has come a long way. We once relied on preprocessors like Sass<\/a> or JavaScript hacks just to do basic things like use variables, nest selectors, or build flexible layouts. These tools worked, but they often added extra setup, slower builds, and more complexity than we\u2019d like.<\/p>\n

Today many of these features are built right into the language. In this article, we\u2019ll look at ten modern CSS features you can start using right now to write simpler, more powerful, and more responsive styles without relying on extra tools.<\/p>\n

\n

1. Container Queries<\/h2>\n

In the past, responsive design relied entirely on @media<\/code> queries, which only reacted to the size of the entire browser window. This caused headaches when reusing components. For example, a component that looked perfect in one place could easily break when moved into a smaller container.<\/p>\n

This is the problem that Container Queries<\/strong> can solve.<\/p>\n

So, instead of depending on the whole viewport, elements can now respond to the size of their parent container. This means each component can style itself based on where it\u2019s placed. By setting container-type: inline-size;<\/code> or container-type: size;<\/code> on a parent element, you can use @container<\/code> rules to apply styles that fit perfectly in context.<\/p>\n

Here\u2019s an example of how to use Container Queries<\/a><\/strong> where we either hide or show an image when the container is at a specific size:<\/p>\n

\n