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

CSS digno de ferramenta, poderoso e estável que você pode usar atualmente.

Adam Argyle

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

Esta postagem é uma continuação de os 6 snippets do CSS do ano passado que todo desenvolvedor de front-end deveria 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. Este novo seletor parece pequeno e inocente, mas você se surpreenderá com todos os casos de uso que ele pode proporcionar: jogos, reatividade, layout baseado em conteúdo, componentes inteligentes e há muito mais que foi bem explorado neste artigo de Jhey.

Confira alguns exemplos de como usar :has() como um seletor pai. Ele recebeu esse nome porque geralmente, o assunto de um seletor está 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 terá uma lacuna se houver um elemento dentro com uma classe de .icon. A orientação do card é alterada quando há uma imagem dentro dele.

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

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

Um seletor longo e desejado é alterar um layout com base em quantos itens ele tem. Agora isso é possível com :has(), porque pode manter o contêiner como assunto enquanto consulta o número de filhos.

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

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

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

Esses são casos de uso simples que não alteram o assunto do seletor, se você analisar apenas os exemplos assim, você pode pensar que :has() está limitado a ser um seletor pai. Considere o seguinte exemplos. Eles procuram algo com base em um ancestral comum e, em seguida, mudam o seletor sujeito a uma filha em algum ponto mais profundo da 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 uma navegação secundária tem uma classe de .--is-open:

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

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

Criar uma subgrade

Por muitos anos, a comunidade web de front-end pediu para que a subgrade ajudasse a arredondar e concluir o poderoso e popular mecanismo de layout de grade CSS. Já está disponível nos três principais mecanismos.

Saiba mais sobre 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;
  }
}

Aninhe com o CSS

O aninhamento integrado de CSS foi disponibilizado em todos os principais navegadores em 2023. Até atualizei meu site para remover o processo de compilação 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 do navegador estão prontas para representá-lo.

Você encontra uma visão geral da sintaxe de aninhamento de CSS aqui, para conhecer 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;
  }
}

Deixe o navegador equilibrar as manchetes

Sem o text-wrap: balance, os desenvolvedores e redatores de texto precisam dar dicas sobre quebras de linha como elementos <wbr> ou ­. É uma batalha perdida, porque assim que o conteúdo for traduzido, ampliado ou modificado de alguma forma, não há garantia de que essas as dicas de ajuste vão estar 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 front-end deveria saber como escrever uma em um contêiner on-line. Se você ainda não aprendeu, aproveite 2024 para se arriscar, além de unidades de consulta de contêiner. Como uma visão geral, Ahmad Shadeed escreveu um ótimo artigo sobre unidades de consulta de contêiner em 2021.

Há seis novas unidades de contenário:

1. Uma variante in-line 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 que seja menor cqmin.
6. Uma variante para qualquer tamanho que seja maior cqmax.

Considere um cenário para animações relativas e intrínsecas a um contêiner. Um elemento filho que sai totalmente de seu contêiner usando 100cqi, que é 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 ao a orientação do contêiner, tornando-se 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ê, provavelmente é uma boa ideia revise todas as unidades disponíveis para você em 2024.