10 Modern CSS Features You Can Use Today
CSS has come a long way. We once relied on preprocessors like Sass 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’d like.
Today many of these features are built right into the language. In this article, we’ll 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.
1. Container Queries
In the past, responsive design relied entirely on @media 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.
This is the problem that Container Queries can solve.
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’s placed. By setting container-type: inline-size; or container-type: size; on a parent element, you can use @container rules to apply styles that fit perfectly in context.
Here’s an example of how to use Container Queries where we either hide or show an image when the container is at a specific size:
2. CSS Nesting
Writing CSS used to mean repeating the same selectors over and over, making stylesheets long and messy. CSS Nesting fixes this by allowing you to write rules inside each other, similar to how you would in Sass or SCSS. It keeps your code shorter and cleaner.
You can nest selectors directly inside the parent’s braces, and use & when referring to the parent, like & + p or &.active. This feature makes preprocessors like Sass unnecessary for nesting.
3. CSS Parent Selector
For years, CSS could only style elements from the top down. There was no way to target a parent based on what’s inside it. The new :has(), often called the “parent selector”, changes that.
The :has() selector allows you to style an element if it contains something specific.
For example, you can style a card differently if it has an image, or highlight a parent container when one of its inputs is focused. It even works with :not() for more advanced logic, like styling every grid item except those with images.
For example:
4. CSS Fluid Sizing
CSS clamp(), min(), and max() functions enable fluid sizing, which allows elements to scale smoothly between sizes, creating a more natural and adaptable design.
With clamp(), you can define a value that automatically adjusts between a minimum and maximum size all in one line. For example, font-size: clamp(1rem, 2vw, 2rem); will allow text to grow naturally with the screen width, but never get smaller than 1rem or larger than 2rem.
You can also use min() and max() to cap or floor values, such as width: min(90%, 800px); will make the element 90% wide, but never exceed 800px.
For example:
5. CSS Subgrid
CSS Grid changed how we build layouts, but nested grids used to work independently, making it tricky to align items inside child grids with the main grid above them.
Subgrid fixes this by allowing child grids to inherit the parent grid’s track sizes, gaps, and line names. You can set display: grid; and use grid-template-columns: subgrid; or grid-template-rows: subgrid;.
In the following example, we use subgrid to align all prices perfectly, regardless of content height above it.
6. CSS Text Wrap Balance
Ever notice how some headlines look awkward because one word hangs alone on the last line?
The new text-wrap: balance; property fixes that automatically. It tells the browser to adjust line breaks so each line is more evenly balanced.
For best results, we can pair it with a max width like max-inline-size so the browser can calculate the ideal line breaks efficiently. It’s perfect for short text blocks like headings, subheadings, or quotes.
Here is an example:
7. Dynamic Viewport Units
The classic 100vh unit has long been a headache on mobile devices. For example, it could cause browser toolbars and address bars to shift as you scroll, often cutting off content or causing awkward extra space.
Modern CSS fixes this with new viewport units that handle these changes smoothly:
lvh: height when the browser UI is hidden (largest viewport).svh: height when the browser UI is fully visible (smallest viewport).dvh: dynamic height that automatically adjusts as the UI changes.
Using dvh will give you more reliable full-screen sections or sticky layouts without messy JavaScript fixes. It adapts perfectly to whatever space is actually visible, finally solving one of responsive design’s most persistent problems.
8. CSS Accent Color
The new accent-color property makes it easy to match native form elements. You can set a single color, and the browser automatically applies it to the accent parts of native controls.
It works on checkboxes, radio buttons, range sliders, and even progress bars. So with just one line of CSS, your form elements can instantly match your brand colors.
9. CSS Layers
The new @layer directive allows you to manage complex style sheets without fighting “specificity wars”. Instead of writing complicated selectors to override other styles, you can group your CSS into layers and control which ones take priority.
With @layer, you can decide the order your styles load. Higher layers always override lower ones, no matter how specific the selector is.
For example:
10. CSS OKLCH Colors
Older color formats like Hex and RGB don’t always match how we actually see color. For example, yellow and blue with the same lightness value can appear totally different in brightness.
That’s where OKLCH and LCH come in. These new color models are based on how humans perceive color, so adjusting brightness or saturation looks natural and consistent. They’re great for creating accessible themes, smooth dark modes, and color palettes that stay balanced across all screens.
For example:
Wrapping Up
We’ve seen many features in CSS, from container queries and nesting to OKLCH colors and cascade layers. Modern CSS gives developers more control, flexibility, and power than ever before. Most of these features are already supported in today’s browsers, so you can start using them right now to build the future of the web.