Publicado em 6 de março de 2025
Em 25 de fevereiro, o Chrome publicou uma Intent To Ship para @function e recebeu feedback solicitando uma fase de experimentação mais longa. Embora a fase de experimentação geral não tenha sido curta, houve algumas mudanças recentes nas especificações que merecem mais tempo de experimentação.
Também esperamos que essa fase de experimentação estendida gere mais testes na comunidade.
Chamada para experimentar
Agora é hora de fazer o download de uma cópia do Canary, ativar os recursos experimentais da plataforma da Web, começar a testar o CSS @function e relatar todos os bugs encontrados. Agora temos tempo para experimentar mais, então aproveitemos isso.
Para ajudar você a começar, confira algumas dicas:
- Pontus Horn: variantes de botões
- Nils Riedemann - escalas de fonte
- Bramus: uma função de luz escura para mais de uma cor
O CSS a seguir demonstra um exemplo conciso, mas útil:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
Quer saber mais sobre @function?
Bramus tem um ótimo conjunto de demonstrações, e o CSS Tricks também não demorou para entrar na brincadeira.
Argumentos?! Valores de retorno?! Vale a pena cuspir o café! Tive que aprender mais sobre eles e, felizmente, a especificação foi escrita de forma clara.