Importante #15: CSS com reconhecimento de limites, CSS baseado em tempo, CSS completo e muito mais

Semelhante a da última vez , O que é !important #15 é bastante empilhado – leia tudo sobre CSS com reconhecimento de limites, tornando pistas de grade acessíveis, criando designs web baseados em tempo, corrigindo CSS completo, melhorando a personalização <select>, novos recursos da plataforma web e muito mais.

Usando view() para CSS com reconhecimento de limites

Preethi Sam nos acompanhou muito habilmente o conceito de CSS com reconhecimento de limites . Usando view(), Preethi conseguiu criar uma série de efeitos realmente úteis, alguns dos quais compartilharei abaixo:

Eu também escrevi algo para o blog Master.dev, sobre tornando elementos interativos invisíveis, mas acessíveis . Parece que é necessário mais trabalho para torná-lo totalmente acessível e que um novo valor para o atributo hidden pode ser a resposta.

Acessibilidade: uma história de Grid Lanes

Dan Holloran escreveu sobre grid lanes layout (anteriormente “layout de alvenaria” ou “aquela coisa que o Pinterest fez”).

Manuel Matuzović disse que não é acessível (layout de grid lanes, isto é, não é o artigo de Dan, que é ótimo e vai direto ao ponto).

Em um artigo de acompanhamento alguns dias depois, MM sugeriu usando reading-flow para tornar as pistas da grade acessíveis , o que parece ser a decisão certa, mas ainda não foi testado.

Como criar designs de sites baseados em tempo

Sophie Koonin demonstrou como fazer uma alteração no site de acordo com a hora do dia usando a API Temporal e color-mix(). Já disse o suficiente, isso é simplesmente incrível (como os papéis de parede dinâmicos do macOS).

Uma correção para CSS sem margens

David Bushell nos mostrou como corrigir CSS full-bleed . Ou seja, como fazer algo abranger toda a janela de visualização horizontal ( sem qualquer overflow – essa é a parte complicada! ) apesar de estar aninhado dentro de outro elemento. Adoro ver problemas antigos sendo resolvidos com CSS moderno (dica: são unidades de consulta de contêiner).

E se isso ainda não for legal o suficiente, Temani Afif recentemente compartilhou outra técnica de breakout aqui mesmo no CSS-Tricks que usa a nova propriedade border-shape.

Uma correção para CSS

Você não gostaria de viajar no tempo e mudar algumas coisas? Todos nós fazemos. Na verdade, o Grupo de Trabalho CSS lista algumas das coisas que mudaria no CSS .

E é por isso que Declan Chidlow criou FixCSS , que… bem … corrige CSS de acordo com isso. Agora podemos finalmente trocar border-radius (o Ethan Tremblay do CSS) por corner-radius. Está tudo bem com o mundo novamente.

Como melhorar a personalização <select>

Jake Archibald demonstrou como melhorar a UX de <select>s personalizável, abordando alguns problemas relacionados ao dimensionamento. É uma leitura obrigatória para qualquer pessoa que esteja pensando em usar <select> personalizável.

35 novos recursos da plataforma web

Por “novo” quero dizer qualquer coisa, desde ainda não totalmente suportado até lançamento recente ou próximo. De qualquer forma, aqui estão Bramus e Una Kravets no Google I/O 2026 com 35 recursos da plataforma web dos quais você talvez ainda não tenha ouvido falar ou dos quais queira ser lembrado:

Novos recursos e atualizações da plataforma web

• Cromo 150
  • AccentColor e AccentColorText (agora linha de base)
  • <image> suporte para light-dark() (não Suporte para Safari)
  • Separados por vírgula consultas de contêiner (sem suporte para Safari)
  • background-clip: border-area (sem suporte para Firefox)
  • Arredondamento de canto para polygon() (sem suporte para Safari ou Firefox)
  • Animável zoom (sem suporte para Safari ou Firefox)
  • text-fit (sem suporte para Safari ou Firefox)
  • flex-wrap: balance (sem suporte para Safari ou Firefox)
  • named-feature() (sem suporte para Safari ou Firefox)
  • O atributo focusgroup (sem suporte para Safari ou Firefox)
  • overscroll-behavior: chain (encadeamento sem overscroll, sem suporte para Safari ou Firefox)

Que semanas! Vejo você em mais dois!

O que é! Importante #15: CSS com reconhecimento de limites, CSS baseado em tempo, CSS completo e muito mais originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.