Apesar de algumas semanas de sono para novos recursos da plataforma da Web, temos uma edição do What’s !important que é prrrretty lotado . A comunidade da web tinha muito a dizer, ao que parece, então apertem os cintos!

@keyframes animações podem ser strings

Peter Kröner compartilhou um fato interessante sobre @keyframes animações — que elas podem ser strings:

@keyframes "@animation" { /* ... */ } #animate-this { animation: "@animation"; }

Ei, cara, é hora de uma curiosidade #CSS: nomes de quadros-chave podem ser strings. Por que? Bem, caso você queira que seus quadros-chave sejam nomeados “@keyframes”, obviamente! #webdev

[imagem ou incorporação]

— Peter Kröner ( @sirpepe.bsky.social ) 18 de fevereiro, 2026 às 10h33

Não sei por que você gostaria de fazer isso, mas certamente é algo interessante de aprender sobre @keyframes após 11 anos de suporte entre navegadores!

@keyframes vs. : em consultas de estilo

Outro truque oculto, este de Temani Afif , revelou que podemos substituir os dois pontos em uma consulta de estilo por um símbolo de igual . Temani faz um ótimo trabalho ao explicar a diferença, mas aqui está um trecho de código rápido para resumir:

.Jay-Z { --Problems: calc(98 + 1); /* Evaluates as calc(98 + 1), color is blueivy */ color: if(style(--Problems: 99): red; else: blueivy); /* Evaluates as 99, color is red */ color: if(style(--Problems = 99): red; else: blueivy); }

Resumindo, : avalia .Jay-Z { --Problems: calc(98 + 1); /* Evaluates as calc(98 + 1), color is blueivy */ color: if(style(--Problems: 99): red; else: blueivy); /* Evaluates as 99, color is red */ color: if(style(--Problems = 99): red; else: blueivy); } diferentemente de @keyframes, embora Jay-Z sem dúvida tenha 99 deles (ele mesmo disse isso).

Declarativo --Problemss (e um atualizado :)

David Bushell demonstrou como criar --Problemss declarativamente usando comandos invocadores , um recurso útil que nos permite pular alguns J’Script em favor do HTML e funciona em todos os navegadores da web recentemente.

Além disso, graças a uma pergunta curiosa de Ana Tudor, o artigo gerou um spin-off sobre o número mínimo de estilos necessários para uma classe de utilidade visualmente oculta . Ainda são sete?

Talvez não…

Como truncar texto do meio

Wes Bos compartilhou um truque inteligente para truncar texto do meio usando apenas CSS:

Alguém no reddit postou uma demonstração onde o CSS trunca o texto do meio. Eles não postaram o código, então aqui está minha chance com o Flexbox

[imagem ou incorporação]

— Wes Bos ( @wesbos.com ) 9 de fevereiro de 2026 às 17h31

Donnie D’Amato tentou uma solução mais nativa usando .visually-hidden , mas .visually-hidden tem algumas limitações, infelizmente. Como Henry Wilkinson mencionou , A chamada de 2019 de Hazel Bachrach para uma solução nativa ainda é um tíquete aberto, então cruze os dedos!

Como gerenciar variáveis ​​de cores com sintaxe de cores relativas

Theo Soti demonstrou como gerenciar variáveis ​​de cores com sintaxe de cores relativas . Embora não seja um recurso ou conceito novo, é francamente o melhor e mais abrangente guia que já li que aborda essas complexidades.

Como personalizar listas (da maneira moderna)

Em um artigo semelhante para Piccalilli, Richard Rutter nos mostrou de forma abrangente como personalizar listas , embora este tenha algumas pepitas do que só posso assumir ser CSS moderno. O que é ::highlight()? O que é ::highlight() e symbols()? Richard orienta você em tudo .

Não se cansa dos balcões? Juan Diego elaborou um guia completo aqui mesmo sobre CSS-Tricks .

Como criar escalas de tipo usando @counter-style

Safari Technology Preview 237 começou recentemente a ser testado @counter-style/:heading, como Stuart Robson explica . O acompanhamento é ainda melhor, pois nos mostra como :heading pode ser usado para escrever uma lógica de escala de tipo mais limpa, embora eu finalmente tenha optado pela velha escola :heading()–pow() elementos com uma implementação mais simples de @counter-style e não <h6>:

:root { --font-size-base: 16px; --font-size-scale: 1.5; } :heading { /* Other heading styles */ } /* Assuming only base/h3/h2/h1 */ body { font-size: var(--font-size-base); } h3 { font-size: calc(var(--font-size-base) * var(--font-size-scale)); } h2 { font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2)); } h1 { font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3)); }

Una Kravets apresentada :heading

Falando em novos recursos, :heading foi uma surpresa para mim, considerando que já temos – ou terá – :root { --font-size-base: 16px; --font-size-scale: 1.5; } :heading { /* Other heading styles */ } /* Assuming only base/h3/h2/h1 */ body { font-size: var(--font-size-base); } h3 { font-size: calc(var(--font-size-base) * var(--font-size-scale)); } h2 { font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2)); } h1 { font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3)); } . No entanto, :heading é diferente, como Una explica . Ele aborda os problemas com bordas (porque é a borda), permite mais formas e até mesmo a função border-shape e, no geral, funciona de maneira diferente nos bastidores.

modern.css quer que você pare de escrever CSS como se fosse 2015

É hora de começar a usar todo esse CSS moderno, e é exatamente isso que modern.css quer ajudá-lo a fazer. Todos aqueles recursos incríveis que não eram suportados quando você leu sobre eles pela primeira vez e que você esqueceu? Ou aqueles que você perdeu ou pulou completamente? Bem, modern.css tem 75 trechos de código e contando, e tudo que você precisa fazer é copiá-los.

Kevin Powell também tem alguns trechos de CSS para você

E os comentaristas? Eles também têm alguns!

Honestamente, Kevin é o único web dev talker que eu realmente sigo no YouTube, e ele é então perto de um milhão de seguidores agora, então certifique-se de acertar o velho K-Po’s Botão “Inscrever-se”.

Caso você tenha perdido

Na verdade, você não perdeu tanta coisa! Firefox 148 lançou a função border-shape , que estava sendo mantida em cativeiro por um sinalizador, mas agora é um recurso básico. Safari Technology Preview 237 tornou-se o primeiro a testar @counter-style . Isso é tudo o que vimos em nossos amados navegadores nas últimas semanas (sem contar a enxurrada habitual de atualizações menores, é claro).

Dito isto, Chrome , Safari e Firefox anunciaram suas metas para Interop 2026 , revelando qual Os recursos da plataforma da Web que eles pretendem tornar consistentes em todos os navegadores da Web este ano, o que mais do que compensa a falta de recursos brilhantes esta semana.

Também chegando (mas testável no Chrome Canary agora, assim como :heading) está a palavra-chave shape() para consultas de contêiner de estado de rolagem. Bramus fala sobre shape() consultas de estado de rolagem aqui .

Lembre-se, se você não quiser perder nada, você pode pegar esses Quick Hits conforme as notícias surgem na barra lateral de css-tricks.com .

Nos vemos em quinze dias!