Reconstruire Firefox.com avec CSS natif

Mozilla et Lincoln Loop ont reconstruit Firefox.com en utilisant un CSS natif moderne, sans préprocesseurs, réalisant ainsi le rêve de CSS Zen Garden de 2008. À l'époque, les propriétés CSS limitées forçaient la dépendance vers des hacks, un traitement côté serveur, et des mises en page basées sur des tableaux en raison d'un rendu navigateur inconsistent.

Aujourd'hui, les propriétés personnalisées, Grid et Flexbox ont comblé cette lacune, permettant des systèmes de design propres et réutilisables. La reconstruction de Firefox.com inclut plus de 70 composants et 25 modèles de page en tant que composants Wagtail, prenant en charge 19 locales, avec des équipes de contenu assemblant des pages sans aide technique.

PostCSS est utilisé uniquement en production pour inline les déclarations @import à cause de problèmes de performance, tandis que le CSS écrit est du CSS natif pur, n'ayant besoin d'aucune étape de build pour être valide.

Le projet affirme que le navigateur parle maintenant le langage que les designers écrivent, réalisant une vision de deux décennies. Les influences clés incluent Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly, et Eric Meyer, dont le travail a façonné la pensée CSS moderne. La valeur centrale reste : des systèmes de design où le bon choix est le facile, et l'intention du designer s'écoule directement vers la production.

Entités clés :

Entreprises : Mozilla, Lincoln Loop

Personnes : Dave Shea, Nicole Sullivan, Rachel Andrew, Jen Simmons, Chris Coyier, Kasey Kelly, Eric Meyer, Jo Sprague

FAQ :

Q : Que signifie 'pas de préprocesseurs' dans le contexte de la reconstruction de Firefox.com ?

R : Le CSS écrit est un CSS natif pur que les navigateurs comprennent directement ; PostCSS est utilisé uniquement en production pour inline les déclarations @import pour des raisons de performance, et non pour transformer le langage de style principal.