Aqui estão os cinco recursos CSS modernos para 2024, junto com códigos de exemplo para cada um:

1. :has() Seletor:
   • Isso permite que você estilize um elemento pai com base em seus filhos.

Estilize o div pai se ele contiver um filho .active

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

1. Consultas de contêiner:
   • Eles permitem um design responsivo com base no tamanho de um contêiner.

Altere o layout do cartão com base no tamanho do contêiner

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

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

1. Seletores de aninhamento:
   • CSS agora oferece suporte a regras de aninhamento para código mais limpo.

Estilos aninhados para um botão em um cartão

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

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

1. Propriedade de quebra de texto: Esta propriedade ajuda a distribuir o texto uniformemente entre as linhas.

Use a quebra de texto para equilibrar o texto em um parágrafo

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

1. : Pseudoclasse visível com foco:
   • Isso melhora a acessibilidade ao estilizar elementos focados na navegação pelo teclado.

Destaque campos de entrada quando focado pelo teclado

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

Estes exemplos ilustram como implementar cada recurso em seu CSS, melhorando a capacidade de resposta e acessibilidade de seus designs web.