Les feuilles de style CSS

Le parachèvement du module Grid Layout à la fin des années 2010 accomplit le vieux rêve des designers et intégrateurs web, celui d’une grille de mise en page adaptable à l’écran, qui plus est réalisable sans prise de tête, ni moyens détournés. « Le prix à payer est que les spécifications du modèle Grid Layout comptent également parmi les plus fournies et aussi les plus indigestes du langage CSS. » (Avant-propos.)

L’intérêt procuré par Grid Layout et la difficulté à l’aborder justifient un apprentissage par la pratique. C’est précisément ce que propose cet ouvrage-ci : « Ce livre […] ne constitue pas une bible exhaustive sur le thème de Grid Layout, mais il se veut plutôt un guide pratique rempli de multiples exemples, codes et travaux pratiques (TP). » (chapitre 1, Introduction.)

Si, comme annoncé en préambule, la partie théorique n’est pas absolument complète, elle ne se limite pas pour autant au minimum vital. En utilisant aussi bien des repères chiffrés que nommés, l’ouvrage offre au lecteur expérimenté dans l’usage de CSS, mais novice dans celui de Grid Layout, deux moyens de construire et remplir une « grille explicite ».

En abordant la « grille implicite » et les techniques touchant à la fusion et à l’ordonnance, il explique comment dépasser le stade de la grille figée, caractérisée par un nombre d’éléments d’informations fixé a priori, s’écoulant en son sein selon un flux déterminé.

Les ambitions pédagogiques du livre sont atteintes grâce, d’une part, à la grande clarté avec laquelle ces aspects techniques sont exposés et, d’autre part, à la présence de ces fameux « travaux pratiques », très détaillés et s’intéressant à des cas d’utilisation que le lecteur peut être amené à rencontrer en pratique. Le dernier d’entre eux referme l’ouvrage en mettant en œuvre la plupart des techniques qui y sont présentées. Il réalise une galerie parfaitement rectangulaire et sans espaces vides accueillant des photos aux formats divers, sorte de « saint Graal » poursuivi par l’auteur depuis son précédent livre consacré à Flexbox.

Moyen simple et efficace d’organiser sur un support rectangulaire des éléments d’informations, la grille de mise en page est aujourd’hui un outil incontournable du designer.

Née dans le cerveau du graphiste suisse Josef Müller-Brockmann dans les années 1960, elle s’est depuis imposée dans le monde de l’édition. Il n’est donc pas étonnant que l’on ait cherché à l’insérer dans la panoplie du designer de page web dès que l’on s’est intéressé aux moyens de mettre celle-ci en page et en forme.

L’univers du Web a horreur du vide : les travaux de conceptualisation, et plus encore d’implémentation, d’une grille générique adaptable à l’écran tardant à aboutir, des solutions de remplacement ont vu le jour : la génération des mises en page à l’aide de tableaux HTML, technique aussi populaire que contestable, a laissé la place à celle des grilles modulables de frameworks CSS, tels que 960gs ou Bootstrap. Le postulat d’une population homogène d’écrans cibles de 1024 pixels de large – considéré à l’époque comme un standard – sur lequel celles-ci se fondent permet une grande variété de multicolonnages.

La diversification des supports matériels qui suit l’invention du Web mobile en 2007 rend les grilles CSS caduques.

La finalisation de l’ambitieux projet de grille des débuts devient alors plus que jamais nécessaire. Étonnamment, c’est un acteur privé – en l’occurrence Bloomberg –, contraint par des besoins de mise en page de son propre site web, qui apporte le financement nécessaire.

La spécification de Grid Layout voit ainsi enfin le jour et obtient en 2016 le statut de « Candidate Recommendation » (chap. 1, paragraphe 3).

À la date de publication du livre, la faible utilisation de Grid Layout s’explique essentiellement par son absence de prise en charge par Internet Explorer (chap. 12). Avec la disparition de celui-ci de la scène des navigateurs, s’évanouit le dernier obstacle à l’adoption d’une technologie intuitive, souple et économe.

Intuitif

Une grille se composant de pistes (ou Grid Track) (chap. 2 §2), la façon la plus immédiate de la construire consiste à fixer le nombre et la taille de ces dernières à l’aide des propriétés grid-template-rows et grid-template-columns (chap. 3 §1 et chap. 4 §1).

Grid Layout se veut aussi simple que possible dans son utilisation. L’ouvrage nous le démontre avec une présentation théorique (chap. 3 §1, chap. 6 §2 et chap. 11 §3), suivie d’un exemple de mise en œuvre (TP 6 §4), de la propriété grid-template-areas. Celle-ci facilite le passage de l’étape d’élaboration de la maquette à celle de l’intégration, car fondée sur des noms plutôt que sur des nombres.

Les lignes (ou Grid Line) délimitent les pistes (chap. 2 §2). Elles servent à positionner le contenu par l’intermédiaire des propriétés grid-row-start, grid-row-end, grid-column-start et grid-column-end (chap. 3 §3 et chap. 4 §1). La seule petite difficulté posée par cette technique réside dans le fait que le nombre de lignes ne coïncide pas avec celui des pistes, mais lui est supérieur d’une unité, celle désignant chacune des deux lignes situées respectivement après la dernière colonne et la dernière rangée et fermant la grille. Elle peut néanmoins être levée pour des designs simples : les valeurs associées aux propriétés raccourcies grid-row et grid-column (chap. 4 §1) correspondent bien à des numéros de piste et leur intersection définit la cellule (ou Grid Cell) (chap. 2 §2) hôte.

Les lignes, aussi bien que les zones, peuvent être nommées (chap. 6 §1) et l’usage de noms, dans l’un et l’autre cas, rend plus évidente encore l’affectation du contenu.

Souple

Grid Layout offre un modèle de design aussi souple dans son utilisation que simple dans sa conception. Une grille accueille volontiers plus de données que le nombre de ses colonnes et rangées ne le lui permettrait a priori. Le cas échéant, à ces dernières, s’ajoutent de nouvelles pistes dont la taille et la nature sont définies respectivement par les propriétés grid-auto-rows et grid-auto-columns, d’une part, et grid-auto-flow, d’autre part (chap. 3 §1 et chap. 4 §2). Comme l’auteur le remarque fort justement, la définition d’une grille à partir de ces seules propriétés rend cette dernière entièrement extensible dès sa création (chap. 4 §2).

Les risques de désorganisation du contenu que pourrait entraîner le modèle de grille implicite est limité grâce au recours aux lignes négatives. Celles-ci identifient de manière invariante la dernière piste ou celles la précédant d’un nombre donné de positions, quand bien même le nombre de colonnes ou de rangées viendrait à changer. Ainsi, deux valeurs accompagnant une propriété suffisent à étendre un élément de contenu sur toute la longueur ou la largeur d’une grille (chap. 4 §1, TP 2 et TP 3 §3).

La fusion de cellules peut être signifiée plus explicitement avec la propriété span. De la même façon que le système des repères négatifs permet de compter les lignes à rebours, la fusion opérée par span peut se faire dans deux directions opposées (chap. 11 §2).

Conformément à l’algorithme mis en œuvre par Grid Layout, un placement semi-défini peut laisser apparaître des cellules vides au milieu d’une grille (chap. 5 §2). La déclaration grid-auto-flow: dense vient « boucher les trous » en donnant à ces dernières, sur les cellules qui leur succèdent, la priorité pour recevoir le contenu (chap. 5 §1). Ce dernier est alors réordonné par la force des choses. Il peut l’être aussi de manière délibérée avec la propriété order que Grid Layout partage avec son compagnon Flexbox (chap. 9 §2).

Cependant, un exemple original d’application de la valeur dense nous montre que celle-ci améliore l’esthétique d’un tableau sans perturber la logique d’organisation de son contenu (TP 4 §3).

L’alignement général de ce dernier comme de son contenant est géré par des propriétés non spécifiques à Grid Layout spécifiées dans le module CSS Box Alignment Module Level 3 (chap. 10).

Économe

Éléments indispensables autant à la segmentation du contenu qu’à sa lisibilité, les gouttières ne requièrent plus l’usage de techniques acrobatiques telles que les marges négatives, adoptées (au moins jusqu’à la date de publication du livre) par des frameworks CSS parmi les plus réputés (chap. 8 Introduction). Une seule ligne de code permet de les mettre en place depuis l’introduction par le module CSS Box Alignment Module Level 3 de la propriété gap (chap. 8 §1).

Une difficulté demeure, cependant : la taille des gouttières doit être prise en compte dans le calcul des dimensions des pistes. En se rapportant à l’espace resté libre, la nouvelle unité fr (chap. 7 §1) nous épargne heureusement les longs et fastidieux produits en croix auxquels nous aurions, sans elle, été confrontés (chap. 8 §3).

Elle se combine à merveille avec la fonction repeat qui nous évite, de son côté, d’écrire des déclarations de longueur proportionnelle à la dimension de la grille qu’il s’agit de construire (chap. 7 §2).

L’ensemble formé par la fonction repeat et l’unité fr, auxquelles viennent s’ajouter la fonction minmax et les valeurs auto-fit et auto-fill, définissant respectivement des tailles bornées et un nombre de pistes variable (chap. 7 §2), suffit à échafauder une grille répondant au plus contraignant des cahiers des charges (TP 5 §1). Il est même capable de créer un design parfaitement « responsive » sans recourir à la moindre media query (chap. 7 §2) !

La capacité de Grid Layout à gérer les débordements de grille provoqués soit par le nombre, soit par la taille des éléments qui la composent, a pour second avantage, là encore, une économie de code. Une grille implicite définie par un simple grid-auto-flow permet d’organiser le contenu sur une seule ligne flexible (TP 5 §2). La superposition d’éléments trop grands pour la zone commune à laquelle ils sont assignés (chap. 4 §3) est une propriété exploitée par l’auteur pour obtenir un calque (ou « overlay ») (TP 3 §3) sans qu’il soit besoin de positionner explicitement ce dernier hors du flux, avec les effets secondaires que cela suppose (TP 1 §1).

Cerise sur le gâteau de l’expression synthétique, les raccourcis contribuent tout autant à l’écriture de déclarations aussi peu bavardes que riches de potentialités (chap. 3 §2). L’auteur reprend à son propre compte le conseil qu’il nous donne de « rapidement [nous] habituer à la syntaxe raccourcie » (TP 2) en mettant celle-ci en œuvre dans la majorité des travaux pratiques du livre, et plus particulièrement les TP 3 et 7. Concluant la riche série des exemples d’application, ce dernier a un double intérêt : d’une part, il est une remarquable synthèse des diverses techniques abordées dans le livre et, d’autre part, il démontre que, muni d’un outil aussi performant que Grid Layout, on peut avec un code laconique et élégant venir à bout des problèmes les plus complexes (TP 7 §9).

Tout entier consacré à un module spécifique de CSS, le livre se présente comme un ouvrage spécialisé destiné à un public ayant déjà de solides connaissances dans ce langage : les études de cas détaillées ont notamment recours aux media queries, aux pseudo-classes et pseudo-éléments, à la valeur-fonction calc, au compteur, aux instructions SASS et LESS.

Il n’est pas rébarbatif pour autant grâce à un « ton […] volontairement léger » (Avant-propos) et un juste dosage des développements théoriques qu’une sélection pertinente de ressources de différentes natures (chapitre 16) permettra en outre au lecteur d’approfondir.

À cela s’ajoute le fait que le livre – et c’est sans doute là sa plus grande originalité – a pris le parti de privilégier l’explication par l’exemple. Par le biais de travaux pratiques proposant la création d’effets esthétiques, la répartition de composants dans un bloc ou l’organisation de blocs au sein d’une page, l’auteur démontre la grande polyvalence de Flexbox.

Si la construction d’une grille adaptable constitue l’aboutissement des exercices qui l’ont précédée, l’auteur reconnaît que Flexbox doit ici céder le pas à Grid Layout, que ce dernier surpasse dans ce genre de tâches. Il nous en présente les principales propriétés en fin d’ouvrage, ouvrant ainsi la réflexion aux autres possibilités offertes récemment par CSS en matière de positionnement.

Alors qu’il est censé les prendre en charge à parts égales, CSS a toujours mis à notre disposition un ensemble de propriétés bien plus réduit et moins efficace pour la mise en page de la page web que pour sa mise en forme.

Jusqu’à une date récente, le positionnement dans la page web des éléments la constituant n’a pu être obtenu qu’au prix d’un détournement de leur finalité première de techniques telles que les flottants ou les tableaux CSS. Ce qui, à première vue, ressemble à une extension ingénieuse des possibilités du langage devrait plus modestement être considéré comme du « bricolage empirique » (Avant-propos).

Premier pilier d’une refonte complète des méthodes de positionnement en CSS (l’autre étant Grid Layout), Flexbox remise au placard les « bidouillages » historiques et rend aux propriétés sur lesquelles reposaient ces derniers leur fonction propre.

Si la réponse apportée dès 2003 par Safari au problème du positionnement démontre que la nécessité d’une remise à plat des techniques utilisées dans ce domaine est depuis longtemps dans les consciences des acteurs du Web, il aura fallu attendre près de dix années supplémentaires avant de bénéficier d’une solution décrite dans une spécification suffisamment stable (chap. 1 Introduction).

Publié peu de temps après, le livre nous dévoile les grandes lignes de Flexbox tout en privilégiant l’enseignement par l’exemple.

La spécification en condensé

Par les choix retenus quant à son sujet et à la manière de le traiter, le livre suscite déjà notre intérêt : il se focalise sur une technologie particulière ; il l’aborde à travers la résolution de problèmes concrets. Ce constat en deux points étant posé, il convient cependant d’en nuancer le dernier. En effet, l’étude formelle de Flexbox n’est pas pour autant laissée de côté. Plutôt que de limiter celle-ci à quelques rappels et restreindre par conséquent son lectorat aux seuls intégrateurs web ayant déjà des connaissances en la matière, l’auteur a choisi de s’adresser à un public plus large auquel il fournit tous les éléments nécessaires à une correcte prise en main de ce nouvel outil. Commençant par les bases, il décrit le rôle et les valeurs de chacune des propriétés ayant trait à l’alignement, la taille et le classement (chap. 2).

La spécification a néanmoins ses subtilités. En renvoyant leur examen au milieu et à la fin de l’ouvrage, l’auteur, d’une part, évite d’assommer d’entrée son lecteur avec une partie théorique trop imposante et, d’autre part, fidèle à son intention originelle, conserve aux applications pratiques la priorité.

On en apprend à cette occasion davantage sur le calcul des tailles : lorsque celles-ci sont autorisées à grandir (chap. 10 §5) ou à rétrécir (chap. 10 §6) ou quand entrent en conflit leurs différentes définitions (chap. 8 §2).

On comprend mieux également les interactions de Flexbox avec son environnement : contexte d’empilement (chap. 13 §5), animations (chap. 13 §7) et lecteurs d’écran (chap. 13 §8).

Parce qu’à la date de publication du livre, Flexbox faisait encore figure d’innovation, un chapitre consacré à sa compatibilité avec les différents navigateurs web s’imposait. C’est moins le cas aujourd’hui : Flexbox bénéficie désormais d’un large support ; si des bogues persistent, malgré tout, chez Internet Explorer 10 et 11 (chap. 14 §3), ils ont moins d’impact depuis que le navigateur historique de Microsoft ne détient plus qu’une part de marché insignifiante.

Flexbox doit néanmoins être utilisé avec discernement ; en dépit de l’apport indéniable qu’il représente en matière de positionnement, il soutient les autres propriétés (display, position, etc.) dédiées à ce domaine sans les remplacer pour autant (chap. 15 §1).

De plus, « Flexbox est prévu pour des modules dans une dimension, pas vraiment pour des gabarits complets ou des grilles à plusieurs dimensions » (chap. 15 §1). La gestion de ces derniers a été assurée tant bien que mal par Flexbox jusqu’à ce que Grid Layout, qui a été spécifiquement conçu pour cette tâche, prenne le relais. L’auteur nous en présente, dans un chapitre dédié, d’une part, les principales propriétés et, d’autre part, les effets, à partir de quelques exemples (chap. 15 §2). Devenu une technologie mature, Grid Layout s’est depuis vu consacrer un ouvrage entier, signé par le même auteur et publié dans la même collection que ce livre-ci auquel il fait pendant.

Les applications in extenso

Appliqué aux composants récurrents des pages web, Flexbox demeure une arme efficace. L’auteur nous en fait la démonstration en choisissant comme sujet d’étude un menu de navigation (chap. 5) et un formulaire (chap. 9). Nous sommes plus encore convaincus lorsqu’il s’attaque aux problèmes complexes consistant à construire de toutes pièces une fenêtre modale ou un écran affichant successivement les différentes étapes d’une transaction (« tunnel d’achat ») (chap. 13 §9).

Flexbox s’avère également une réponse pertinente à la création d’effets esthétiques. Si le premier exercice du livre, portant sur l’emplacement d’une photo par rapport à son texte environnant (chap. 3) ne constitue qu’une mise en jambes, la création d’une ligne horizontale traversant un titre ou reliant, en pointillés, dans une liste, un item à la valeur qui lui est associée (« points de conduite ») (chap. 13 §9) sont autant de solutions astucieuses à des problèmes classiques. Les propositions constituant ces différents exemples d’application ne se réduisent pas à la partie centrale du code. L’auteur s’attache, en effet, à rendre celles-ci compatibles avec l’ensemble des appareils existants. Il a systématiquement recours au responsive web design, même quand ce dernier ne nécessite pas l’utilisation de Flexbox (chap. 5 §3), au risque, parfois, d’enfreindre la règle du « mobile first » (chap. 3 §3, chap. 5 §6). Il garde également en tête les problèmes d’accessibilité, par exemple en fournissant aux lecteurs d’écran la traduction textuelle d’un logo cliquable (chap. 5 §2).

Plus ambitieux, le projet de construction d’une mosaïque ne déformant pas les photos de dimensions diverses la composant et maintenant entre elles des gouttières d’égale largeur (chap. 7 Intro.) me semble à la fois le plus spectaculaire et le plus abouti. La solution mise en avant a le double intérêt, d’une part, de montrer un cas d’utilisation des propriétés object-fit et object-position (chap. 7 §4), non évoquées jusqu’ici, et, d’autre part, de ne pas être triviale ! Aussi, dans un souci de pédagogie, l’auteur nous présente, dans un premier temps, des tentatives plus intuitives et nous explique, dans la foulée, en quoi elles sont imparfaites (chap. 7 §2 et 3).

La majorité des cas pratiques du livre est néanmoins consacrée au domaine d’application d’origine de Flexbox : l’organisation de la page web. Les plus simples d’entre eux expliquent comment recouvrir cette dernière avec deux blocs d’information (chap. 4 §1) ou une série d’éléments homogènes (chap. 11).

Ils démontrent également la formidable aisance avec laquelle Flexbox vient à bout de problèmes réputés jusque-là presque insolubles : le centrage vertical (chap. 4 §2) ; le Holy Grail (autrement dit, « Saint-Graal »), désignant, pour faire simple, un gabarit à la partie centrale fluide et aux parties latérales de dimensions fixes (chap. 6).

Ces différentes propositions d’agencement rigide servent de base à la construction d’une grille modulable qui est à ces dernières ce que le puzzle reconstitué est aux pièces qui le composent. Elle s’inspire de KNACSS : conçue et mise librement à disposition par l’agence web Alsacréations – dont l’auteur est le fondateur et codirigeant –, elle s’inscrit dans la lignée des grilles basées sur Flexbox, dont les principales sont énumérées dans l’ouvrage (chap. 12 §2). Les techniques entrant en jeu sont décrites une à une, notamment « une astuce devenue un grand classique » pour éviter l’apparition inopportune d’une gouttière à gauche de l’écran, quelle que soit la dimension de celui-ci (chap. 12 §5). Soucieux d’efficacité, l’auteur, comme il l’a d’ailleurs fait dans un précédent exercice (chap. 11 §2), détaille les instructions à soumettre à un préprocesseur CSS afin de faciliter et automatiser l’écriture du code (chap. 12 §6 et 7).

N’oublions pas, cependant, comme il a été dit précédemment, que Flexbox n’est pas l’outil le mieux adapté pour organiser une page web dans sa globalité.

Enfin, la facilité avec laquelle les grilles permettent de réaliser un design fluide est contrebalancée par le fait qu’en reposant sur des classes traduisant des options de mise en page, elles ne respectent pas l’une des règles fondamentales du développement web : la séparation du fond et de la forme. Ceci est néanmoins un autre débat, débordant du cadre de ce livre…

« CSS est à la fois très simple et très compliqué » (Préface).

Chris Coyier, auteur de la préface de l'ouvrage, nous rappelle, en effet, que la simplicité de l'anatomie d'une feuille de styles – une succession de règles composées de déclarations, chacune définie comme un couple propriété/valeur – tend à faire oublier la complexité bien réelle de son fonctionnement.

Au cours des années récentes, profitant, sans doute, de l'impulsion donnée par la restructuration opérée au sein des organes de standardisation (chapitre 1 §3), CSS a connu une évolution impressionnante, s'enrichissant de fonctionnalités nouvelles toujours plus nombreuses et sophistiquées, au point que le W3C a décidé de spécifier ces dernières et de regrouper les spécifications déjà existantes au sein de modules dédiés, venant se substituer à la spécification globale, dont la version 2.1 est l'ultime. À cet égard, de l'aveu même des auteurs du livre, le titre qu'ils ont choisi de lui attribuer est ironique : « CSS 3 n'existe pas » ! (chap. 1 §5.)

L'époque actuelle semble être marquée par un plus strict respect des spécifications qu'au cours de la période qui a précédé, où les implémentations non conformes et les fonctionnalités propriétaires étaient monnaie courante. De fait, on assiste aujourd'hui à une certaine « stabilisation » (chap. 1 §1). Mais celle-ci est, à vrai dire, relative ; en effet, face au rythme soutenu des innovations amenées par les spécificateurs, l'implémentation de ces dernières s'effectue avec plus ou moins de réactivité selon les moteurs de rendu, d'où des prises en charge pouvant différer d'un navigateur à l'autre.

Gérer la compatibilité inter-navigateurs, mais aussi « produire du code lisible et maintenable dans la durée » et « gagner en performance », font partie des tâches que l'intégrateur web doit plus que jamais prendre en compte, dans le cadre d'un projet passé de l'âge de l'artisanat à celui de l'« industrialisation », et devenu, par conséquent, plus complexe (chap. 1 §1).

L'ajout de fonctionnalités spécifiques et l'appui d'outils dédiés ont permis à CSS d'assurer cette transition, de même qu'il a su accompagner l'avènement du « Web mobile » (chap. 1 §1) grâce à l'intégration de modules supplémentaires permettant à la page web de s'adapter aux écrans de taille réduite. Cependant, moyennant l'utilisation de quelques autres propriétés, c'est une complète gestion de l'espace que CSS nous propose de réaliser.

Une stabilisation relative

Offrir une expérience utilisateur équivalente à l'ensemble des internautes est un défi pour le développeur web, quand on considère que les navigateurs dont ces derniers sont équipés ne sont pas tous au même niveau au regard de l'interprétation des spécifications.

Prenant le relais de JavaScript (JS) et de sa bibliothèque Modernizr, la directive @supports permet de vérifier directement dans la feuille de styles si telle propriété est, ou non, prise en charge (chap. 8 §1). Si ce n'est pas le cas, on pourra éventuellement recourir à une solution propriétaire, à l'image des quatre filtres spécifiques à Internet Explorer, dont les auteurs nous présentent non seulement la syntaxe, mais aussi les limites (chap. 4 §2, 6, 7 et chap. 9 §2). Si ces derniers n'hésitent pas, ainsi, à nous conseiller l'usage de propriétés non standardisées en vue de pallier les lacunes des anciennes versions des navigateurs, ils nous dissuadent, au contraire, d'utiliser celles introduites par un éditeur en position dominante (chap. 1 §2) dans le seul but de concurrencer des propriétés déjà existantes (chap. 8 §1).

Tester, à l'inverse, une nouvelle propriété avant sa complète finalisation a été, jusqu'à présent, le rôle des préfixes constructeurs, employés dans leur code par les développeurs web ; mais en raison du mésusage que ces derniers en ont fait, ils sont désormais remis en cause par les navigateurs qui se sont attribués, par l'intermédiaire d'un flag, la charge des tests (chap. 1 §4). On devra néanmoins se contenter de la méthode historique en attendant que l'utilisation de ce dernier se généralise.

Les auteurs ont mis un soin particulier à nous préciser, pour chacune des fonctionnalités décrites dans l'ouvrage, les préfixes constructeurs requis pour que celle-ci fonctionne dans les principaux navigateurs (cinq dédiés aux ordinateurs de bureau, sept aux appareils mobiles) qui les supportent et les versions de ces derniers à partir desquelles ils ne sont plus nécessaires. De plus, dans le cas où une fonctionnalité n'est supportée qu'imparfaitement par un ou plusieurs navigateurs, les auteurs ont poussé la précision jusqu'à détailler, pour chacun d'eux, en quoi consistent leurs limites.

Un code simplifié

La fin programmée des préfixes constructeurs, en outre, partage avec d'autres avancées de CSS l'avantage de simplifier la production du code et de rendre celui-ci plus lisible.

Des erreurs de programmation sont parfois dues à une mauvaise compréhension, de la part des développeurs, de la façon dont les navigateurs interprètent certaines propriétés. L'exemple le plus emblématique est celui du modèle de boîte, où la propriété width désigne la largeur non de la boîte proprement dite, mais de son seul contenu. La propriété box-sizing a pour ambition de résoudre ces difficultés en offrant la possibilité au développeur, s'il le souhaite, de basculer en mode Quirks, modèle inventé, jadis, par Microsoft, et selon lequel la largeur définie pour un élément correspond à celle de l'élément tout entier (chap. 3 §1).

Quant à l'unité rem, elle simplifie la définition des forces de corps en ne la faisant pas dépendre – contrairement à em, qu'elle se propose de remplacer – des tailles de caractères définies au niveau des éléments ascendants (chap. 5 §2).

Lorsqu'il s'agit de sélectionner un élément du DOM à une position fixe, les pseudo-classes de position (chap. 2 §3) s'acquittent de leur tâche aussi bien que les opérateurs d'adjacence directe (chap. 2 §1), mais avec une syntaxe incomparablement plus synthétique.

Le gain en clarté est encore plus flagrant avec la pseudo-classe :matches dans le cas d'un sélecteur devant combiner plusieurs éléments (chap. 2 §4).

Les couleurs sont définies de manière plus claire et intuitive par l'intermédiaire de leurs teinte, saturation et luminosité, ou plus directement par celui d'un simple nom extrait d'un nuancier, qui existe, certes, depuis les débuts de CSS, mais qui est désormais étoffé (chap. 4 §1).

Une couleur n'y figurant pas pourra néanmoins, elle aussi, être identifiée par un nom. La stratégie ici évoquée repose sur l'utilisation de variables ; elle se généralise, bien sûr, aux valeurs de toute nature et offre, surtout, les avantages d'éviter certaines redondances dans le code et d'en faciliter la maintenance (chap. 7). Le livre ne se contente pas de nous en décrire un cas d'usage standard, mais nous explique comment sont gérées les erreurs : valeur invalide (chap. 7 §4), référence circulaire (chap. 7 §5).

Une variable est particulièrement bien adaptée pour contenir le résultat d'un calcul impliquant des valeurs exprimées dans des unités différentes. Celui-ci peut dorénavant être effectué directement dans CSS grâce à la fonction calc (chap. 5 §1).

Les innovations majeures que constituent les variables et les calculs viennent combler certaines des lacunes qui furent à l'origine de l'invention des préprocesseurs CSS (chap. 1 §1). Ceux-ci conservent néanmoins toute leur utilité, notamment quand il s'agit de générer automatiquement des lignes de code qu'il serait trop long ou pénible d'écrire à la main, ainsi qu'il est montré à différents endroits du livre avec des procédures SASS prêtes à l'emploi.

Des performances accrues

De la même façon qu'il commence à s'affranchir des préprocesseurs, CSS prend désormais à sa charge des tâches qui étaient jusqu'à présent du ressort de JS. Il est ainsi capable de gérer quelques opérations conditionnelles rudimentaires : mettre en forme différemment un champ de formulaire selon qu'il est ou non correctement renseigné (chap. 2 §5) ; éditer des points de suspension à la place de la partie tronquée d'un message débordant de son conteneur (chap. 6 §3) ; arrimer un élément au sommet de l'écran dès qu'il a atteint cette position, suite à un défilement (chap. 3 §5).

Cependant, c'est sans doute dans la gestion d'actions temporelles que réside une des évolutions récentes de CSS les plus significatives : si le recours à JS reste pertinent pour des réalisations complexes (chap. 10 §4), CSS peut en revanche effectuer des animations simples de manière autonome.

S'il convient de distinguer l'animation à proprement parler de la transition (chap. 10 §2), toutes deux, cependant, exploitent les transformations (chap. 9), elles-mêmes de deux sortes : 2D (chap. 9 §2) et 3D (chap. 9 §5). Ces dernières sont abordées essentiellement à travers une application concrète produisant un effet « retourné de carte » (chap. 9 §6).

L'ouvrage nous montre, en outre, comment une transition peut aider l'utilisateur à anticiper un changement de vue (chap. 10 §1), et nous détaille un cas pratique permettant d'obtenir un tel résultat (chap. 10 §5).

Plusieurs autres extraits de code, utilisant cette fois-ci des animations, se proposent de construire de véritables applications telles qu'un « anti-spoiler », mettant en œuvre, de manière particulièrement subtile, une grande partie des possibilités offertes par CSS, et concluant le chapitre en beauté (chap. 10 §6) !

Non content de prendre le relais de JS quand il s'agit de gérer des animations ou interactions de base, CSS sait dorénavant se passer des images, jadis indispensables, pour la réalisation de graphismes sophistiqués. Il en va ainsi de différents effets tels que les éléments ombrés (chap. 4 §4), le texte en relief (chap. 4 §5), les dégradés (chap. 4 §6) ou les bordures personnalisées (chap. 4 §10).

Le modèle de boîte sur lequel repose, depuis toujours, CSS impose une forme rectangulaire au conteneur. Une application astucieuse des bords arrondis permet cependant de donner à celui-ci l'apparence d'un cercle (chap. 4 §3).

Si les pseudo-éléments (chap. 2 §6) ont pour mission première d'ajouter un complément d'information à un contenu textuel – comme on peut le voir sur quelques exemples où ils sont associés à des sélecteurs d'attribut (chap. 2 §2) –, les auteurs nous montrent, prenant pour illustration l'ingénieuse réalisation d'un « step wizard », qu'ils peuvent aussi servir à créer des éléments aux bords biseautés (chap. 9 §2).

Plus généralement, les masques de forme nous libèrent des rectangles en conférant à un conteneur n'importe quelle forme géométrique simple (chap. 3 §7).

CSS ne saurait évidemment remplacer une image complexe telle qu'une photo, mais en appliquant directement sur celle-ci les transformations nécessaires, il évite d'en charger les variantes (chap. 4 §8).

L'économie des ressources externes réalisée par CSS ne se limite pas au code JS et aux images : la propriété unicode-range rend possible le chargement conditionnel de polices de caractères (chap. 6 §9).

Les gains en performance que procurent les nouvelles fonctionnalités CSS sont observables non seulement lors du chargement des fichiers, mais également au moment de l'exécution du code, en appelant la GPU en renfort (chap. 10 §3) et en soulageant le CPU de calculs superflus (chap. 4 §9 et chap. 9 §2).

Un espace optimisé

Avec un tel progrès réalisé sur le plan des performances, CSS démontre, une fois de plus, sa faculté d'adaptation aux nouveaux modes de connexion à Internet, puisqu'il répond ainsi à la contrainte de limitation de bande passante caractéristique des appareils mobiles, tandis que, depuis sa deuxième version, les Media Queries prennent en compte celle liée au manque d'espace disponible sur leur écran. La largeur de celui-ci est le premier critère sur lequel elles s'appuient, mais elles sont aussi capables de le combiner avec l'orientation de l'appareil ou son ratio hauteur/largeur (chap. 8 §2).

Les nouvelles unités relatives au viewport viennent en soutien des Media Queries, comme elles peuvent, au contraire, nous en dispenser pour des mises en forme simples, ainsi que l'illustrent deux judicieux exemples présentés dans le livre (chap. 5 §4).

Si la technique utilisée pour sélectionner la mise en page adaptée à chaque type d'appareil reste donc la même, les méthodes permettant de construire cette dernière ont, en revanche, avec CSS 3, connu une véritable révolution ! Grid Layout répartit les grandes zones du design au sein des cellules d'un tableau fictif (chap. 3 §4), tandis que l'alignement de leurs composants est géré par Flexbox (chap. 3 §3). Une mise en page sous forme de grille, plus simple, quoique moins flexible, est également réalisable à l'aide d'une mise en application originale du multicolonne (chap. 3 §2).

La souplesse apportée par les récents modules de CSS profite non seulement aux éléments structurant la page web, mais également à leur contenu : possibilité lui est, en effet, offerte par le module Regions de se redistribuer de différentes manières au sein de ces derniers (chap. 3 §6).

S'il s'agit d'un contenu textuel, le manque d'espace au cœur du conteneur est désormais géré plus efficacement à l'aide de retours à la ligne (chap. 5 §5) ou de coupures au sein des mots avec (chap. 6 §4 et 5) ou sans (chap. 6 §1) césures. À l'inverse, l'espace disponible peut être converti de diverses façons (chap. 6 §2, 6, 7, 8 et 10).

La solution idéale consisterait évidemment à construire un conteneur dont la taille s'ajuste automatiquement à la largeur du contenu, ce que les auteurs sont parvenus à faire pour un champ de texte, grâce à l'unité ch et un peu de JS (chap. 5 §3).

Si les résultats les plus significatifs obtenus en termes d'optimisation de l'espace sont dus, avant tout, à la capacité des Media Queries d'évaluer la taille de l'écran que nous regardons ou tenons entre nos mains, on peut légitimement penser qu'en généralisant les tests supportés par ces dernières, nos possibilités d'amélioration du design s'en trouveront accrues d'autant. On peut déjà le constater avec celui touchant à la résolution, moins avec d'autres, concernant notamment la luminosité ou le système de pointage, pour des raisons précises et pertinentes exposées dans l'ouvrage (chap. 8 §2). Quoi qu'il en soit, ces récentes évolutions augurent un CSS futur en mesure d'offrir une expérience utilisateur en adéquation toujours plus parfaite avec les spécificités de l'appareil !

En conclusion

Comme son titre l'indique, le livre n'est ni un guide exhaustif, ni un manuel de premier apprentissage de CSS. À l'exception des Media Queries (dans leur première version) et d'une poignée de sélecteurs, aucune des propriétés existant depuis au moins la deuxième version du langage n'y est, en effet, abordée. Le livre peut, en revanche, prétendre au qualificatif d'ouvrage de référence en « CSS 3 » : en choisissant de se focaliser sur les seules fonctionnalités nouvellement introduites dans le langage, il dispose de toute la place nécessaire pour traiter celles-ci de manière très complète, ajoutant à sa présentation des informations complémentaires – syntaxe formelle, valeur par défaut des propriétés CSS (Annexe A) et liste de celles pouvant être animées (Annexe B), support des navigateurs et description précise de leurs limites en cas de prise en charge imparfaite –, tout en prenant une longueur d'avance en s'intéressant aux modules non encore, ou à peine (à la date de parution du livre, en tout cas), implémentés dans les navigateurs (Grid Layout, Regions, masques de forme, variables).

Pour autant, le livre ne s'arrête pas à la théorie : les paragraphes consacrés aux différentes fonctionnalités sont accompagnés, parfois de conseils quant à leur bon usage (remise en cause de la pertinence de la règle des 62,5% dans chap. 5 §2 ; de celle de certaines Media Queries de « niveau 4 » dans chap. 8 §2), presque toujours d'un ou de plusieurs exemples d'application, décrivant le plus souvent un composant complet directement utilisable dans une page web (galerie d'images avec placeholders, carrousel, pour ne citer que ces deux exemples).

Enfin, les bonnes pratiques de développement et la mise en œuvre de CSS dans un cadre plus global pourront être approfondies à l'aide de quelques-uns des livres indiqués dans la bibliographie sélective qui conclut l'ouvrage (Annexe C §5).

Après la période de vive effervescence intellectuelle qui a suivi la publication de sa deuxième version, « CSS faisait de moins en moins parler de lui » (chap. 1 Introduction). Afin de pallier autant les limitations du langage que sa prise en charge incomplète par les navigateurs, les développeurs front-end avaient, en effet, réussi à mettre au point des techniques détournées ou à mettre en œuvre des technologies supplétives : hacks destinés à corriger les bogues, exploitation de l'ensemble des possibilités offertes par la propriété float pour la mise en page, recours à JavaScript ou à Adobe Flash pour l'animation.

Outre le fait qu'il apporte de nouveaux styles plus élaborés, CSS3 permet désormais de gérer de manière native et satisfaisante ces deux pans essentiels de l'habillage d'une page web.

L'étendue des propriétés introduites par CSS3 et la résurgence de problèmes de compatibilité inter-navigateurs ont conduit l'auteur à ne traiter, dans son livre au format de poche, qu'une partie du langage. Comme il l'indique dans chap. 1 §3, il n'aborde pas les techniques suivantes : media queries, régions, web fonts. Contrairement à ce qui est écrit, il consacre, en revanche, un paragraphe au multicolonnage (chap. 7 §1). Quant aux nouveaux sélecteurs, il en donne un rapide aperçu à travers :last-child (chap. 6 §2). Ajoutons, en outre, que la mise en page, telle qu'elle est couverte par le livre, ne s'intéresse qu'aux petites échelles (Flexbox) et pas aux grilles (Grid Layout) et que, si les transformations 2D sont bien traitées, ce n'est pas le cas de leur pendant tridimensionnel.

L'auteur explique pourquoi les éléments du langage CSS3 qu'il choisit, finalement, de décrire sont précisément ceux qui doivent, aujourd'hui, être privilégiés, puis montre, à travers différents exemples, dans quels contextes il convient de les mettre en œuvre.

CSS3 : où, quand, comment ?

Au-delà de son lot d'avancées techniques, CSS3 introduit une innovation majeure en ce qui concerne son élaboration même : remettant en cause la procédure qui prévalait jusqu'alors, selon laquelle la spécification ne pouvait être implémentée, en tout ou en partie, avant d'être entièrement finalisée, la structure de CSS3 en modules indépendants favorise le dialogue entre les auteurs de la spécification et les fabricants de navigateurs (chap. 1 §1). Ces derniers ont, en effet, la possibilité d'intégrer des fonctionnalités dès le premier stade de leur conception (statut « brouillon »), voire, à l'instar des propriétés de transition, transformation et animation, d'en proposer de nouvelles aux spécificateurs (chap. 2 §1). Les différences d'implémentation se traduisent alors dans le nom de la propriété à l'aide d'un préfixe de navigateur (chap. 1 §4), dont la raison d'être se justifie pleinement lorsque les syntaxes diffèrent selon les moteurs de rendu (chap. 6 §4).

Si de nouveaux paramètres associés au navigateur pourraient, à terme, se substituer au système de préfixage (chap. 1 §4), ce dernier reste aujourd'hui indispensable pour utiliser les nouvelles propriétés CSS3. Sa mise en œuvre sera facilitée par le recours à un préprocesseur CSS (chap. 1 §4) ou à un des générateurs de code dont l'auteur nous donne une liste en fin d'ouvrage.

« J'ai tellement hâte d'utiliser CSS3… quand il sera supporté par tous les navigateurs » (chap. 1 §2) est une réflexion qui, selon l'auteur, se fait aujourd'hui beaucoup entendre dans le monde des web designers. Ainsi voilà posée, après la question du « comment », celle du « quand ». Or, lorsqu'il s'agit d'appliquer une nouvelle propriété CSS3, l'universalité de son support importe moins que son contexte d'utilisation, ou dit autrement la question du « quand » doit s'effacer devant celle du « où » (chap. 1 §2).

Les différentes strates visuelles d'une page web ne revêtent pas la même importance : l'auteur en fait la liste dans un tableau distinguant celles que l'on doit considérer comme critiques de celles que l'on juge, au contraire, comme ne l'étant pas (chap. 1 §2).

La stratégie appliquée par l'auteur tout au long du livre consiste, d'une part à retenir comme terrain d'expérimentation de CSS3 celles appartenant à cette deuxième catégorie, nommée par lui « couche d'expérience » (chap. 1 §2), d'autre part à ne fournir aucune solution de recours à l'intention des navigateurs non compatibles : l'effet recherché n'étant pas essentiel à l'expérience utilisateur, celle-ci demeurera tout à fait acceptable chez ces derniers, en application du principe de dégradation élégante (chap. 2 §13, chap. 3 §3 et 6, chap. 4 §2, chap. 5 §4, chap. 6 §6 et 9, chap. 7 §3).

La pertinence d'une telle solution sera évidemment d'autant plus probante que cette dernière sera mise en pratique avec les propriétés CSS3 bénéficiant du meilleur support : l'auteur nous conseille ainsi de privilégier les propriétés border-radius, text-shadow, box-shadow, box-sizing, opacity, RGBA et background dans sa version images multiples (chap. 1 §3).

Enfin, on devra garder à l'esprit que si une telle stratégie permet de préserver l'utilisabilité de notre site web, un recours abusif aux propriétés CSS3 risque de mettre en péril son identité visuelle (chap. 2 §14, chap. 4 §4 et 6). Bien employées, en revanche, ces dernières peuvent améliorer significativement l'expérience utilisateur.

Enrichir la couche d'expérience

Exception faite des transitions dont la présentation théorique et détaillée se justifie par leur grande complémentarité avec les autres propriétés CSS3 (chap. 2 §2 à 12), l'auteur choisit d'aborder ces dernières de manière concrète à partir d'exemples d'application extraits, pour la plupart, d'un authentique site web construit pour l'occasion (chap. 3 §1).

Améliorer l'expérience utilisateur d'un site web consiste, avant toute chose, à en faciliter l'usage pour l'internaute. Flexbox permettra ainsi d'étendre la zone de texte d'un formulaire de recherche sur toute la largeur disponible de la page web afin d'en rendre le contenu plus lisible (chap. 7 §2).

L'espace à disposition pourra, de même, être optimisé, dans le cas d'un formulaire présentant de nombreuses cases à cocher, en offrant le maximum d'entre elles directement à la vue de l'internaute, grâce à une application originale et efficace du multicolonnage (chap. 7 §1).

La lisibilité des images, quant à elle, sera améliorée en affectant à ces dernières une taille appropriée : par une nouvelle utilisation de Flexbox dans le cas d'une slat (image accompagnée de texte) (chap. 7 §2) ; grâce à une transformation scale au survol si l'on a affaire à des images composant une galerie (chap. 4 §1).

Si le curseur de la souris doit, sur un grand écran, rester discret, on sera, en revanche, autorisé à mettre en avant une zone de texte recevant le focus ou bien des liens survolés, en ayant recours à la propriété box-shadow ou à une animation pour la première (chap. 6 §7 et 8), à l'opacité pour les seconds (chap. 3 §4 et 5).

Tout en réalisant cette dernière démonstration au profit de liens de navigation, l'auteur prend le temps de nous montrer comment habiller ceux-ci à l'aide de propriétés text-shadow et border-radius (chap. 3 §4). L'esthétique entre en compte, en effet, dans l'amélioration de l'expérience utilisateur en rendant, pour ce dernier, le site web agréable à utiliser.

Les composants des formulaires (champs de saisie, étiquettes) sont traités avec le même soin que les liens de navigation (chap. 6 §1 à 4). C'est tout particulièrement le cas des boutons dont la mise en forme complète est détaillée étape par étape (chap. 6 §5).

Une touche d'innovation dans la mise en forme peut apporter une véritable personnalité au site web, comme le montre l'auteur en prenant pour exemple un blog qui utilise la transformation rotate pour donner à ses billets l'allure de véritables feuilles de papier physiques (chap. 4 §3).

Une audace stylistique poussée au point de créer un effet de surprise sera encore plus profitable au site web dont le souvenir imprégnera durablement la mémoire de l'internaute. L'auteur en donne un très bon exemple à travers le site personnel d'un designer où les liens vers les réseaux sociaux se transforment au survol de manière à la fois spectaculaire et élégante (chap. 3 §2). Il met à son tour en pratique les transformations CSS3 au bénéfice du site web servant au livre de fil rouge, de façon simple mais efficace, afin de créer chez l'internaute une émotion identique (chap. 4 §5).

Les différents effets précédemment décrits existaient, certes, avant CSS3, mais ce dernier a le mérite de relayer avantageusement les technologies naguère indispensables pour les mettre en œuvre. C'est en particulier le cas du défilement parallaxe, technique créant un effet de profondeur à l'aide d'arrière-plans superposés défilant à des vitesses différentes, mise au point au début des années 1980 pour les besoins d'un jeu vidéo (chap. 5 §1), et que la fonctionnalité CSS3 d'arrière-plans multiples améliore (chap. 5 §3) en rendant inutile l'emboîtement de containers div qui était, jusqu'à présent, nécessaire à son fonctionnement dans un site web (chap. 5 §2).

En conclusion

CSS3 est un bien trop vaste sujet pour tenir dans un livre de taille aussi réduite, ou même dans un seul livre tout court ! Pour cette raison, et aussi afin de fournir des solutions directement applicables, l'auteur a choisi de ne traiter que les propriétés CSS3 les mieux implémentées, aujourd'hui, dans les navigateurs.

Des répétitions, même si elles concernent le message essentiel que l'auteur a voulu faire passer, auraient cependant pu être évitées, libérant ainsi de l'espace pour des développements plus utiles : on dénombre ainsi pas moins de huit paragraphes indiquant, chacun, que la ou les propriétés CSS3 mises en pratique dans les paragraphes précédents se dégradent harmonieusement chez les navigateurs ne les supportant pas !

On regrettera également, à l'heure du responsive web design, l'utilisation systématique du pixel pour définir les tailles des éléments ainsi que, par endroits, un certain manque de rigueur dans l'écriture du code (identifiant précédé d'un sélecteur dans chap. 4 §5).

L'ouvrage s'adresse donc, avant tout, à un lecteur souhaitant aborder CSS3 en douceur, possédant néanmoins de bonnes bases en HTML et en CSS 2.1 car le livre ne prodigue, à propos de ces derniers, aucun rappel.

Le lecteur ayant déjà de premières connaissances en CSS3 restera sur sa faim mais pourra tirer profit des exemples de mise en forme des éléments de formulaire, à travers lesquels l'auteur démontre tous ses talents de designer.

Si la simplicité de CSS a rendu possible la large adoption de ce dernier au sein de la communauté des développeurs web, elle est aujourd'hui une contrainte à la réalisation de projets toujours plus complexes (chap. 1 §2).

Apportant une nouvelle « couche d'abstraction » – pour reprendre l'expression de Chris Coyier, qui signe la préface de ce livre – un préprocesseur CSS vise à pallier les insuffisances inhérentes au langage CSS.

Pour se faire une place aux côtés de CSS dans la panoplie du développeur web, le préprocesseur CSS doit à son tour réussir à s'imposer comme un outil indispensable. C'est ce à quoi est parvenu le préprocesseur Sass auprès de l'auteur de ce livre, développeur CSS chevronné, qui était au départ fortement attaché à ses méthodes de conception personnelles autant que sceptique devant les perspectives dessinées par ce nouvel outil.

Le succès de Sass tient à deux de ses principaux atouts : d'une part, il ne bouleverse pas les règles d'écriture des feuilles de styles ; d'autre part, il enrichit CSS de nouvelles possibilités.

La transition en douceur

Sass, à l'instar de tout préprocesseur CSS, est une application qui génère automatiquement une feuille de styles CSS à partir d'instructions qu'on lui aura fournies sous la forme d'un fichier (chap. 1 §3). Celui-ci peut être écrit en respectant une des deux syntaxes suivantes : d'une part, la syntaxe originelle, dépouillée, où l'indentation est un élément du langage à part entière (à l'image des langages de programmation Ruby et Python) ; d'autre part, la syntaxe SCSS qui est un surensemble de CSS (chap. 1 §4). Cette précision essentielle permet de faire tomber un des mythes sur Sass que l'auteur résume par la formule : « Je ne veux pas changer ma façon d'écrire en CSS ! » (chap. 1 §5). En effet, CSS étant lui-même du code SCSS, cette dernière syntaxe nous permet de migrer sans plus attendre, au sein des fichiers inputs, l'ensemble de nos fichiers CSS réalisés sans l'aide d'un préprocesseur, avant d'y intégrer progressivement, afin de tirer le meilleur profit des possibilités qu'elles peuvent offrir, les fonctionnalités spécifiques à Sass (chap. 1 §3).

La gestion des fichiers CSS outputs est alors entièrement déléguée à ce dernier (chap. 2 §6) qu'il est d'ailleurs parfaitement capable de formater selon les désirs de l'utilisateur afin de respecter des contraintes de style ou de performance (minification) (chap. 2 §5). On n'attendra pas de Sass, en revanche, qu'il corrige les erreurs ou maladresses de conception imputables à celui-ci, ce que précise l'auteur à propos d'un autre mythe qu'il intitule : « Je ne veux pas que Sass change ma façon de concevoir ! » (chap. 1 §5).

Après nous avoir expliqué brièvement l'installation de Sass sous Mac (chap. 2 §1) et Windows (chap. 2 §2) – on regrettera au passage que les adeptes de Linux soient oubliés ! –, l'auteur nous montre comment le mettre en route, battant en brèche par la même occasion un dernier mythe traduit ainsi : « J'ai peur de la ligne de commande ! » (chap. 1 §5). Si la génération des fichiers CSS est en effet programmée à l'aide d'une ligne de commande, celle-ci est simple au point que l'auteur, qui annonce d'emblée : « Je ne suis pas un expert de la ligne de commande » (chap. 1 §5), parvient à utiliser sans difficulté ! (chap. 2 §3). En outre, à l'intention des irréductibles, l'auteur offre une alternative sous la forme d'interfaces dont quatre nous sont présentées : Scout, CodeKit, LiveReload, Compass.app (chap. 2 §4).

Dans un deuxième temps, on pourra commencer à utiliser les constructions syntaxiques introduites par Sass, permettant de simplifier certaines écritures (chap. 3 §2) ou de mieux refléter la structure du fichier HTML, à travers les sélecteurs (chap. 3 §1) ou les media queries (chap. 4 §1). Une application concrète de cette dernière technique, faisant en outre appel au sélecteur parent (chap. 3 §3), est très bien détaillée par l'auteur en fin d'ouvrage (chap. 4 §2).

La voie ouverte à un code efficace

La principale limite de CSS réside dans la duplication de valeurs de propriétés ou de déclarations au sein d'un même fichier, en contradiction avec le principe DRY (« Don't Repeat Yourself »), avec pour conséquence un code difficile à lire et à maintenir (chap. 1 §2). Les deux principaux piliers de Sass que constituent les variables et les mixins permettent de définir en un seul endroit du code respectivement les valeurs de propriétés (chap. 3 §5) et les blocs de déclarations (chap. 3 §6). L'application de ces techniques au fichier input permet de faire de ce dernier une feuille de définition de styles à la structure irréprochable.

Le fichier output demeure, en revanche, un fichier CSS traditionnel rempli de redondances. L'utilisation de la directive @extend permet cependant de réduire celles-ci en regroupant dans une même règle les sélecteurs partageant un même bloc de déclarations (chap. 3 §8).

La règle @import, en autorisant un fichier input à faire référence à des fichiers externes, rend possible la création d'une bibliothèque de règles et nous permet ainsi de franchir un pas supplémentaire dans l'écriture d'un code efficace (chap. 3 §8).

Un fichier regroupant en son sein des variables définissant des couleurs ou des polices typographiques constituera un guide de style (chap. 3 §5). Les propriétés préfixées, associées aux différentes implémentations d'une même propriété CSS3 par les navigateurs, pourront être invoquées dans le code à l'aide d'un nom unique grâce à des mixins rassemblés dans un même fichier (chap. 3 §7). Celui-ci, ainsi qu'un autre fichier distinct contenant les règles (notamment le reset CSS) communes à l'ensemble des projets seront ainsi tenus à la disposition de ces derniers (chap. 3 §8).

Une bibliothèque a, entre autres avantages, celui d'améliorer la performance liée à l'application des styles à la page web. En effet, les fichiers qui la constituent sont autant de fichiers CSS génériques, et donc de connexions HTTP, d'économisés (chap. 3 §8). De même, la taille du fichier output sera maîtrisée en limitant le contenu de ce dernier au strict nécessaire, les règles inutilisées de la bibliothèque, à l'instar des placeholder employés par la directive @extend (chap. 3 §8), n'apparaissant pas dans le fichier final, tout comme les commentaires qui permettent de documenter en détail l'ensemble des règles présentes dans la bibliothèque (chap. 3 §4).

Enfin, dernière étape dans l'industrialisation de la conception des feuilles de styles CSS, les bibliothèques de règles peuvent servir de base à la construction d'un framework CSS, à l'image de ceux que l'auteur nous invite à découvrir : Compass et Bourbon (chap. 3 §8).

En conclusion

Si un livre, en général, doit beaucoup à l'expertise et à la pédagogie de son auteur, c'est particulièrement le cas de celui-ci. En plus d'être un expert reconnu en CSS, Dan Cederholm présente l'avantage, pour le lecteur, d'avoir, par rapport à Sass, fait partie des sceptiques ! Ses arguments pour adopter ce dernier n'en sont donc que plus convaincants et ses explications d'autant plus claires qu'il a éprouvé face à cette technologie nouvelle les mêmes difficultés que celles auxquelles pourront être confrontés des développeurs web habitués à écrire leurs feuilles de styles sans l'appui d'aucun outil.

La clarté du propos, soutenue par un plan très bien structuré et de nombreux exemples détaillés pas à pas, rend le livre parfaitement accessible à tout développeur web ayant, bien sûr, une première expérience en CSS, sans pour autant être nécessairement un expert dans ce langage, et étant disposé à découvrir un nouvel outil pour coder plus efficacement.

Si ce livre au format de poche ne prétend évidemment pas faire le tour du sujet, il enseigne cependant l'essentiel de ce qu'il faut connaître sur Sass. Il mentionne en outre quelques projets qui en sont issus (frameworks et bibliothèques), et les ressources en fin d'ouvrage offrent une liste de liens sélective mais suffisante permettant d'aller plus loin.

En se concluant par l'évocation de deux autres préprocesseurs CSS (LESS et Stylus), le livre élargit son sujet en même temps qu'il finit de donner au lecteur les clés lui permettant de tirer le meilleur profit de cette nouvelle génération d'outils.

Si le livre aborde HTML5 et CSS3, son principal intérêt est ailleurs. Web designer confirmé et fondateur d'un site Web communautaire axé sur la promotion des standards du Web, l'auteur partage avec le lecteur sa maîtrise des bonnes pratiques de CSS acquises à travers son expérience et ses échanges avec ses confrères. Le livre ne se limite pas aux applications de CSS pour les seuls navigateurs d'ordinateurs de bureau. Cependant, les autres agents utilisateurs sont traités plus brièvement, soit parce qu'ils nécessiteraient un ouvrage dédié (c'est le cas des appareils mobiles traités dans des livres spécialisés dont l'auteur de celui-ci propose une sélection), soit parce que leur compréhension de CSS est extrèmement limitée (c'est le cas des clients de messagerie et des imprimantes). Par ailleurs, le livre ne traite pas spécifiquement de certains aspects tels que l'accessibilité et le référencement.

Ce livre n'est ni une introduction aux technologies Web côté client, ni une description exhaustive et approfondie des propriétés CSS existantes et à venir. Il s'adresse à un lecteur ayant au moins des connaissances de base en HTML4.01 et CSS2.1. Néanmoins, un paragraphe rappelle les principaux sélecteurs et pseudo-éléments CSS2.1 tandis qu'une partie entière est consacrée à HTML5 et CSS3. De nouveaux éléments liés à la sémantique, aux formulaires et aux applications (vidéo, API, etc.) ainsi que de nouveaux sélecteurs, pseudo-classes, éléments et propriétés sont présentés successivement et accompagnés systématiquement d'un exemple de code et parfois d'une illustration graphique. Cette présentation est complétée en annexe par la liste exhaustive des propriétés CSS (versions 1 à 3).

Partant du constat que les difficultés rencontrées par les Web designers sont dues avant tout à une méconnaissance de certains mécanismes présents dans la version actuelle de CSS, l'auteur revient dans un premier temps sur ces derniers. Après un rappel sur la terminologie, l'auteur explique le modèle de boîte et les règles de priorité, élucide les mystères des positionnements absolu et flottant et dévoile une méthode tabulaire se substituant avantageusement aux techniques habituelles de positionnement.

Le second écueil auquel les concepteurs de site Web sont confrontés est imputable aux agents utilisateurs. Un rappel historique détaillé (ch. 1, ch. 9 §1, ch. 11 §1, 2, 3) permet de mettre le doigt sur l'hétérogénéité des applications clientes et les décalages subsistant actuellement dans leur prise en compte des spécifications. Chaque propriété introduite fait l'objet d'un encart indiquant précisément quelles versions de navigateurs la comprennent ainsi que les bugs résultant d'une prise en charge imparfaite. Ces informations sont complétées en annexe par un tableau exhaustif s'intéressant aux éléments HTML5 et propriétés CSS3. Afin de contourner les lacunes des navigateurs ainsi mises en lumière, l'auteur présente, lorsque cela est possible, une recette universelle. Pour les autres cas, il expose dans un premier temps deux méthodes générales de détection des navigateurs posant problème : l'une fondée sur les insuffisances de ces derniers (hacks et sélecteurs avancés ; présentés dans ch. 6 §2), l'autre sur un ciblage explicite (commentaires conditionnels ; ch. 6 §3), puis offre une solution à chaque difficulté rencontrée, sous la forme soit d'un code CSS alternatif ou complémentaire (problème délicat du « layout » spécifique à Internet Explorer, traité dans un paragraphe dédié), soit d'un lien vers un outil correctif en ligne, généralement développé en JavaScript (émulateurs HTML5 / CSS3, notamment).

Une fois enseignée la rédaction d'un code correct et reconnu par les navigateurs, l'auteur livre à la fois quelques règles et outils (sprites, « minification », etc.) pour en accroître la performance. La qualité du code passant également par la mise en oeuvre d'une démarche rigoureuse, l'auteur n'hésite pas à reprendre l'ensemble des étapes nécessaires à la conception d'une feuille de styles pour chaque type d'agent utilisateur sous la forme d'une méthodologie prête à l'emploi ou d'une check-list. Il présente également de bonnes règles de structuration de la feuille de styles inspirées de sa pratique personnelle (ordre des déclarations) ou adoptées par la communauté des développeurs (classes et identifiants génériques, commentaires CSSDoc). Quant à la phase de validation, elle est abordée à travers bonnes pratiques, outils et méthodologie de correction des bugs.

Afin de faciliter la tâche du développeur, sont également présentés à la fois des outils de génération automatique de code (éditeurs HTML, frameworks, zen coding) et des templates.

Soucieux de faire partager avant tout son expérience de « terrain », l'auteur a un regard objectif sur les nouvelles technologies offertes au Web designer : conscient du manque de maturité d'HTML5 et CSS3 (à la date de rédaction de l'ouvrage, en tout cas), il indique clairement celles de leurs innovations pouvant être mises en oeuvre sans danger et celles qui, au contraire, présentent de sérieux risques. De même, il met en garde contre la tentation de puiser largement parmi les nombreuses propriétés de restitution vocale lorsque les applications qui les emploient sont trop spécialisées pour être manipulées par des non-experts. Il démontre que les hacks sont loin d'être la panacée et prévient contre les risques d'altération de la rigueur et de la lisibilité du code ou du rendu visuel consécutifs à un usage immodéré des frameworks, outils de « minification » et reset. Souvent présentés sous la forme d'« exercices pratiques », les exemples donnés dans l'ouvrage sont de vrais cas concrets, parfois tirés des propres sites Web administrés par l'auteur (cf. paragraphe conclusif du ch. 9 consacré à l'adaptation d'un site Web pour appareils mobiles). Les références à des outils ou des sources d'information, en nombre impressionnant (une centaine pour les premiers, une soixantaine pour les seconds !) sont systématiquement commentées.

Le livre est d'autant plus agréable à lire que le texte est écrit dans un style clair et précis, qu'il est accompagné d'illustrations utiles, que les coquilles y sont rares (je n'en ai dénombré en tout et pour tout qu'une vingtaine, mineures pour la plupart) et que la mise en page fait parfaitement ressortir les extraits de code et les commentaires de l'auteur. Seuls pourraient être ajoutés des exercices supplémentaires (on en trouve uniquement à la fin des ch. 2 et 4) ainsi qu'une conclusion qui parachèverait un ouvrage par ailleurs fort bien structuré.

En résumé, de par son point de vue éminemment pragmatique, ce livre est le complément indispensable à n'importe quel ouvrage qui serait focalisé sur la description des éléments du langage. Alors que le second décrit les outils, celui-ci apprend à les utiliser !

« CSS3 pour les Webdesigners » est un petit livre de la collection « A Book Apart ». Comme pour les autres livres de cette série, celui-ci ne prétend pas vous faire découvrir l'ensemble des spécifications de CSS3, il s'adresse surtout à tous ceux (et ils sont nombreux) qui souhaitent mettre en place certaines fonctionnalités de CSS3 sur leur site sans pour autant aspirer à devenir un expert de cette technologie. Les Webdesigners d'abord, mais aussi tous ceux qui possèdent un site personnel dont ils veulent améliorer l'apparence.
Attention toutefois, des connaissances élémentaires en HTML et CSS sont nécessaires pour tirer profit de ce livre qui n'aborde que les spécificités de CSS3, pas l'apprentissage de CSS.
Ce livre est volontairement succinct et n'aborde que les aspects qui ont paru les plus utiles à l'auteur. Mais CSS3 étant encore en cours d'évolution, vouloir être exhaustif serait illusoire. Mais l'auteur a su faire une sélection suffisante de propriétés utiles, tout en donnant les pistes nécessaires pour pouvoir aller plus loin.

Sur tous ces points, je considère que le but est largement atteint : l'ouvrage est facile à lire, drôle même parfois, les explications sont très claires, progressives et concrètes, basées sur des exemples largement commentés et abordables. L'auteur (sans oublier non plus le traducteur) est très pédagogue ce qui rend le livre particulièrement agréable à lire.
Même s'il date un peu, ce qui, au vu des évolutions des navigateurs, peut faire penser à un livre dépassé, ce n'est pas le cas. En l'achetant, vous ferez vos premiers pas réussis dans l'univers de CSS3.

Seul petit bémol à mon sens, le livre, probablement faute de place, manque d'annexes récapitulatives et les références au site « A List Apart » un peu trop nombreuses.
Pour finir, ce livre est un complément idéal à « HTML5 pour les Webdesigners » dans la même collection pour appréhender ces deux piliers de la programmation Web.

CSS : the missing manual se présente sous la forme d'un véritable manuel d'apprentissage du langage CSS. C'est un livre très clair, bien écrit, très pédagogique. Chaque chapitre se termine par l'application des concepts étudiés dans un ou plusieurs tutoriels aboutissant à chaque fois à une page différente parfaitement mise en valeur (même dans les premiers chapitres, bien que les propriétés CSS utilisées n'aient pas encore été vues).
Reprenant les concepts du CSS à la base, ce livre est bien adapté aux personnes souhaitant découvrir ce langage. Mais c'est également une véritable mine d'informations qui pourra aider les utilisateurs occasionnels du CSS à se rapprocher d'un développement professionnel.
Pour chaque exemple, les différences existant entre les navigateurs sont présentées, expliquées et résolues (eh oui, les bogues d'IE 6 ne sont pas une fatalité !). Un chapitre est consacré aux nouveautés du standard CSS 3 déjà utilisables, avec les navigateurs qui les implémentent et les solutions pour obtenir le même rendu dans ceux qui ne le font pas (quand c'est possible). Quelques notions de design sont également abordées, comme par exemple la meilleure utilisation des différents types de police.
Bref, un livre à mettre entre toutes les mains de développeurs web désirant approfondir leurs connaissances du CSS.

Le titre du livre aurait pu porter la mention «par l'exemple », en effet à travers une page web fournie vous apprendrez toutes les notions indispensables du CSS. Positionnement des DIV, marges, bordures, placement du texte, des images, toutes les caractéristiques techniques des polices, des couleurs mais aussi les différentes utilisations du CSS : style pour une page web à l'écran, imprimable, pour terminaux mobiles. A l'appui des scripts fournis avec le livre, vous modifierez pas à pas et au travers des chapitres les éléments de la page. Ce livre peut tout aussi bien servir de bible pour ceux qui maîtrisent déjà un peu le CSS, que de livre «tremplin » pour ceux qui n'en ont jamais fait. L'auteur est clair et précis et les chapitres se lisent de manière très agréable.

Le CD fourni contient tous les scripts nécessaires afin de ne pas avoir à taper les exemples à la main, ainsi que des vidéos de présentation vraiment sympas pour appuyer les différents cours donnés.

Pour conclure : je conseille ce livre à ceux qui veulent apprendre le CSS facilement sans prise de tête comme à ceux qui souhaitent parfaire leur technique ou avoir un livre « mémo » à portée de main.

Comme son nom l'indique, l'approche pédagogique du livre s'oriente sur l'exemple, chaque chapitre comporte son lot de «problèmes » qui sont résolus. L'auteur prend aussi le temps d'expliquer ses choix technologiques pour chaque problème posé. On apprend donc utilement à se servir du CSS et pour ceux qui désireraient approfondir leur connaissance, ils trouveront certains exemples plus qu'efficaces. Les annexes ne comportent pas une liste exhaustive de toutes les propriétés, mais la multitude de liens proposés au fil de la lecture guideront le lecteur dans sa quête de la propriété perdue ^^. L'approche du livre se veut donc plus proche de la mise en service rapide que du bagage théorique et c'est ce qui fait sa force.
En résumé un bon livre pour débuter le css et apprendre quelques astuces du design web.

Encore un classique de Eric Meyer sur les CSS. Ce livre est d'une qualité exceptionnelle tant au niveau du contenu textuel que de la finition du livre lui-même. Le papier est agréable au toucher et les illustrations sont en couleur, ce qui donne envie d'aller plus loin dans la lecture. Avec cet ouvrage, vous suivrez par l'exemple, et pas à pas, la réflexion de l'auteur sur la transformation d'une mise en page par tableaux vers le même rendu en CSS pur. Je pense qu'il est plus efficace et facile d'apprendre et de comprendre une telle démarche en testant les exemples devant son écran d'ordinateur.
Ce livre touche à peu près toutes les techniques du CSS à travers divers chapitres (un exemple par chapitre). J'ai fortement apprécié celui concernant la conception d'un design pour le site CSS Zen Garden. Je le conseille donc à tous ceux qui ne veulent pas se noyer dans une documentation de référence.

Maintenant que les standards web commencent à rentrer dans les m?urs, O'reilly nous propose un ouvrage complet pour comprendre et utiliser les feuilles de style, outil indispensable à la mise en page.

Ecrit par un membre de la W3C, Eric A. Meyer nous explique la puissance des CSS. Il nous fait comprendre très simplement que bon nombre de balises encore utilisées sont totalement obsolètes et l'avantage à utiliser les feuilles de style. Centraliser la mise en page d'un site Internet, par exemple. Les développeurs de la vieille école comprendront aisément que la balise "font", ou l'imbrication de balises "table" n'a plus lieu d'être, et que tout peut être simplifié.

Grâce à cet ouvrage, vous saurez tout sur les CSS, les classes, les structures de document, et, sûrement la chose la plus complexe à comprendre, le système d'héritage qui peut exister entre les différents styles.

Autant pour débutants que pour experts, ce livre porte bien son nom, il est de loin la référence sur les CSS.

Avec l'évolution grandissante des technologies Internet, les concepteurs de sites web sont de plus en plus à profiter de la flexibilité qu'apporte un document bien structuré, et ceci grâce aux feuilles de style CSS (Cascading Style Sheets). CSS est un des standards dictés par le w3c (http://www.w3.org) dont l'auteur du livre, Eric A. Meyer fait partie. Si CSS avait un Dieu, ce serait bien lui...
Que vous soyez débutant ou expert en conception de sites web, cet ouvrage est fait pour vous ! Si vous êtes débutant, la pédagogie excellente de l'auteur vous fera rapidement progresser. Si vous êtes plutôt expert, il vous apportera sans aucun doute un apport d'informations, notamment au niveau du contenu généré, du positionnement ou encore des feuilles de style auditives.
Après un bref rappel sur les inconvénients qu'apportent une mise en page en pur HTML (balises font, attribut color, bgcolor...), l'auteur nous prouve en quelques lignes que cette façon de travailler est belle et bien dépassée : CSS est de loin beaucoup plus flexible et puissant que la mise en page à l'ancienne. Il permet de diminuer le temps de travail, facilite la maintenance du site et permet de gagner de la bande passante... Il ne suffit alors de ne modifier qu'un seul document - la feuille de style - pour que l'ensemble des pages du sites soient affectées par la modification. Toutes les propriétés sont ensuite présentées dans différentes parties thématiques. Elles sont généralement accompagnées d'exemples simples permettant de les expliquer de manière concrête. Certaines propriétés font même l'objet d'un petit paragraphe indiquant leur compatibilité avec tel navigateur. CSS la référence couvre CSS 2 et CSS 2.1 : vous y découvrirez les différences très subtiles non négligeables entre ces deux versions.

Au programme, vous saurez tout sur les sélecteurs, en passant par les pseudo-classes et les pseudo-éléments avec toujours un petit mot sur la compatibilité. Vous connaîtrez également tous les secrets de la structure et cascade d'un document. J'y ai appris une notion jusqu'alors inconnue pour moi - la règle de spécificité - qui permet notamment de prévoir par quelle propriété un élément sera affecté en cas de conflit de sélecteurs.

Les livres de l'éditeur O'Reilly sont excellents avec du contenu toujours intéressant. Dommage toutefois que les illustrations ne soient pas en couleurs. C'est bien entendu une référence comme l'indique son titre, mais il ne vous guidera pas dans la transformation d'un site HTML avec tableaux en un site (x)HTML avec CSS. Ce livre est uniquement basé sur la théorie, donc si vous voulez la pratique, cet ouvrage ne s'adresse pas à vous. Je le recommande donc à toute personne désirant se lancer dans la conception de sites web, ou désirant détenir un aide mémoire efficace à portée de mains.

Comprendre les feuilles de style par l'exemple, tel pourrait être le sous titre de ce livre. Tout tourne autour de l'exemple, tout est motif à explications.
Dans un style très clair, précis et détaillé, les auteurs nous décortiquent quelqu'unes des nombreuses contributions au site www.csszengarden.com, site de référence en matière de design CSS.
Ce livre peut se lire de toutes les manières : attentivement ou en diagonale, dans l'ordre des chapitres ou en ordre dispersé à partir de l'index très détaillé. A vous de venir picorer des idées, astuces ici et là.
Il ne faut, cependant, surtout à pas s'attendre à trouver ici une référence en matière de CSS, tel n'est pas le but.
Ce livre est à recommander vivement à tous ceux qui trouvent austères les sites developpés à l'aide de feuilles de style mais aussi à tous les chefs de projets et développeurs web pour leur faire prendre conscience des nombreux avantages que l'on peut tirer à bien concevoir un site avec un code conforme aux standards, où le fond est séparé de la forme, etc.

Excellent livre !
J'ai adoré lire ce livre, d'une part de par son design que je trouve très original et d'une lecture vraiment très facile. J'ai vraiment beaucoup apprécié les notes, astuces et images situés sur les côtés de chaque page pour les séparer du contenu principal.

En ce qui concerne les CSS, ce n'est pas ce livre qui vous apprendra à les maîtriser, mais plutôt à bien vous en servir pour des situations données dans l'étape de création d'un design, et ceci grâce aux nombreux designers qui ont contribués au site www.csszengarden.com . Il faudra donc, de préférence, avoir déjà de bonnes bases pour mieux appréhender les passages purement techniques décrites dans les pages.

Mais ce n'est pas tout, il ne faut pas oublier que ce livre est axé sur le « Design ». Vous apprendrez donc quelques des notions élémentaires de design appliqué au web. Cela donne même envie d'approfondir le sujet.

A noter tout de même que tous les bons conseils avisés gravitent autour des CSS.

Si vous vous attendez à rester dans les mises en page austères des livres de programmation, vous serez probablement agréablement surpris. En effet, c'est un véritable livre d'Art que nous offrent les éditions Eyrolles sous le titre bien engageant qu'est « Transcender CSS, sublimez le design web !».
Comment transcender CSS ? L'auteur construit son livre en 4 étapes :
Découverte : où l'on redécouvre CSS et ses nouvelles possibilités (différents navigateurs, messageries électroniques...)
Processus : où l'on aborde l'optimisation du workflow par l'utilisation de CSS, les prototypes interactifs et la mise en pratique du processus de création.
Inspiration : où l'on découvre où trouver l'inspiration, dans les méthodes de conceptions existantes mais aussi en dehors du Web, dans les magazines, l'architecture...
Transcendance : où l'on apprend à exprimer sa créativité en usant des forces de CSS (positionnements), des nouveautés de CSS 3, et des mises en page complexes.
La première lecture s'ensuivra d'une satisfaction manifeste, le livre tient ses promesses et déroule sous nos yeux des analyses des dernières méthodes de conception CSS. Il aborde également les problématiques actuelles auxquelles répond le CSS, c'est à dire les questions d'accessibilité, d'ergonomie, d'émotion du visiteur...
Andy Clarke s'appuie sur son expérience et son savoir-faire pour nous plonger dans la bonne conception CSS, et nous amener à appréhender le web en perspective de renouveau.

Andy Clarke, l'auteur de cet ouvrage, est un webdesigner anglais dont la réputation n'est plus à faire. Aujourd'hui membre du World Standard Project et participant à l'élaboration de ce que sera le CSS3 dans un groupe de travail du W3C, il a toujours eu à coeur de concilier créativité, accessibilité et respect des standards.
Nous sommes arrivés à une époque où les navigateurs modernes implémentent de mieux en mieux les recommandations du W3C concernant les CSS. La conséquence est que de plus en plus de designers qui n'ont pas forcément de fortes compétences en programmation se sont tournés vers cette technologie. Aujourd'hui, pour utiliser le potentiel du CSS, il ne suffit plus de transposer des connaissances qui auraient pu être acquises sur d'autres média que le web (maîtrise de la typographie et des positionnements par exemple). Ce serait se priver de nombreuses possibilités.
C'est dans ce contexte, après avoir convaincu de la possibilité de transcender CSS et de l'intérêt que cela présente, qu'Andy Clarke nous présente ces méthodes de travail. Il ne s'agit pas de s'initier au CSS, ce n'est pas un ouvrage pour les débutants. La connaissance des propriétés principales du CSS est un pré-requis et le webdesigner qui est ciblé s'est déjà initié aux aspects techniques du CSS.
Le résumé de l'éditeur indique que cet ouvrage est plutôt destiné à des designers n'ayant pas de compétences particulières en programmation. Je pense qu'il pourrait également s'adresser à un public de développeurs pour lesquels la technique n'est pas forcément un problème mais qui souhaiteraient explorer plus avant le processus du design.
En s'appuyant sur des exemples concrets où il faudra soit transposer un design prévu pour le média papier soit concevoir un design pour transmettre un contenu, Andy Clarke vous exposera toutes les phases de l'analyse qui permettront d'extraire la structure. Ainsi un large chapitre est consacré à la prise en compte du contenu en se focalisant sur le sens sans pour autant biaiser son analyse par des considérations de design qui n'interviendront que plus tard.
Ensuite, l'auteur consacre un autre chapitre au processus de production d'un design à travers les différentes étapes qui permettent de construire au fur et à mesure un design dans un contexte professionnel. Il propose différents niveaux de conception (squelette de pages, utilisation de symboles...) mais aussi des conseils facilitant la réutilisation du travail déjà fait.
Vient ensuite l'aspect plus créatif de ce livre. Andy Clarke vous aide à trouver l'inspiration là où on ne la chercherait pas forcément. Que ce soit grâce au média papier qui est plus mature que le média web, ou simplement en levant le nez quand vous vous balader dans la rue, l'auteur essaiera d'affuter votre regard afin que vous soyez en mesure de retirer des idées de votre expérience du quotidien. Il propose aussi quelques petites activités qui permettent d'attiser la créativité.
Enfin, ce livre se termine en présentant certains des aspects les plus prometteurs de CSS3. Ce chapitre ne sera certainement pas exploitable pour des projets concrets mais il aura l'avantage de vous faire rêver en attendant que la recommandation CSS3 soit achevée et que les navigateurs l'aient implémentées correctement.
Au delà du fond de cet ouvrage qui est écrit dans un style très clair et très facile à lire, il faut noter que la présentation est réellement très soignée. Tout en couleur et illustré de nombreuses photos et montages, d'une forme carrée peu habituelle, ce livre se rapproche d'un ouvrage d'art et gardera forcément une place particulière dans votre bibliothèque.

Voilà un ouvrage qui remplit parfaitement ses objectifs :

• si vous débutez il vous donne de solides bases de javascript et vous inculque les bonnes manières en matière de CSS
• si vous êtes déjà à l'aise avec les concepts présentés ici, ce livre vous remettra en mémoire quelques pièges et autres astuces bien utiles
• et quelque soit votre niveau vous apprécierez pleinement les deux parties consacrées aux bibliothèques Prototype et Scriptaculous

Ce livre ne prétend pas être une référence en matière de CSS ou de Javascript. Il n'est pas exhaustif concernant l'API Javascript standard ou les propriétés CSS, il n'a pas été écrit pour ça. Par contre il enseigne ce qu'il faut savoir pour bien commencer dans la programmation de sites web :

• facilement modifiables et puissants (DOM)
• attractifs (CSS, Javascript, Scriptaculous)
• dynamiques (Ajax)
• crossbrowsers (IE, Netscape-like)

L'organisation du livre est claire et bien pensée. Les explications sont très bien illustrées par des exemples simples de styles CSS ou de scripts et des impressions d'écran de ce qui est obtenu (avec comparaison entre les navigateurs si différences il y a).
Ici on vous précise la compatibilité des scripts avec les navigateurs et on vous propose des règles simples pour que vos scripts aient le même effet partout. Vous avez le droit à une introduction à Ajax, introduction car il ne s'agit pas de l'objet de cet ouvrage mais qu'il est indispensable de connaître cette technologie et ses possibilités si vos sites utilisent des bases de données et que vous voulez éviter certains désagréments aux utilisateurs (cf. l'asynchronisme d'Ajax contre le synchronisme des sites avec BDD sans Ajax). Apprenez et exploitez toute la puissance de l'utilisation du DOM (Document Object Model) qui vous permettra de gérer vos pages en Javascript et de les rendre plus dynamiques.
Et, cerise sur le gâteau, quand vous aurez acquis toutes les règles du savoir-vivre CSS/Javascript alors vous pourrez profiter pleinement de la description complète des bibliothèques Prototype et Scriptaculous, point (très) fort de ce livre.
La bibliothèque Prototype est un ensemble d'objets et de fonctions qui vous simplifierons la vie :

• en vous proposant de nouvelles fonctionnalités : combien de fois avez-vous dû réinventer la roue et implémenter des fonctions utilitaires pour gérer les tableaux, les chaînes de caractères, etc. Et bien Prototype propose des extensions de l'API Javascript qui gère tout ça pour vous, et crossbrowser en plus !
• en vous proposant des alternatives crossbrowser (i.e. compatible avec tous les navigateurs) : aïe ! Les évènements ne sont pas gérés de la même façon sous IE et Firefox ! C'est la galère si je veux rendre mes scripts compatibles avec ces deux navigateurs. Prototype met à votre disposition l'objet Event, un exemple parmi d'autres.
• en vous proposant des classes liées à Ajax : et oui Ajax c'est bien, mais ça ne s'utilise pas tout à fait pareil sur tous les navigateus (sic!) et il faut encapsuler ses scripts pour définir les différentes étapes (envoi de la requête, action en cas de réussite, d'échec, etc.). Là encore merci Prototype !

La bibliothèque Scriptaculous utilise Prototype et vous offre tout un panel de possibilités pour que vos sites "en jettent" :

• Des effets visuels assez impressionnants et tellement simples à mettre en place avec ses outils,
• du Drag'n'Drop (Glisser/Déplacer),
• de l'auto-complétion (avec Ajax)
• et une extension du DOM pour une utilisation simplifiée.

Tout cela mis ensemble et vos pages web ne seront plus les mêmes. Mais pour y arriver encore faut-il trouver une bonne documentation, et ce livre fait parfaitement l'affaire.

Dans un même livre, Jean Engels arrive avec succès à traiter à la fois l'XHTML et les feuilles de style CSS. Dans un style clair et simple, il nous amène au coeur du développement web. L'auteur, sans prendre parti (comme c'est souvent le cas), nous décrit tout l'état de l'art.

Dans la première partie consacrée à l'XHTML, l'auteur décrit de manière exhaustive la structure des pages Web et notamment la signification des différentes balises. Aussi, tout en nous précisant qu'il s'agit d'éléments ou de méthodes obsolètes et/ou déconseillées, il aborde également les principes de la présentation par tableaux et même le fonctionnement par cadres qui sont encore (malheureusement) couramment employés.

Dans la deuxième partie, l'auteur traite des feuilles de style, de leur fonctionnement, de leur utilisation, là aussi de manière exhaustive. Ainsi, il lui arrive fréquemment de nous décrire le fonctionnement de propriétés mal ou pas encore employées par nos navigateurs web préférés. Espérons que cela sera rapidement le cas, pour profiter pleinement de ces fonctionnalités intéressantes.

Enfin dans une troisième partie consacrée aux annexes, l'auteur nous fait un résumé sur l'emploi des divers éléments XHTML, des différentes propriétés CSS existantes mais aussi sur les codes caractères et codes couleur employés sur le web (important pour le daltonien que je suis )

Pour conclure, je conseillerai ce livre très complet à quiconque souhaite se lancer ou même se perfectionner dans le développement web. Pour moi, il est inutile de tout retenir, il suffit de savoir que cela existe et de facilement pouvoir retrouver ce que l'on cherche. Ainsi, il restera à portée de main comme aide-mémoire.

La critique précédente étant déjà très claire, je vais être bref tout en y ajoutant mes impressions.

C'est un très bon livre pour toute personne souhaitant apprendre et comprendre le XHTML ainsi que le CSS.

Les cours sont plus orientés "encyclopédie" mais restent quand même très efficaces. Quant aux exercices, ils permettent de passer rapidement à la pratique et de vérifier les acquis. À noter la présence d'annexes qui s'avèrent d'une très grande utilité.

En résumé, c'est un livre accessible à tous, du débutant à l'expert, ce qui en fait une très bonne référence à garder près de soi comme aide mémoire.

Ce livre est un bonheur pour les gens qui cherchent à passer du HTML au DHTML en ajoutant tout ce qui est en rapport avec le D ( Dynamic ).
La première partie du livre est consacrée aux feuilles de style. Elle présente de façon très factuelle l'ensemble des effets possibles grâce au feuille de styles CSS. De nombreux exemples permettent de se rendre compte visuellement de l'effet obtenu.
La seconde partie passe au JavaScript, et présente, là aussi de façon factuelle et assez exhaustive l'ensemble des opérations possibles grâce à l'utilisation du JavaScript (sur la base du standard EcmaScript). Les exemples sont très nombreux et permettent de bien suivre le fonctionnement des différentes instructions.
La troisième partie vous propose d'aller encore plus loin en introduisant l'API DOM qui permet. De nombreux exemples permettent de se bien prendre contact avec cette norme du W3C.
Ce livre présente de façon très exhaustive l'ensemble des possibilités, à grand renfort d'exemples. Si son aspect encyclopédique en fait un livre très difficile à lire d'un bout à l'autre, il reste une référence où l'on trouvera très facilement la solution à un problème donné.
Autres petits regrets concernant ce livre:

• Son aspect très encyclopédique, présentant les choses de façon factuelle ne permet pas du tout de se donner une idée générale sur les techniques du DHTML et sur leurs domaines d'utilisation respectifs
• Les technologies présentées sont des technologies qui commencent à vieillir. Ce livre n'est donc pas à conseiller à ceux qui cherchent les toutes dernières tendances du développement Web. Les techniques du Web 2.0 (comme Ajax) ne sont pas abordées

En conclusion, ce livre est une précieuse référence technique. Il permettra à ceux qui ont une vague idée de l'utilité du CSS et du JavaScript de trouver facilement et rapidement la façon de le mettre en application.
Il n'est en revanche, à mon avis, pas à conseiller à des gens n'ayant pas la moindre notion sur ces domaines, car il se concentre exclusivement sur la technique, sans aucun commentaire sur la logique ou l'organisation des choses.