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.

Comments

[Davy TISSOT]

This is a very good selection, as these features are relatively unknown, and are now compatible with the most popular browsers.