5 modern CSS features for 2024

Here are the five modern CSS features for 2024, along with example codes for each:

1. :has() Selector:
   • This allows you to style a parent element based on its children.

Style the parent div if it contains a .active child

 div:has(.active) { background-color: lightgreen; } 

1. Container Queries:
   • These enable responsive design based on the size of a container.

Change the layout of the card based on its container size

 @container (min-width: 500px) { .card { display: flex; flex-direction: row; } } @container (max-width: 499px) { .card { display: block; } } 

1. Nesting Selectors:
   • CSS now supports nesting rules for cleaner code.

Nested styles for a button within a card

 .card { background-color: white; padding: 20px; .button { background-color: blue; color: white; padding: 10px; } } 

1. text-wrap Property: This property helps distribute text evenly across lines.

Use text-wrap to balance text in a paragraph

 p { text-wrap: balance; width: 300px; / Set a width for the effect / } 

1. :focus-visible Pseudo-Class:
   • This improves accessibility by styling elements focused via keyboard navigation.

Highlight input fields when focused via keyboard

 input:focus-visible { outline: 2px solid blue; background-color: lightyellow; } 

These examples illustrate how to implement each feature in your CSS, enhancing the responsiveness and accessibility of your web designs.