Esta edição de What’s !important traz para você clip-path quebra-cabeças, um kit de ferramentas de transições de visualização, contêineres somente de nome, o resumo usual de novos e notáveis recursos de plataforma da web e muito mais.
Criando um quebra-cabeça usando clip-path
Amit Sheen demonstrou como criar um quebra-cabeça completo usando clip-path . Embora eu duvide que você precise criar um quebra-cabeça tão cedo, o passo a passo de Amit oferece uma maneira fantástica de se familiarizar com essa propriedade CSS em evolução que está se tornando cada vez mais popular a cada dia.
Por exemplo, o Chrome Canary enviou arredondado clip-path polígonos apenas na semana passada:
Eu e Jason estamos atualmente trabalhando na implementação da palavra-chave CSS `polygon() round` no Chrome.
Este é um dos meus recursos CSS favoritos! Obrigado a @lea.verou.me por trazê-lo para CSS.
Habilite o sinalizador `enable-experimental-web-platform-features` no Chrome Canary
codepen.io/yisi/pen/NPR…— yisibl.bsky.social ( @yisibl.bsky.social ) 9 de abril de 2026 às 7h25
E também se fala em implementar outras #corner-shape palavras-chave como bevel também.
Finalmente, já que estamos no assunto, e porque de alguma forma eu perdi completamente por What’s !important #8 , aqui está Karl Koch demonstrando algumas coisas realmente legais clip-path animações .
Faça o recorte!
Ver kit de ferramentas de transições
A equipe do Chrome DevRel criou um kit de ferramentas de transições de visualização , uma coleção de utilitários que facilitam um pouco o trabalho com transições de visualização.
Aqui está minha demonstração favorita do site:
O Chrome enviou transições de visualização com escopo de elemento apenas no mês passado, então não há melhor momento para mergulhar neste kit de ferramentas.
Como contêineres somente de nome podem ser usados para escopo
Chris Coyier discutiu o uso de contêineres somente de nome para escopo e como eles se comparam aos nomes de classe e @scope. Pessoalmente, prefiro @scope porque tende a resultar em HTML mais limpo, e parece que Chris atualizou sua postura para ser mais @scope-alinhado também, mas na verdade se resume a algo pessoal preferência. Qual é a sua opinião sobre isso?
Ei, lembra da subrede?
A certa altura, subgrid era um dos recursos CSS mais esperados, mas já se passaram dois anos e meio desde que se tornou a linha de base recentemente disponível e quase não afetou o cenário CSS. Isso é uma pena, porque a subgrade pode nos ajudar a sair das grades de maneira adequada e evitar a extravagância do velho Michael Scofield/invólucros aninhados/margens negativas.
Mas não se preocupe, a explicação muito simples de David Bushell sobre a subgrade ajuda você.
Talvez você não precise… JavaScript?
Lembre-se Talvez você não precise do jQuery ? The Great CSS Expansion de Pavel Laptev tem uma vibração semelhante, observando alternativas CSS para bibliotecas JavaScript (e JavaScript em geral) que são menores e com melhor desempenho.
Hits perdidos
- Cromo 147
-
contrast-color()(agora linha de base) -
border-shape(sem suporte para Safari ou Firefox) - CSSPseudoElement Interface JavaScript (sem suporte para Safari ou Firefox)
-
scrollintervalo para cronogramas de visualização (sem suporte para Safari ou Firefox) - Transições de visualização no escopo do elemento, conforme mencionado anteriormente (sem suporte para Safari ou Firefox)
-
- Safári TP 240
-
revert-rulepalavra-chave (já suportada pelo Chrome e Firefox)
-
- Safári TP 241
-
overflow-anchor(já compatível com Chrome e Firefox) -
stretch(já suportado pelo Chrome)
-
Está se tornando cada vez mais difícil acompanhar todos esses novos recursos CSS. Eu tentei muitas rodadas do novo CSS ou BS de Keith Cirkel? quiz , e minha melhor pontuação foi de apenas 18/20. Tempos tristes. Deixe-me saber sua pontuação nos comentários ( a menos que seja maior que a minha… ).
O que é !important #9: quebra-cabeças de caminho de clipe, kit de ferramentas de transições de visualização, contêineres somente de nome e muito mais originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.
