5 snippets de CSS que todos os desenvolvedores front-end precisam saber em 2024

CSS estável, poderoso e que pode ser usado hoje mesmo.

Acredito que todo desenvolvedor de front-end precisa saber que :has() é mais do que um "seletor pai", o como e por que de um subgrid, como aninhar com a sintaxe CSS integrada, como deixar o navegador equilibrar o recuo do texto do título e como usar unidades de consulta de contêiner.

Esta postagem é uma continuação de os 6 snippets de CSS do ano passado que todo desenvolvedor de front-end precisa conhecer em 2023.

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

Compatibilidade com navegadores

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Origem

O :has() foi lançado em todos os principais navegadores no final de 2023. Esse novo seletor parece pequeno e inocente, mas você vai se surpreender com todos os casos de uso que ele pode desbloquear: jogos, reatividade, layout compatível com conteúdo, componentes inteligentes e muito mais, como explicamos neste artigo de Jhey.

Quatro painéis mostrados, cada um com uma imagem e uma legenda.
Cada imagem mostra um cérebro ativando cada vez mais poder cerebral. O primeiro painel
diz :has(). O segundo painel diz figure:has(caption) como um seletor pai.
O terceiro painel diz .layout:has(> :nth-child(5)) como um seletor de quantidade.
O painel "Forth" diz html:has(#checked) .new-subject como seletor de mudança de assunto condicional.

Confira alguns exemplos de como usar :has() como um seletor pai. Ele recebeu esse nome porque geralmente o assunto de um seletor fica no final, como ul li, em que li é o assunto e recebe os estilos. Com :has(), o elemento no início do seletor pode se tornar o assunto. No exemplo abaixo, o botão tem uma lacuna se houver um elemento dentro com uma classe de .icon. O cartão muda de orientação se houver uma imagem dentro dele.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Um seletor muito desejado é mudar um layout com base no número de itens que ele tem. Isso agora é possível com :has() porque ele pode manter o contêiner como o assunto ao consultar o número de filhos.

main:has(> :nth-child(5)) {}

Outro exemplo de nível mais alto, mude os estilos definidos em todo o documento quando uma caixa de seleção específica na página estiver ativada:

html:has(#dark-mode:checked) {}

Esses são casos de uso simples que não mudam o assunto do seletor. Se você analisar apenas exemplos como esse, pode pensar que :has() é limitado a ser um seletor pai. Confira os exemplos a seguir. Eles verificam algo com base em um ancestral comum e, em seguida, mudam o assunto do seletor para um filho em algum lugar mais profundo na página.

Este mostra um elemento de erro de formulário se alguma das entradas for inválida:

form:has(:user-invalid) .error {
  display: block;
}

Ele desliza para fora da área de conteúdo principal quando um sidenav tem uma classe de .--is-open:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Confira uma demonstração divertida que usa :has() como um seletor pai, :has() com consultas de quantidade e consultas de contêiner para criar um layout de grade que pode exibir elegantemente de 1 a 12 elementos nas orientações de retrato ou paisagem:

Testar no Codepen

Criar uma subgrade

subgrid

Compatibilidade com navegadores

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Origem

Por muitos anos, a comunidade de front-end da Web pediu uma subgrade para ajudar a completar e finalizar o mecanismo de layout de grade CSS, que é muito conhecido e poderoso. Agora, ele está disponível nas três principais plataformas.

Saiba mais sobre a subgrade.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Aninhar o caminho do CSS

nesting

Compatibilidade com navegadores

  • Chrome: 120.
  • Borda: 120.
  • Firefox: 117.
  • Safari: 17.2.

Origem

O aninhamento integrado do CSS ficou disponível em todos os principais navegadores em 2023. Até atualizei meu site para remover o processo de build que compilou o aninhamento e agora envio uma folha de estilos menor. Sim, as folhas de estilo com aninhamento são menores, e todas as ferramentas de desenvolvimento do navegador estão prontas para representá-las.

Confira uma visão geral da sintaxe de aninhamento do CSS para saber todos os detalhes. O exemplo de código a seguir mostra um exemplo de sintaxe.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

Permitir que o navegador equilibre os títulos

balance

Compatibilidade com navegadores

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Origem

pretty

Compatibilidade com navegadores

  • Chrome: 117.
  • Edge: 117.
  • Firefox: não é compatível.
  • Safari: não é compatível.

Origem

Sem text-wrap: balance, os desenvolvedores e redatores de texto precisam usar dicas de quebra de linha, como elementos <wbr> ou &shy;. É uma batalha perdida, porque assim que o conteúdo é traduzido, ampliado ou modificado de qualquer forma, não há garantia de que essas dicas de formatação estarão no lugar certo para a nova apresentação do conteúdo.

Com o balanceamento de texto, você pode deixar esse trabalho para o navegador. Confira uma comparação no Codepen a seguir.

Usar unidades de consulta de contêineres

cqw

Compatibilidade com navegadores

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origem

A postagem do ano passado sugeriu que todo desenvolvedor de front-end precisa saber como escrever uma consulta de contêiner. Se você ainda não aprendeu, faça de 2024 o ano para se arriscar e conferir as unidades de consulta de contêiner. Como visão geral, Ahmad Shaded escreveu um ótimo artigo sobre unidades de consulta de contêineres em 2021.

Há seis novas unidades de consulta de container:

  1. Uma variante inline cqi.
  2. Uma variante de largura cqw.
  3. Uma variante de bloco cqb.
  4. Uma variante de altura cqh.
  5. Uma variante para qualquer comprimento é menor cqmin.
  6. Uma variante para qualquer comprimento é maior cqmax.

Considere um cenário para animações relativas e intrínsecas a um contêiner. Um elemento filho que desliza para fora do contêiner usando 100cqi, ou seja, 100% do tamanho inline do contêiner.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Este é um card com tipografia responsiva de contêiner e uma imagem que se adapta à orientação do contêiner, ficando com metade do tamanho se a orientação for paisagem.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

Se essas unidades forem novas para você, é recomendável analisar todas as unidades disponíveis em 2024.