Revue du livre CSS2: Pratique du design web

Comme promis, je me suis empressé de lire le livre de Raphaël pour savoir s’il faut le conseiller ou non (les plus pressés peuvent aller l’acheter les yeux fermés).

Tout d’abord, j’ai eu un peu de mal à le trouver ce premier jour de sortie. J’ai fait un tour à la fnac mais apparemment ils ne l’avaient pas encore sorti des cartons. Je vais donc dans une autre librairie mais là, même pas en stock. J’ai finalement réussi à me le procurer chez Virgin dans un rayon informatique aussi peu fourni que bien caché.

L’ouvrage fait un peu plus de 200 pages, la mise en page est claire et le format assez grand pour rendre agréable la lecture. La couverture est souple et le papier de bonne qualité, même si ma page 172 est étrangement froissée (scandale!).

Tout commence par la préface d’Élie Sloïm qui permet de situer le couple CSS/XHTML dans une démarche qualitative pour le web. Sans en faire des technologies «miracles», Élie explique bien comment elles font évoluer la conception Web.

Le livre en lui-même se divise en quatre parties:

• Standards HTML et XHTML, quelle différence ?
• Les feuilles de style CSS
• Travaux pratiques
• Mise en oeuvre dans un projet professionnel

Raphaël adopte un cheminement progressif et clairement pratique. Le lecteur est doucement amené vers la réalisation d’une page web complète qu’il réussira avec succès en suivant les chapitres. Il faut noter que la couleur est annoncée dès le début, pas question de présenter de manière théorique les CSS, ici les différents problèmes de compatibilité sont pointés et des solutions pragmatiques sont proposées.

Standards HTML et XHTML, quelle différence ?

Cette première partie plonge le lecteur dans l’univers des standards, essayant de le détacher petit à petit des mauvaises pratiques. L’enjeu de la standardisation est bien expliqué et on comprend rapidement qu’une bonne structure est nécessaire pour la suite. Le sujet des DTD est rapidement abordé pour permettre de créer rapidement un premier document XHTML. Seul point manquant, le problème lié au prologue XML, mais comme annoncé au début, le livre n’est pas consacré à XHTML. Ce chapitre introduit le fil conducteur des deux chapitres suivants: la création d’une première page web (consacrée à l’Alsace) à l’aide de XHTML et CSS.

Les feuilles de style CSS

C’est dans ce deuxième chapitre qu’il est vraiment question de CSS. Les bases de la syntaxe sont posées, explicitant par la même occasion des termes comme «sélecteur» ou «règle CSS». Il se poursuit par ce qui intéresse les lecteurs débutants, c’est-à-dire les propriétés principales de mise en forme que sont les couleurs, la typographie, les bordures, les couleurs et images d’arrière-plan et enfin le positionnement. On remarquera un passage intéressant sur le choix des couleurs (dommage que le livre soit en noir et blanc, aveu même de l’auteur) et la reprise d’un billet déjà paru sur le blog Alsacréations concernant les maladies exotiques des CSS. Il ne faudra pas rater non plus l’explication sur les différents modèles de boîte pour comprendre les différences qui peuvent survenir. Je pense que ce chapitre aurait pu aborder le problème de fusion des marges ou bien le concept de cascade (fondamental) même si l’idée d’héritage est égrainée tout au long du livre.

Travaux pratiques

Les exercices proposés permettent d’utiliser les connaissances fraîchement acquises dans des situations fréquemment rencontrées:

• centrage
• préchargement d’images
• lettrines
• effet au survol (rollover)
• menu de navigation (qui permettent d’aborder le problème de remplacement par

des images par la même occasion)

• les blocs aux coins arrondis.

Ces quelques exercices bien choisis permettent d’utiliser beaucoup de propriétés et de confronter le lecteur à des problématiques qu’il devra résoudre dans l’esprit des CSS. La manière de concevoir une page avec des CSS diffère radicalement d’une mise en page à base de tableaux. Le lecteur doit donc se livrer à une petite gymnastique intellectuelle pour s’approprier cette nouvelle façon de faire. Heureusement, les exemples de code largement disséqués permettent de reproduire les exemples sans problème.

Mise en oeuvre dans un projet professionnel

La dernière partie abandonne les petits exemples pour s’attaquer à une mise en page plus professionnelle. Et cela commence par le découpage des tâches rendu possible par XHTML et CSS qui est suivi du choix des outils (”les puristes ne se contentent pas de Notepad!” NDLA). Il s’agit là de reproduire la page qui sert de vitrine au livre. Si les chapitres précédent ont été assimilé, aucun doute que cet ultime exercice ne posera aucun problème. Raphaël finit par l’évocation des sélecteurs de style (en Javascript ou PHP) ainsi que les feuilles de style pour l’impression.

Les (nombreuses) dernières pages contiennent des annexes bien fournies:

• référence du langage CSS
• quelques modèles de mise en page
• une liste de sites conformes (issue du forum Alsacréations)
• une liste de sites web (j’y suis!)
• une grille complète sur les compatibilités
• une webographie

Si je devais résumer, je dirais que Raphaël réussit à amener des concepts complexes de CSS d’une manière progressive et ludique (avec des exercices et quelques quizz). On retrouve bien le tonalité du blog Alsacréation, c’est à dire du pragmatisme et de la pratique, ponctuée de rappels des bonnes pratiques. Pour le débutant, cet ouvrage lui permettra de se mettre au couple XHTML/CSS en évitant les pièges récurrents et en cernant les problèmes liés au fait que ces technologies arrivent à peine au stade industriel. Pour ceux qui sont déjà convaincus, il permettra d’avoir toujours sous la main des exemples de codes bien expliqués et des tableaux de référence. C’est un excellent livre que je recommande.