A Revolução CSS Continua

O CSS está evoluindo mais rápido do que nunca. Só na última semana, vimos propostas revolucionárias, um guia de layout novo da WebKit e uma conferência comunitária vibrante. Vamos detalhar as atualizações mais importantes que você precisa conhecer.

1. A Função alpha(): Finalmente, um Jeito Limpo de Ajustar Opacidade

Você já sofreu para mudar a opacidade de uma cor armazenada em uma variável CSS? Não está sozinho. A nova função alpha() resolve isso de forma elegante.

Do Jeito Antigo (Doloroso):

--cor: oklch(0.65 0.23 230);
/* Para mudar a opacidade, você tinha que repetir a função de cor inteira */
color: oklch(from var(--cor) l c h / 0.5);

Do Jeito Novo (Limpo):

--cor: oklch(0.65 0.23 230);
color: alpha(from var(--cor) / 0.5);

A função alpha() não se importa com o formato de cor subjacente. Ela simplesmente extrai o canal alpha e permite que você o substitua. Isso significa:

  • Código mais curto e legível.
  • Não precisa mais fixar valores de cor nas variáveis.
  • Intenção mais clara: você está apenas modificando a opacidade.

2. O Guia de Grid Lanes da WebKit (Layout Masonry)

A WebKit lançou um guia completo para Grid Lanes — o layout masonry nativo do CSS. Pense nele como uma forma performática de criar grids estilo Pinterest sem JavaScript.

Principais pontos:

  • Usa grid-template-rows: masonry (ou columns).
  • Os itens são posicionados em um layout compacto, preenchendo lacunas automaticamente.
  • Fallback para grid regular em navegadores que ainda não suportam.
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry; /* A mágica acontece aqui */
}

3. Melhorias de Qualidade de Vida: closedby e overscroll-behavior

Una Kravets destacou duas pequenas mas poderosas melhorias:

  • closedby="any": Fecha um diálogo ao clicar fora ou pressionar Escape. Adeus JavaScript personalizado para light dismiss.
  • overscroll-behavior: contain: Impede o encadeamento de rolagem. A rolagem do seu modal não vai rolar a página de fundo.
<dialog closedby="any" style="overscroll-behavior: contain;">
  <p>Este modal fica no lugar!</p>
</dialog>

Nota: closedby ainda não tem suporte no Safari, mas overscroll-behavior é amplamente suportado.

4. CSS Day 2026: O que Aconteceu

O CSS Day em Amsterdã foi repleto de insights. As gravações estarão disponíveis no final de junho, mas aqui está o que sabemos:

  • @function está chegando — o tutorial de Jane Ori tornou o conceito acessível.
  • Sem lança-chamas este ano, mas muitas referências a DOOM (o jogo, não o fim do mundo).
  • Palestras cobriram desde container queries até animações baseadas em rolagem.

5. CSS Wordle: O Jogo que Está Dominando

Sunkanmi Fafowora criou o CSS Wordle — um puzzle diário onde você adivinha propriedades CSS. É viciante, educativo e uma ótima maneira de testar seus conhecimentos.

6. Novos Recursos Baseline

O Chrome 149 trouxe vários recursos para Baseline (estável entre navegadores):

  • Gap decorations (linhas entre gaps do grid)
  • image-rendering: crisp-edges (escalonamento pixel-perfect)
  • rect() e xywh() para shape-outside

Limitações e Cuidados

  • alpha() ainda está em estágio de proposta; nenhum navegador implementou ainda.
  • Grid Lanes (masonry) está disponível apenas no WebKit (Safari/Chrome no iOS) — Firefox e Chrome desktop ainda estão trabalhando nisso.
  • closedby não tem suporte no Safari. Sempre forneça um fallback.

Próximos Passos

  • Experimente alpha() no seu pré-processador ou via polyfill.
  • Teste a demo de Grid Lanes para ver masonry em ação.
  • Assista às gravações do CSS Day quando forem lançadas.

Fonte: CSS-Tricks What's Important #13

Leitura Recomendada

Developer writing CSS code with alpha() function and grid lanes on dual monitor setup

CSS Day 2026 conference attendees watching a presentation about new web platform features Dev Environment Setup

CSS Wordle game interface on a laptop screen showcasing CSS property guessing IT Technology Image

Este conteúdo foi elaborado com o auxílio de ferramentas de IA, com base em fontes confiáveis, e revisado pela nossa equipe editorial antes da publicação. Não substitui o aconselhamento de um profissional especializado.