Le projet CSS Zen Garden

• CSS Zen Garden est un projet qui met en valeur la beauté du design basé sur CSS
• Le HTML reste identique, et il est possible d’expérimenter différents designs en ne modifiant que le fichier CSS externe
• Les participants peuvent montrer la puissance du web design avec CSS, inspirer les autres et fournir une ressource d’apprentissage
• Il faut principalement utiliser CSS 1 & 2, et n’utiliser CSS 3 & 4 que de manière limitée
• Les designs soumis doivent produire un rendu cohérent sur différents navigateurs et fonctionner au minimum sur IE9+ ainsi que sur les navigateurs récents

---

L’importance de CSS Zen Garden

• CSS Zen Garden est un projet destiné à montrer la puissance de CSS et à inspirer les designers et les développeurs
• Le HTML reste identique, et il est possible d’expérimenter différents designs en ne modifiant que le fichier CSS externe
• Ce projet montre les possibilités de CSS et met en avant la beauté du web design

Comment participer

• Un design visuel fort et de bonnes compétences en CSS sont nécessaires, mais les débutants peuvent aussi commencer à partir des fichiers d’exemple
• La feuille de style peut être modifiée librement, mais le HTML ne peut pas être changé
• Le travail finalisé doit être mis en ligne sur un serveur web, puis son lien doit être soumis

Les avantages de la participation

• Cela peut accroître la visibilité, inspirer les autres et servir de ressource montrant les possibilités remarquables de CSS
• C’est un site qui peut inspirer les web designers et les développeurs, et servir de support d’apprentissage

Exigences

• Il faut principalement utiliser CSS 1 & 2, et n’utiliser CSS 3 & 4 que de manière limitée
• Le rendu doit être cohérent sur différents navigateurs et fonctionner au minimum sur IE9+ ainsi que sur les navigateurs récents
• Les œuvres soumises doivent être originales et respecter le droit d’auteur

Droit d’auteur et licence

• Les graphismes soumis conservent leur droit d’auteur, et le CSS doit être fourni sous licence Creative Commons
• Le CSS doit être partagé afin que d’autres puissent l’étudier

[GN⁺]

Avis sur Hacker News

• Avant l’arrivée de CSS, les développeurs web abusaient des tableaux pour créer des grilles et réalisaient les mises en page en découpant des images puis en les plaçant dans des tableaux

  • Il y avait une forte résistance à CSS, et beaucoup de développeurs refusaient d’apprendre CSS
  • Il existait l’idée fausse que CSS ne permettait que des designs « ennuyeux et en forme de boîte »
  • Dave Shea a dissipé ces idées reçues en montrant les possibilités de CSS avec CSS Zen Garden
  • Il a mis fin au débat en prouvant qu’on pouvait créer de superbes designs avec CSS

• Ce site est ancien, mais c’était une bonne chose au sens positif

  • Au début des années 2000, il a été l’un des déclencheurs qui m’ont fait quitter Microsoft ASP.NET pour développer des applications sur Linux
  • Alex Russell apportait des informations nouvelles via Dojo JS, rappelant l’importance de l’actualité technique
  • J’utilisais une boîte à outils composée de Web.py, HTML, JS et CSS, puis jQuery, Backbone, Underscore, React et TS sont arrivés ensuite

• Le point essentiel de CSS Zen Garden était de montrer qu’en tirant au maximum parti d’un HTML sémantique, on pouvait faire fonctionner la présentation et le contenu de manière totalement indépendante

  • Il était possible de réaliser le design dans les limites de CSS
  • Pour modifier le style, il fallait souvent changer directement le DOM
  • Il fallait mêler, au niveau du HTML et du Javascript, les décisions liées à la présentation et à la structure du contenu

• En tant que personne ayant appris CSS grâce à Zen Garden et Eric Meyer, les outils CSS modernes comme Tailwind ressemblent à un anti-pattern

• C’était une lumière dans l’âge sombre de Tailwind et du CSS-in-JS

  • Il est difficile de prendre conscience aujourd’hui de l’importance qu’a eue CSS Zen Garden il y a 20 ans

• C’est ancien, mais c’est du bon

  • Cela a servi de base pour enseigner le web design à des lycéens défavorisés
  • Les élèves devaient expliquer CSS lors de concours de web design, et beaucoup ont gagné des ordinateurs de bureau
  • J’ai envoyé des questions à Dave Shea, Eric Meyer, Andy Budd et d’autres, et j’ai reçu leur aide

• J’ai soumis deux designs, et on me demande encore de réutiliser ce CSS

• Ce site a eu une grande influence à l’époque

  • On pouvait soumettre du CSS et des images pour le même contenu HTML
  • Certains exemples de design étaient particulièrement impressionnants

• Que de souvenirs… J’adorais CSS Zen Garden, mais cela relevait de la philosophie d’une époque où l’objectif principal d’un site web était de fournir des documents

  • Un monde plus riche en médias a laissé cette vision derrière lui

• Ravi de voir CSS Zen Garden sur HN

  • Il y a un mécontentement vis-à-vis des « frameworks » CSS comme Tailwind
  • Tailwind permet d’obtenir un résultat « suffisamment correct » sans apprendre réellement comment fonctionne CSS
  • On se retrouve avec du HTML où les classes CSS sont plus nombreuses que le contenu
  • Il y a une tendance à considérer la profondeur et la maîtrise comme optionnelles