CSS Moderno Interest Invokers, Seletor de Prefixo e flex-wrap balance na Prática

Olha só o que o CSS aprontou essa semana! 🎨

E aí, dev! Se você piscou, perdeu três promoções pra Baseline, um seletor novo de sintaxe e um flex-wrap: balance que resolve aquele problema do último card órfão que a gente arrasta desde 2015.

Vamos lá, sem enrolação: esse roundup cobre o que realmente está shipando, não só spec draft bonitinho. Porque convenhamos — o CSS Working Group produz ideias lindas todo mês, mas só algumas sobrevivem ao contato com os engines de verdade.

O que vamos ver:

• Interest invokers e por que tooltip precisa de delay assimétrico
• Seletor de prefixo de classe — mais limpo que os hacks com [class^=]
• flex-wrap: balance e o que isso muda nos seus grids de card
• @supports named-feature() pra detectar capacidade de verdade
• Status Baseline de text-box-trim, sibling-count() e autocorrect

Interest Invokers: tooltip com delay na entrada, instantâneo na saída

O problema clássico de UX: usuário passa o mouse sem querer, tooltip dispara, ele sai, o tooltip fica pendurado. A solução é timing assimétrico — devagar pra aparecer, instantâneo pra sumir.

/* Aparece com delay, some na hora */
.tooltip-trigger {
  interest-delay-start: 500ms;   /* espera antes de mostrar */
  interest-delay-end: 0ms;       /* esconde imediatamente */
}

.tooltip-content {
  position: absolute;
  top: 100%;
  left: 0;
}

<!-- O atributo interesttarget liga o gatilho ao popover -->
<button interesttarget="minha-dica">Passe o mouse</button>
<div id="minha-dica" popover>Conteúdo do tooltip atrasado</div>

Padrão de progressive enhancement: Como só o Chrome suporta interest invokers hoje, combine com a abordagem legada de :hover + transition-delay. Navegadores que não entendem interest-delay-start simplesmente ignoram a declaração.

/* Fallback para navegadores sem suporte */
@supports not (interest-delay-start: 500ms) {
  .tooltip-trigger:hover + .tooltip-content {
    opacity: 1;
    transition-delay: 500ms;
  }
}

Seletor de Prefixo de Classe

Uma sintaxe nova que substitui três seletores de atributo feios por uma regra legível:

/* O jeito novo — limpo e performático */
.something-* {
  color: rebeccapurple;
}

/* O jeito antigo — três seletores pra cobrir os mesmos casos */
[class^="something-"],
[class*=" something-"],
[class*="something-"] {
  color: rebeccapurple;
}

Ainda não tem suporte em lugar nenhum, mas a spec é simples e o ganho ergonômico é gigante — pode apostar que a adoção vai ser rápida.

flex-wrap: balance e @supports named-feature()

flex-wrap: balance

text-wrap: balance foi um presente pra headlines. flex-wrap: balance estende a mesma ideia pra containers flex — os itens se distribuem de forma equilibrada entre as linhas em vez de deixar um card órfão na última fila.

@supports named-feature()

Algumas capacidades não podem ser testadas com um @supports (property: value) simples. O named-feature() deixa você consultar por nome:

@supports named-feature(anchor-positioning-transforms) {
  /* Navegador aplica transforms corretamente em elementos anchor-positioned */
  .popover { transform: translateY(-4px); }
}

Atualizações de Baseline que valem a pena

• sibling-count() / sibling-index() — agora Baseline. Chega de ginástica com :nth-child pra animações escalonadas.
• text-box-trim / text-box-edge — agora Baseline. Finalmente ritmo vertical tipográfico sem margem negativa.
• autocorrect — agora Baseline no Chrome 152.
• alpha() — só Chrome 152. Safari e Firefox pendentes.
• ::backdrop, ::scroll-marker, ::view-transition — suporte a CSSPseudoElement só no Chrome.

Cuidados e Próximos Passos

A real, sem filtro: metade dessa lista é Chrome-only. Se você entrega pra audiência global, trate interest-delay-*, named-feature(), alpha() e flex-wrap: balance como enhancements, nunca como feature essencial. Constrói o fallback primeiro, depois coloca o brilho por cima.

O seletor de prefixo é o destaque — simples o suficiente pra fazer polyfill na cabeça e útil o suficiente pra justificar um plugin postcss hoje.

O que estudar em seguida:

1. Lê a spec css-values-5 do CSS Working Group pra entender sibling-count().
2. Audita teu design system pra delays de tooltip — timing assimétrico é vitória de uma linha.
3. Testa text-box-trim na tua escala tipográfica; elimina uma classe inteira de hacks de margem.

Pra entender como plataformas grandes lidam com configuração e confiabilidade em escala, dá uma olhada nesse breakdown da arquitetura de sidecar de config dinâmica da Airbnb. E se você tá planejando migração de infra, o blueprint de migração Oracle-to-PostgreSQL vale teu tempo.

Fonte: CSS-Tricks — What's !important #18

Fechando a conta

CSS em 2025 tá voando — mais rápido do que a maioria dos times consegue absorver. A estratégia vencedora não é correr atrás de cada spec draft; é identificar os 20% de features que resolvem 80% da tua dor de layout e adotar esses atrás de um gate de @supports.

Começa por flex-wrap: balance e o seletor de prefixo. Baixo risco, alto retorno. Segura os interest invokers até o Firefox shipar suporte — a menos que tua audiência seja Chrome-heavy.

A web platform finalmente tá nos dando ferramentas nativas pra problemas que a gente hackeava há uma década. Usa elas, mas mantém teus fallbacks honestos. 🚀