Fecha de publicación: 6 de marzo de 2025
El 25 de febrero, Chrome publicó un Intento de lanzamiento para @function y recibió comentarios que solicitaban una fase de experimentación más larga. Si bien la fase de experimentación general no fue breve, hubo algunos cambios recientes en las especificaciones que tuvieron un impacto importante y que merecían más tiempo de experimentación.
También esperamos que esta fase de experimentación extendida genere más experimentos comunitarios.
Llamada al experimento
Es hora de obtener una copia de Canary, habilitar las funciones experimentales de la plataforma web, comenzar a probar CSS @function y informar cualquier error que encuentres. Ahora tenemos tiempo para experimentar más, deberíamos aprovecharlo.
Para ayudarte a comenzar, aquí tienes algunas exploraciones:
- Pontus Horn: variantes de botones
- Nils Riedemann: Escalas de fuente
- Bramus: Una función de modo oscuro claro para más que el color
En el siguiente CSS, se muestra un ejemplo conciso pero útil:
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
¿Quieres obtener más información sobre @function?
Bramus tiene un excelente conjunto de demostraciones y CSS Tricks tampoco tardó en sumarse a la emoción.
¿Argumentos? ¿Valores de retorno? Eso vale la pena que escupa mi café. Tuve que obtener más información sobre ellos y, por suerte, la especificación está escrita con claridad.