Importante #14: Decorações de lacunas, random(), dimensionamento de campo e muito mais

I know you’re busy, so for What’s !important #14 , I’ll be sprinting through what’s been a stacked couple of weeks despite few browser updates. Do CSS Quake ao CSS Gap Decorations, você não pode perder este!

Hyperblam: Faça música com HTML

Heydon Pickering created Hyperblam , a HTML-driven implementation of the Web Audio API that uses Web Components to create music without JavaScript.

Ok, não muito CSS, mas ainda assim muito legal!

Terremoto CSS

Powered by PolyCSS , Layoutit created CSS Quake , a port of the groundbreaking 1996 game, Quake.

Very CSS-y, and a perfect companion to CSS DOOM , which also shipped recently.

Um mergulho de cabeça nas decorações CSS Gap

Temani Afif nos mostrou como estilizar decorações de lacunas . As you might’ve guessed, ‘gaps’ are the spaces that gaps take up when using flexbox, grid layout, or multi-column layout. Para ser honesto, as decorações de lacunas já demoram muito para chegar, mas, como Temani demonstrou, na verdade há muito que podemos fazer com elas.

CSS random() experimentos

Polypane demonstrou seus CSS random() experimentos . Se você está se perguntando sobre essa indescritível função CSS, que ainda não é suportada por nenhum navegador além do Safari, Polypane criou um efeito bokeh, algumas pétalas caindo, uma pilha desordenada de polaroids, um poema, uma aurora animada e muito mais. É um mergulho bastante profundo que aparentemente nos mostra tudo o que podemos fazer com random().

Como fazer <select>s fluido

Manuel Matuzović showed us how to set the width of <select>s to the width of their selected <option> com field-sizing (field-sizing: content, para ser mais específico), que se tornou a linha de base quando o Firefox 152 foi lançado há duas semanas.

Outra coisa a observar é que se usarmos o atributo size (por exemplo, <select size="3">), que transforma o <select> em uma caixa de lista rolável mostrando três <option>s por padrão, field-sizing: content substitui isso para mostrar todos os <option>s.

O novo padrão para temas CSS

Una Kravets explicou como funcionam os temas CSS modernos . Temos visto muito disso ultimamente, mas Una fala sobre ###CODE_9fc33f2eb4c2be84f9b39cecdeb5cb06###, ###CODE_91d2b094d484cf231185ea4c9294cd81###, ###CODE_e8eab6cb8ee3a1e11565ae91bc74f9dc###, and @container style(), all of which are also Baseline as of recently, so this is a great oportunidade de ver como todos esses recursos funcionam juntos.

Speaking of which, I wrote up a thing about contrast-color() after exploring it for the first time.

Por que os sites não precisam funcionar da mesma maneira para todos

Bramus explicou por que os sites não precisam funcionar da mesma maneira para todos . Por exemplo, diferentes plataformas têm diferentes modalidades de entrada primária e, mesmo assim, os usuários podem ter uma secundária de sua preferência conectada, e é por isso que precisamos abandonar a ideia de tornar os sites idênticos em todas as plataformas.

He also talks about three incredibly interesting web platform features — interest invokers, overscroll actions, and the Document Picture-in-Picture API — that must function differently depending on the platform.

Marina Aísa no Web Engines Hackfest

Enquanto todo mundo ainda falava sobre CSS Day ( incluindo eu ), Web Engines Hackfest estava começando em A Coruña, Galiza. O que adoro nesses eventos (além das palestras, é claro) são os participantes falando sobre as palestras, as pessoas que conheceram, o que mais fizeram enquanto estiveram na cidade e assim por diante.

Here’s Marina Aísa documenting the two-day event , starting off with a hike in a Galician forest, then two days of talks about web engines and web standards (interspersed with some wall climbing), then finally some discussion about what browsers can do to help improve web accessibility:

Esta semana estou na Corunha, na Galiza, participando do @webengineshackfest.org 👩‍💻 onde estamos discutindo o futuro dos motores e padrões da web.

Dado o impacto potencial no futuro desenvolvimento web, pensei que seria útil compartilhar algumas de minhas anotações pessoais do evento. ✍️👇

— Marina Aísa ( @marinaaisa.com ) 14:31 · 16 de junho de 2026

Meta pessoal para o próximo ano: participar de um desses eventos!

Novo recurso da plataforma web s

• Firefox 152
  • field-sizing (agora linha de base)

Sim, tem sido algumas semanas chatas para navegadores estáveis, mas há algumas coisas realmente interessantes por vir. Fique de olho em nossos Quick Hits , porque é onde compartilho essas atualizações da plataforma web primeiro (além daquelas de navegadores em desenvolvimento). Na verdade, o Chrome 150 será lançado ainda hoje.

Nos vemos em duas semanas!

O que é !importante #14: Decorações de lacunas, random(), tamanho de campo e muito mais originalmente escrito à mão e publicado com amor em Truques CSS . Você realmente deveria receber o boletim informativo também.