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

CSS poderoso, estável e pronto para uso.

Adam Argyle

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

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

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

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, capacidade de resposta, layout sensível ao conteúdo, componentes inteligentes e muito mais, como bem explicado neste artigo de Jhey.

Confira alguns exemplos de como usar :has() como um seletor principal. 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 a seguir, o botão tem uma lacuna se houver um elemento dentro com uma classe de .icon. O card 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. Agora isso é possível com :has(), porque ele pode manter o contêiner como assunto ao consultar o número de filhos.

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

Outro exemplo de nível superior: mudar os estilos definidos em todo o documento quando uma caixa de seleção específica na página é ativada:

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

Esses são casos de uso simples que não mudam o assunto do seletor. Se você analisar exemplos como este, poderá pensar que :has() é limitado a ser um seletor pai. Confira estes exemplos. Eles verificam algo com base em um ancestral comum e, em seguida, mudam o assunto do seletor para um filho em algum lugar mais abaixo 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;
}

Este desliza a á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 capaz de mostrar de forma elegante de 1 a 12 elementos nas orientações retrato ou paisagem:

Criar uma subgrade

Por muitos anos, a comunidade da Web de front-end pediu subgrade para ajudar a completar e finalizar o mecanismo de layout de grade CSS, que é extremamente popular e eficiente. Agora ele está disponível nos três principais mecanismos.

Saiba mais sobre a subgrade aqui, se quiser uma visão geral.

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

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

Aninhar do jeito CSS

O aninhamento de CSS integrado ficou disponível em todos os principais navegadores em 2023. Atualizei até meu site para remover o processo de build que compilava o aninhamento, e agora envio uma folha de estilo 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 aqui para 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

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

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

Usar unidades de consulta de contêiner

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

Há seis novas unidades de consulta de contêiner:

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 o menor comprimento cqmin.
6. Uma variante para o comprimento maior cqmax.

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

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

Aqui está um card com tipografia responsiva de contêiner e uma imagem que se adapta à orientação do contêiner, ficando 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 você não conhece essas unidades, é recomendável revisar todas as unidades disponíveis em 2024.