Importante nº 11: cenas de voxel 3D, foco voador, sintaxe CSS e muito mais

Se cenas voxel 3D (que você pode estilizar), animações de foco voador ou novas sintaxes CSS soam como o seu tipo, então esta edição de What’s !important é definitivamente para você.

Também apresenta Polypane, animações orientadas por rolagem e as atualizações mais recentes da plataforma da web do Chrome 148 e Safari 26.5.

Heerich.js para cenas voxel 3D

Inspirado nas esculturas de Erwin Heerich , David Aerne criou Heerich.js , um pequeno mecanismo para criar cenas voxel 3D. Elas são renderizadas como SVG e, como podemos usar variáveis ​​CSS em SVG, as cenas são basicamente estilizadas usando CSS.

Trechos de polipane

Polypane, amplamente considerado o melhor navegador para desenvolvimento web, lançou uma loja de snippets . Então, se você quiser clicar em um componente e copiar o HTML básico sem toda aquela “porcaria”, o 1-Click Decrapulator é o que você deseja. Nome fantástico, aliás.

Animando o foco com transições de visualização

Chris Coyier nos mostrou como animar o foco com transições de visualização . Ele também comparou “movimento desnecessário” com a implementação condicional prefers-reduced-motion do WebAIM, que considero a abordagem correta, porque acho difícil manter o controle do foco mesmo quando ele está realmente visível.

De qualquer forma, é uma exploração fantástica de técnicas. Além disso, nos comentários, Kilian Valkhof (fundador da Polypane, na verdade) compartilhou sua técnica somente CSS para foco flutuante (ou, como Chris chama, “foco voador”).

A of <selector> sintaxe

Paweł Grzybek mencionou que a sintaxe of <selector> é realmente bem suportada (linha de base) agora, mas honestamente, eu nem tinha ouvido falar dela.

Eu sabia que o CSS :nth-child(n of selector) era uma coisa, mas não sabia o quão bem suportado ele é hoje em dia. Outra coisa que eu não sabia é que posso usar o aninhamento CSS como no exemplo abaixo. CSS moderno é incrível ❣️

developer.mozilla.org/en-US/docs/W…

#css

[imagem ou incorporação]

— Paweł Grzybek ( @pawelgrzybek.com ) 17:51 · 5 de maio de 2026

O seletor a seguir significa, “de todos os irmãos, selecione o segundo .intro, mas apenas se for um <div>.” É mais ou menos como div:nth-of-type(2), exceto que só pode selecionar elementos do mesmo tipo, enquanto of <selector> funciona com qualquer seletor.

div:nth-child(2 of .intro) {
  /* ... */
}

Dado que div:nth-child(2 of .intro) {
/* ... */
} é equivalente ao seletor pai (então, .intro), o segundo exemplo significa “de todos os irmãos, selecione o segundo .intro dentro .intro Além disso, porque não há nada antes de .intro, .intro pode ser qualquer coisa desta vez

.

.intro {
  :nth-child(2 of &) {
    /* ... */
  }
}

Há tanta coisa acontecendo com CSS no momento, então acho que é muito útil quando algo que perdi volta assim. Embora curiosamente, enquanto estou digitando isso, vejo que Preethi Sam escreveu um artigo sobre a sintaxe # of <selector> um pouco mais de uma semana atrás ( *adiciona à lista de leitura* ).

Compreendendo a sintaxe do intervalo

A sintaxe do intervalo é uma sintaxe nova (ish) mais legível com operadores de comparação (.intro {
:nth-child(2 of &) {
/* ... */
}
}, of <selector>, > e <) para consultas de mídia e consultas de contêiner. Ahmad Shadeed explicou habilmente como funciona a sintaxe de intervalo , mas fique de olho no suporte do navegador. Os navegadores da Web ainda enviam consultas de contêiner e a sintaxe do intervalo para essas consultas deve ser enviada de forma independente. Por exemplo, consultas de estilo de contêiner serão lançadas no Firefox 151 na próxima semana, mas a sintaxe de intervalo para consultas de estilo de contêiner será enviada com um sinalizador.

É algo fácil de perder (não me pergunte como eu sei).

Noções básicas sobre animações baseadas em rolagem

Animações baseadas em rolagem podem ser um pouco difíceis (especialmente aquelas com >= cronogramas), mas a explicação do especialista de Josh Comeau sobre animações baseadas em rolagem as torna muito mais fáceis de entender. Com animações de rolagem acionadas a caminho, eu recomendo dominar primeiro as animações baseadas em rolagem (se ainda não o fez). Novamente, não me pergunte como eu sei ( *chora em CSS* ).

Novas atualizações da plataforma web

• Cromo 148
  • Somente nome consultas de contêiner (agora linha de base)
  • <= palavra-chave (sem suporte estável Safari)
  • view() função para consultas de recursos (sem suporte para Safari ou Firefox)
  • revert-rule atributo para at-rule()/loading (sem suporte para Safari ou Firefox)
• Safári 26.5
  • <video> pseudoclasse (agora linha de base)
  • Atualizado <audio> função (sem suporte para Chrome ou Firefox)

Inspirados por este adorável comentário , gostaríamos apenas de agradecer aos nossos autores por todo o trabalho incrível que eles fazem, bem como a muitos outros educadores por aí com quem, sem dúvida, aprendemos e nos inspiramos. Continuem, CSS-Tricksters!

Não sou especialista em CSS, mas educadores especializados em CSS são meus favoritos. Suas habilidades de design, capacidade de aproveitar ao máximo a plataforma web e entusiasmo geral pela construção para a web são incomparáveis por outros tipos de desenvolvedores!

— George Rodier ( @georgerodier.com ) 15:42 · 30 de abril de 2026

Até a próxima!

O que é! Importante #11: cenas de voxel 3D, foco voador, sintaxe CSS e muito mais originalmente escrito à mão e publicado com amor em Truques CSS . Você realmente deveria receber o boletim informativo também.