Alors, de quoi s'agit-il ?

Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Pour commencer, regardez quelques designs présents dans la liste. Cliquer sur l’un d’eux appliquera son style sur cette page. Le code HTML reste le même, seule la feuille de style externe change. Oui, vraiment !

Les CSS permettent un contrôle total de la mise en forme d’un document hypertexte. La seule manière de le démontrer, en stimulant les gens, est de présenter ce que les créatifs peuvent concrêtement réaliser quand on leur confie les rennes. Les concepteurs et les développeurs ont contribué ensemble à la beauté du web, on peut toujours aller plus loin.

Participation

Notre objectif a toujours été de promouvoir les designs de qualité. Vous allez modifier cette page, de solides compétences en CSS sont donc nécessaires. Toutefois les fichiers d’exemple sont suffisamment commentés pour que même les novices en CSS puissent les utiliser comme point de départ. S’il vous plaît, consultez le guide de ressources CSS pour des tutoriaux avancés et des astuces sur le développement CSS.

Vous pouvez modifier la feuille de style comme bon vous semble, mais pas le code HTML. Ceci peut sembler décourageant au début si vous n’avez jamais travaillé de cette manière, mais servez-vous des liens pour en apprendre plus et utilisez les exemples pour vous guider.

Téléchargez les fichiers d’exemple HTML et CSS pour travailler sur une copie locale. Une fois que vous avez fini votre chef d’œuvre (merci de ne pas soumettre de travaux incomplets), publiez votre document CSS sur le serveur web de votre choix. Envoyez-nous un lien vers une archive contenant ce fichier et ses ressources associées, et si nous la sélectionnons, elle sera hébergée sur notre propre serveur.

Avantages

Pourquoi participer ? Pour la reconnaissance, l’inspiration et pour créer une ressource que nous pouvons tous utiliser pour promouvoir CSS. Ce site sert autant d’inspiration pour les travailleurs du web en exercice, d’outil d’apprentissage pour ceux en devenir que de gallerie des futures techniques que nous pouvons tous attendre.

Conditions

Si possible, nous aimerions surtout voir l’utilisation de CSS 1 et 2. CSS 3 et 4 devraient être uniquement limités aux techniques largement implémentées, sinon des alternatives efficaces devraient être prévues. Le Jardin Zen CSS est basé sur une approche pragmatique et fonctionnelle des CSS et non sur les dernières pratiques visibles par seulement 2 % des internautes. Notre seul vrai critère est que votre CSS soit valide.

Heureusement, concevoir de cette manière démontre comment les différents navigateurs ont maintenant bien implémenté les CSS. En respectant les conventions, vous devriez constater des résultats assez cohérents sur la plupart des navigateurs modernes. En raison du nombre important d’agents utilisateurs sur le web, surtout avec la prise en compte du mobile, les rendus ne peuvent pas être toujours précis au pixel près sur toutes les plateformes. Pas de soucis, mais faites autant de tests que possible. Votre design doit au moins être compatible avec IE 9 (et versions ultérieures) et avec les dernières versions des navigateurs Chrome, Firefox, iOS et Android (utilisés par plus de 90 % du marché).

Nous vous demandons de soumettre des créations originales, merci de respecter les droits d’auteur. S’il vous plaît, minimisez le contenu répréhensible et essayez d’inclure dans votre travail des thèmes uniques et intéressants. Nous n’avons pas besoin d’un autre design utilisant le thème du jardin.

Ceci est aussi bien un exercice d’apprentissage que de démonstration. Vous gardez les droits d’auteur de vos graphismes (à quelques exceptions près, cf. « submission guidelines »), mais nous vous demandons de publier votre fichier CSS sous une license Creative Commons identique à celle de ce site pour que d’autres personnes puissent apprendre de votre travail.

Par Dave Shea. Bande passante grâcieusement offerte par mediatemple. Le livre « The Zen of CSS Design: Visual Enlightenment for the Web » est maintenant disponible.