Data di pubblicazione: 6 marzo 2025
Il 25 febbraio Chrome ha pubblicato un Intent To Ship per @function e ha ricevuto feedback che richiedevano una fase di sperimentazione più lunga. Sebbene la fase di sperimentazione complessiva non sia stata breve, di recente sono state apportate alcune modifiche significative alle specifiche che meritavano un periodo di sperimentazione più lungo.
Siamo anche fiduciosi ed entusiasti che questa fase di sperimentazione estesa possa portare a ulteriori esperimenti nella community.
Chiamata all'esperimento
È il momento di scaricare una copia di Canary, attivare le funzionalità sperimentali della piattaforma web, iniziare a testare CSS @function e segnalare eventuali bug. Ora abbiamo più tempo per fare esperimenti, dobbiamo sfruttarlo.
Per aiutarti a iniziare, ecco alcune esplorazioni:
- Pontus Horn - button variants
- Nils Riedemann - scale dei caratteri
- Bramus: una funzione di luce scura per più di un colore
Il seguente CSS mostra un esempio conciso, ma utile:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
Vuoi saperne di più su @function?
Bramus ha una grande raccolta di demo e CSS Tricks non ha tardato a cogliere l'entusiasmo.
Argomenti?! Valori restituiti?! Per questo vale la pena sputare il caffè. Ho dovuto scoprire di più su queste funzionalità e, fortunatamente, le specifiche sono scritte in modo chiaro.