Importante #13: @function, alpha(), CSS Wordle e muito mais

Funções CSS, a função alpha(), Grid Lanes, algumas coisas sobre <dialog> que você talvez não saiba, CSS Wordle e muito mais – isto é O que é !importante agora.

Funções CSS, habilmente explicadas

Jane Ori explicou habilmente como funcionam as funções CSS . @function será provavelmente será o maior recurso CSS para provavelmente se tornar a linha de base este ano, então definitivamente achei um pouco intimidante no início. Isto é, até eu ler o passo a passo passo a passo de Jane, que facilita muito para você.

Além disso, Declan Chidlow escreveu nossa @function documentação , que você pode querer marcar para rápida referência no futuro.

A função alpha()

Falando em funções, a função alpha() me pegou de surpresa. Em primeiro lugar, porque não tinha ouvido falar e, em segundo lugar, porque… porquê? Já podemos mudar o canal alfa:

/* This */
color: alpha(from var(--color) / 0.5);

/* Instead of this */
color: oklch(from var(--color) l c h / 0.5);

Bem, este comentário de Jason Leo resume tudo. Em primeiro lugar, significa que não precisaremos codificar valores de cores quando já tivermos variáveis ​​CSS. Durante anos, contornei isso armazenando apenas os valores reais em variáveis ​​CSS, mas ter que envolvê-los na função color todas as vezes é realmente monótono:

/* Just the values */
--color: 0.65 0.23 230;

/* Then use them flexibly */
color: oklch(var(--color));
color: oklch(var(--color) / 0.5);

Mas é melhor que isso (na minha opinião):

/* Function and values */
--color: oklch(0.65 0.23 230);

/* Delightful */
color: var(--color);

/* Delightless */
color: oklch(from var(--color) l c h / 0.5);

alpha() oferece o melhor dos dois mundos:

/* Less delightless */
color: alpha(from var(--color) / 0.5);

Em segundo lugar, o formato da cor é realmente irrelevante neste contexto, então alpha(from var(--color) / 0.5) comunica a intenção mais claramente do que oklch(from var(--color) l c h / 0.5). Também torna a declaração inerentemente mais curta.

Agradecemos a Adam Argyle por trazer alpha() .

O guia de campo para faixas de grade

O WebKit lançou o Guia de campo para pistas de grade (anteriormente conhecido como layout de alvenaria CSS). Se você já leu um de nossos Guias de truques de CSS , é semelhante a isso ( suas palavras – apenas dizendo ‘ ). É uma introdução tranquila com uma variedade de barebones e demonstrações do mundo real.

Atualizações de qualidade de vida para <dialog>

Una Kravets falou sobre duas atualizações de qualidade de vida para <dialog> — o novo closedby atributo, que ainda não é suportado pelo Safari, e overscroll-behavior: contain. Há algumas pepitas nos comentários também, incluindo uma dica sobre scrollbar-gutter: stable.

✅ Belo lil btn em escala reduzida
🙈 Mudança de layout porque a barra de rolagem desaparece
🙈 Nenhuma luz dispensa

Esses problemas de UX podem ser facilmente resolvidos com:

– fechado por = “qualquer”
– comportamento de rolagem: contém

[imagem ou incorporação]

— Una Kravets ( @una.im ) 13:28 · 3 de junho de 2026

Além disso, Chris Coyier nos mostrou como animar <dialog>s , o que acho que muitos de nós já sabemos fazer, mas é tão fácil de bagunçar. Eu tenho que pesquisar no Google todas as vezes (são aqueles @starting-styles bipando).

O que aconteceu no CSS Day 2026?

CSS Day , a conferência anual da comunidade CSS, foi realizada em Amsterdã nos dias 11 e 12 deste mês (ou seja, dois dias, tecnicamente). Embora não tenha havido transmissão ao vivo este ano, as gravações estarão disponíveis no final de junho. Até então, confira CSS Day no Bluesky bem como o #CSSDay Bluesky feed para ver o que aconteceu no palco, o que aconteceu nos bastidores e até mesmo os slides de algumas das palestras.

E não, não houve nenhum lança-chamas este ano, mas também não foi livre de DOOM (se você sabe, você sabe).

CSS Wordle

Que semana tem sido, especialmente com tudo o que aconteceu no CSS Day, mas se você tiver alguma energia sobrando, eu recomendo fortemente uma rodada (ou várias rodadas) de Sunkanmi Fafowora CSS Wordle , que eu tenho literalmente obcecado pela última semana.

Novos recursos e atualizações da plataforma web

• Cromo 149
  • Decorações de lacunas (agora linha de base)
  • image-rendering: crisp-edges (agora linha de base)
  • rect() e xywh() para shape-outside (agora Linha de base)
  • path() e shape() para shape-outside (sem Safari ou Suporte para Firefox)

Até a próxima!

O que é! Importante #13: @function, alpha(), CSS Wordle e mais originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.