Publié le 6 mars 2025
Le 25 février, Chrome a publié une intention de lancement pour @function et a reçu des commentaires demandant une phase d'expérimentation plus longue. Bien que la phase de test globale n'ait pas été courte, des modifications importantes des spécifications ont été apportées récemment. Nous avons donc décidé de prolonger la phase de test.
Nous espérons également que cette phase d'expérimentation prolongée pourra déboucher sur d'autres tests auprès de la communauté.
Appeler le test
Il est temps de vous procurer une copie de Canary, d'activer les fonctionnalités expérimentales de la plate-forme Web, de commencer à tester CSS @function et de signaler les bugs que vous rencontrez. Nous avons maintenant le temps de tester plus longtemps, nous devrions en profiter.
Pour vous aider à démarrer, voici quelques explorations:
- Pontus Horn : variantes de boutons
- Nils Riedemann : échelles de polices
- Bramus : une fonction de luminosité et de contraste pour plus que la couleur
Le code CSS suivant est un exemple concis, mais utile:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
Vous voulez en savoir plus sur @function ?
Bramus propose un excellent ensemble de démonstrations, et CSS Tricks n'a pas tardé à s'enflammer.
Arguments ? Renvoyer des valeurs ? Ça vaut le coup de cracher mon café ! J'ai dû en savoir plus à leur sujet. Heureusement, la spécification est clairement rédigée.