Importante #7: random(), cantos dobrados, consultas de contêineres ancorados e muito mais | Truques CSS

Para esta edição de What’s !important , temos um equilíbrio saudável de CSS antigo que você pode ter perdido e novo CSS que você não quer perder. Isso inclui random(), random-item(), cantos dobrados usando clip-path, backdrop-filter, font-variant-numeric: tabular-nums, o Popover API, consultas de contêiner ancoradas, posicionamento de âncora em geral, DOOM em CSS, personalizável <select>, :open, animações acionadas por rolagem, <toolbar> e, de alguma forma, mais.

Vamos nos aprofundar. Compreendendo random() e random-item()

Alvaro Montoro explica como funcionam as funções CSS random() e random-item() . Acontece que eles são bastante complexos:

width: random(--w element-shared, 1rem, 2rem); color: random-item(--c, red, orange, yellow, darkkhaki);

Criando cantos dobrados usando clip-path

Minha primeira solução para cantos dobrados envolveu imagens reais. Não é uma ótima solução, mas essa era a maneira de fazer isso nos anos 90. Desde então, conseguimos fazer isso com clip-path , mas Kitty Giraudel criou um CSS clip-path solução que corta uma forma personalizada (passe o gatinho para vê-lo em ação):

Revisitando backdrop-filter e font-variant-numeric: tabular-nums

Stuart Robson fala sobre backdrop-filter . Não é uma propriedade CSS nova, mas é muito útil e quase nunca comentada. Na verdade, até agora, pensei que fosse para o pseudoelemento backdrop-filter, mas na verdade podemos usá-lo para criar todos os tipos de efeitos de fundo para todos os tipos de elementos, como este:

font-variant-numeric: tabular-nums é outro. Essa propriedade e esse valor evitam a mudança de layout quando os números mudam dinamicamente, como acontece com relógios ativos, contadores, cronômetros, tabelas financeiras e assim por diante. Amit Merchant orienta você com esta demonstração:

Introdução à API Popover

Godstime Aburu faz um mergulho profundo no API Popover , um novo (ish), mas recurso de plataforma da web diário que simplifica dicas de ferramentas e padrões de interface do usuário semelhantes a dicas de ferramentas, mas tem suas nuances.

Desvendando mais uma peculiaridade de posicionamento de âncora

Apenas outra peculiaridade de posicionamento de âncora , desta vez de Chris Coyier. Essas peculiaridades vêm se acumulando há algum tempo. Nós falamos sobre eles vez e vez novamente , mas o problema é que eles são e não bugs. O posicionamento da âncora funciona de uma forma que não é comumente compreendida, então definitivamente vale a pena ler o artigo de Chris, assim como os artigos aos quais ele faz referência.

Criando dicas de alternância dinâmicas usando consultas de contêiner ancoradas

Neste passo a passo, demonstro como criar dicas de alternância dinâmicas usando consultas de contêiner ancoradas . Além disso, encontrei uma peculiaridade no posicionamento da âncora, então se você deseja solidificar sua compreensão de tudo isso, acho que o passo a passo também ajudará nisso.

Demonstração (efeito completo requer Chrome 143+):

DOOM em CSS

DOOM em CSS . DESTRUIÇÃO. Em CSS.

DOOM totalmente renderizado em CSS. Cada superfície é um

que possui uma imagem de fundo, com um traçado de recorte com transformações 3D aplicadas. É claro que o CSS não possui uma câmera móvel, então giramos e traduzimos a cena ao redor do usuário.

[imagem ou incorporação]

— Niels Leenheer ( @html5test.com ) 13 de março de 2026 às 20:32

Atualizações do Safari, atualizações do Chrome e Quick Hits que você perdeu

• Safari Technology Preview 238
  • Personalizável <select>
  • :open (para minha surpresa, pois pensei que já era a linha de base)
• Chrome 146
  • Animações acionadas por rolagem

Além disso, O Chrome será enviado a cada duas semanas a partir de setembro .

Do rolo Quick Hits , você pode ter perdido que Font Awesome lançou uma campanha Kickstarter para transformar Eleventy em Build Awesome, cancelou porque seus e-mails não foram enviados ( apesar de atingir seu objetivo! ) e prometeu tentar novamente. Você pode assinar a notificação de relançamento .

Além disso, <toolbar> está chegando de acordo com Luke Warlow . Isso é semelhante a <toolbar> , que podemos testar no Chrome 146 com o sinalizador “Experimental Web Platform features” ativado.

Certo, vou matar alguns demônios em DOOM. Até a próxima!

P.S. Parabéns a Kevin Powell por chegar a 1 milhão de inscritos no YouTube !