Portfolio Stachowiak Vivian

Functions in CSS?!

calendar_today Mars 2025

folder Veille Développement Web

link CSS-Tricks

"Une révolution pour le développement CSS qui pourrait changer la manière dont on code le style"

Depuis toujours, CSS est un langage déclaratif centré sur la mise en forme. Mais une nouveauté bouleversante fait son apparition : les fonctions personnalisées en CSS !

Introduction

Depuis toujours, CSS est un langage déclaratif centré sur la mise en forme. Mais une nouveauté bouleversante fait son apparition : les fonctions personnalisées en CSS ! Aujourd'hui, elles sont encore expérimentales (disponibles uniquement dans Chrome Canary avec un drapeau activé), mais elles pourraient bien changer la manière dont on écrit du CSS dans les prochaines années.

Qu'est-ce qu'une fonction en CSS ?

Une fonction CSS permet de revenir un résultat dynamique, un peu comme une fonction en JavaScript ou un mixin en Sass, mais en pur CSS. On utilise la règle @function, un nom personnalisé commençant par --, et des arguments si besoin.

Exemple simple :

@function --dashed-border(--color) {
  result: 2px dashed var(--color);
}

div {
  border: --dashed-border(blue); /* Affiche : 2px dashed blue */
}

Capacités des fonctions CSS

Principales fonctionnalités

Prendre des arguments (avec ou sans valeur par défaut)
Retourner des résultats dynamiques
Être typées (longueur, couleur, pourcentage, etc.)
Faire des calculs complexes
Réagir à des conditions comme des media queries

Exemples concrets

Espacement personnalisé

@function --custom-spacing(--a <length>) {
  result: calc(var(--a) * 2);
}

Fonction avec valeur par défaut

@function --dashed-border(--color: red) {
  result: 2px dashed var(--color);
}

Fonction responsive

@function --font-size-responsive() {
  result: 16px;
  @media (width > 1000px) {
    result: 20px;
  }
}

Impact sur le Développement Web

Plus besoin de bricoler avec JavaScript ou des préprocesseurs
Réutilisable
Adaptation du style selon les besoins
Code plus clair, plus propre, plus maintenable

Compétences et technologies en lien

CSS Front-end Web Development Responsive Design Browser API

Conclusion

Une évolution significative

Avec l'introduction des fonctions, CSS continue son évolution vers un langage plus puissant et flexible. Bien que cette fonctionnalité soit encore expérimentale, elle illustre la direction que prend le développement web moderne : plus de puissance côté client, moins de dépendance aux préprocesseurs, et une séparation plus claire des préoccupations.

Perspectives futures

Après les fonctions, la prochaine étape sera sûrement les mixins CSS natifs, permettant de réutiliser non plus seulement des valeurs, mais des blocs entiers de styles. Nous pourrions bientôt avoir un CSS où l'on peut créer ses propres blocs de design réutilisables, sans JavaScript ni préprocesseur!

"CSS entre dans une nouvelle ère plus puissante et dynamique. Avec les fonctions CSS, on se rapproche d'un vrai langage de programmation côté design."

Consulter l'article original sur CSS-Tricks