"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > recursos CSS modernos para 4

recursos CSS modernos para 4

Publicado em 2024-11-02
Navegar:435

odern CSS features for 4

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.

Declaração de lançamento Este artigo é reproduzido em: https://dev.to/rajeshkumaryadavdotcom/5-modern-css-features-for-2024-1ole?1 Se houver alguma infração, entre em contato com [email protected] para excluí-lo.
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3