Aquí están las cinco funciones CSS modernas para 2024, junto con códigos de ejemplo para cada una:

1. :tiene() Selector:
   • Esto le permite diseñar un elemento principal en función de sus hijos.

Aplica estilo al div principal si contiene un hijo .activo

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

1. Consultas de contenedor:
   • Estos permiten un diseño responsivo basado en el tamaño de un contenedor.

Cambiar el diseño de la tarjeta según el tamaño de su contenedor

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

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

1. Selectores anidados:
   • CSS ahora admite reglas de anidamiento para un código más limpio.

Estilos anidados para un botón dentro de una tarjeta

   .card {
       background-color: white;
       padding: 20px;

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

1. Propiedad de ajuste de texto: Esta propiedad ayuda a distribuir el texto de manera uniforme entre líneas.

Usar ajuste de texto para equilibrar el texto en un párrafo

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

1. :Pseudoclase visible con foco:
   • Esto mejora la accesibilidad al diseñar elementos enfocados a través de la navegación con el teclado.

Resaltar campos de entrada cuando se enfoca mediante el teclado

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

Estos ejemplos ilustran cómo implementar cada característica en su CSS, mejorando la capacidad de respuesta y accesibilidad de sus diseños web.