Contexte historique
En 2008, le projet CSS Zen Garden montrait qu’une même page HTML pouvait être transformée en dizaines d’apparences uniquement grâce à des feuilles de style. À l’époque, l’absence de variables CSS, de grilles ou de flexbox obligeait les développeurs à recourir à des hacks, à des images générées côté serveur et à des mises en page basées sur des tableaux. Chaque navigateur interprétait les propriétés différemment, ce qui rendait la maintenance coûteuse.
Évolution du CSS natif
Les dernières versions des navigateurs ont introduit les custom properties (variables CSS), le module Grid et le modèle Flexbox. Ces ajouts permettent de décrire des mises en page complexes sans dépendre d’un préprocesseur. Les propriétés manquantes en 2008, comme gap ou min(), sont désormais implémentées de façon homogène, ce qui réduit le besoin de solutions de contournement.
Mise en œuvre sur Firefox.com
Dans le cadre de la refonte du site officiel de Mozilla, le développeur a construit un système de design composé de plus de 70 composants et de 25 modèles de pages. Chaque composant est déclaré comme un bloc Wagtail, ce qui autorise les rédacteurs à assembler des pages sans intervention d’ingénierie. Le site supporte 19 locales, toutes alimentées par la même feuille de style unique.
Le code CSS reste strictement natif : aucune syntaxe SCSS ou LESS n’est utilisée. La seule étape de build consiste à inliner les directives @import via PostCSS, afin d’éviter le chargement séquentiel qui pénalise les performances. Le CSS source ne dépend d’aucune transformation pour être valide.
/* Exemple d’inlining @import avec PostCSS */
@import "reset.css";
@import "components/buttons.css";
/* Après inlining, le contenu des deux fichiers est concaténé */
Analyse des implications
Cette réalisation confirme que les navigateurs modernes offrent un niveau de maturité suffisant pour supporter des systèmes de design entièrement basés sur du CSS natif. Le fait de ne plus recourir à un préprocesseur simplifie la chaîne de production : le texte écrit par les designers correspond directement au langage compris par le navigateur. La dépendance résiduelle à PostCSS montre que certaines optimisations (comme l’inlining) restent utiles, mais ne modifient pas la sémantique du CSS.
Pour les équipes qui envisagent de réviser leur pile front‑end, le cas de Firefox.com illustre deux points clés. Premièrement, les propriétés CSS actuelles permettent de remplacer la plupart des fonctions autrefois assurées par des outils externes. Deuxièmement, la séparation entre le système de design (composants, templates) et le contenu (Wagtail) reste viable, même sans compilation complexe.
En conclusion, la refonte de Firefox.com constitue une preuve concrète que le rêve du CSS Zen Garden est désormais réalisable à l’échelle de production, grâce à l’évolution du standard et à une architecture de design centrée sur le CSS natif.
