Source: https://css.developpez.com/livres?page=Les-feuilles-de-style-CSS
Timestamp: 2020-02-17 20:57:51+00:00

Document:
Livres CSS : Les feuilles de style CSS
Angular 9.0 est disponible ! Par défaut, toutes les applications vont utiliser le compilateur et le runtime Ivy. L'équipe explique les avantages apportés par ce moteur de rendu
La spécification WebAssembly Core est désormais un standard web officiel ! Après HTML, CSS et JS, WebAssembly devient le 4ème langage pour le Web permettant au code de s'exécuter dans le navigateur
Voici l'état de l'écosystème des développeurs en 2019 : l'évolution du monde du code, d'après une enquête menée par Jetbrains
15 livres et 19 critiques, dernière mise à jour le 2 avril 2019	, note moyenne : 4.6
CSS3	- Pratique du design web
CSS3 pour les web designers	- A Book Apart n°2
Sass pour les web designers	- A Book Apart n°10
CSS avancées	- Vers HTML5 et CSS3
CSS	- Techniques professionnelles pour une mise en page moderne
CSS	- La référence
Transcender CSS	- Sublimez le design web !
XHTML et CSS	- Cours et exercices
de Hugo Giraudel, Raphaël Goetter
Vingt ans après sa conception, le langage CSS n'en est plus à ses balbutiements et n'est plus optionnel en ce qui concerne la conception web moderne. Sans le moindre concurrent en vue, CSS a encore de belles années devant lui. Et pour cause, il est toujours en perpétuelle évolution !
Ce livre n'a pas pour prétention d'être le guide ultime de l'intégrateur dans la mesure où il ne reprend pas les bases. Il offre simplement une mise à niveau en levant le voile sur tous les modules CSS, afin d'offrir dès aujourd'hui les connaissances nécessaires à la réalisation de sites et d'applications web. En effet, les enjeux comme les objectifs ne sont plus les mêmes qu'il y a quelques années, aussi est-il important que les intégrateurs, designers et développeurs s'arment face aux nouvelles problématiques que sont le Responsive Web Design, le rétrécissement de l'écart entre le Web et le natif, et la course à la performance.
Qu'il s'agisse de mise en page avec Flexbox ou Grid Layout, d'embellissement des interfaces, d'élaboration d'animations ou même de design fluide avec les Media Queries, vous devriez être capable de maîtriser tous ces sujets au sortir de votre lecture.
Au-delà de l'aspect purement didactique de l'ouvrage, vous trouverez un grand nombre d'exemples et de mises en pratique, ainsi que tout ce que vous devez savoir vis-à-vis du support des fonctionnalités par les navigateurs. Pour finir, vous découvrirez dans les annexes la liste des valeurs par défaut des propriétés CSS, celle des propriétés que l'on peut animer et une bibliographie pour aller plus loin.
Édition : Eyrolles - 354 pages , 4eédition, 26 février 2015
ISBN10 : 2212140231 - ISBN13 : 9782212140231
19 cm x 23 cm ; 958 g ; quadri
34.90 € TTC (prix éditeur 34.90 € TTC)
L'état actuel du W3C et des standards CSS
Une évolution implacable
Un tour d'horizon des navigateurs d'aujourd'hui
L'état actuel des standards
L'aventure des préfixes constructeurs
La standardisation des CSS
Les sélecteurs : l'accès au DOM
Les pseudo-classes de position
Les pseudo-classes de contexte
Les pseudo-classes de formulaire
Positionnement et layout : les nouvelles techniques de mise en page
Le modèle de boîte : retour aux sources avec box-sizing
Le multicolonne
Les modèles de boîtes flexibles avec Flexbox
Le Grid Layout
La position « sticky »
Les masques de forme en CSS
Interfaces graphiques et amélioration visuelle
Des couleurs plus colorées
Des bords arrondis en CSS
Des ombres avec box-shadow
Des ombres de texte avec text-shadow
Un meilleur contrôle des arrière-plans
Des images comme bordures
De nouvelles unités et valeurs
Le Saint-Graal des calculs : calc
Root em : l'évolution de l'unité em
Une unité pour la largeur d'un caractère : ch
Les unités relatives au viewport
Les dimensions intrinsèques
Contrôle du texte
La gestion des débordements avec overflow-wrap
La gestion des espaces avec white-space
Les débordements de texte et text-overflow
Les césures avec hyphens
Les césures agressives avec word-break
La gestion des tabulations avec tab-size
Une ponctuation plus élégante avec hanging-punctuation
De meilleurs alignements avec text-align-last
La restriction de caractères avec unicode-range
Cas pratique : des blocs de code qui donnent envie
Variables natives
Les variables invalides
Les valeurs de recours en cas d'invalidité
Cas particuliers et clarifications
La compatibilité des navigateurs pour les variables natives
Transformations : un nouveau monde en 2D et en 3D
À quoi servent les transformations CSS ?
Les transformations 2D
L'origine de transformation
L'ordre des transformations
Cas pratique : effet card flip
Animations et transitions : pour des interfaces moins statiques
À quoi servent les animations ?
Animation ou transition ?
À propos de l'accélération matérielle
JavaScript ou CSS ?
Annexe A – Liste des propriétés CSS et de leur valeur par défaut
Annexe B – Liste des propriétés CSS qui peuvent être animées
Ce que l'on aimerait pouvoir animer
Annexe C – Ressources et liens
Critique du livre par la rédaction David Bleuse le 26 février 2019
« 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.
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.
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.
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).
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 !
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).
Laethy	- Community Manager	https://www.developpez.com
Je vous invite à lire la critique de David Bleuse au sujet du livre :
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. Lire la suite de la critique...
le 22/03/2019 à 11:02
A Book Apart n°2
Traducteurs : Charles Robert
Les CSS sont aujourd'hui un incontournable pour tous les web designers ; des sélecteurs avancés à la génération de contenu, en passant par les web fonts, les dégradés, les ombres et les arrondis, jusqu'aux animations les plus complètes, CSS3 offre tout un univers de possibilités créatrices.
Nul ne pouvait mieux vous guider à travers ces galaxies que le web designer de renom, auteur et superstar des CSS, Dan Cederholm, qui dans cette nouvelle édition mise à jour, vous présente de nouvelles propriétés et techniques, avec notamment un tout nouveau chapitre sur les mises en page à petite échelle (agencement en multicolonnes, Flexbox).
Découvrez avec lui ce qui marche, comment ça marche et que faire quand ça ne marche pas !
Édition : Eyrolles - 152 pages , 2eédition, 22 septembre 2016
ISBN10 : 2212117655 - ISBN13 : 9782212117653
Traduction du livre CSS3 for Web Designers, 2nd edition publié en 2014 aux éditions A Book Apart LLC ; 14 cm x 21,5 cm ; 305 g ; quadri
12.00 € TTC (prix éditeur 12.00 € TTC)
Utiliser CSS3 aujourd'hui
Mais ne lisez pas la spécification
Tout le monde peut utiliser CSS3
Principales propriétés CSS3 utilisables aujourd'hui
Préfixes de navigateur
Comprendre les transitions CSS
La queue qui remue le chien
Mais que sont ces transitions CSS ?
La fonction de timing (ou : « J'aurais vraiment dû suivre ces cours de maths »)
Différer la transition
Transitions abrégées
Empiler les transitions
États de transition
Appliquer une transition à plusieurs propriétés
Appliquer une transition à toutes les propriétés potentielles
Quelles sont les propriétés CSS compatibles avec les transitions ?
Pourquoi ne pas plutôt utiliser JavaScript ?
Soyez malin, soyez subtil
Broder avec CSS3
Surprise et émerveillement
Les sites web doivent-ils offrir exactement la même expérience dans tous les navigateurs ?
Parcourir la Lune
Effet de survol simple et flexible avec la propriété opacity
Brodez la toile
Transformer le message
Transformation d'échelle
Transformer l'expérience
rotate, skew et translate
Différentes transformations au service du message
Transformer la Lune
Répétez après moi : intelligent et subtil
La vieille méthode : des balises superflues
La nouvelle méthode : arrière-plans multiples via CSS3
Utiliser les arrière-plans multiples aujourd'hui
Enrichir les formulaires
Programmation d'un simple formulaire d'inscription
Style des éléments fieldset et label
Style des champs de saisie
Les dégradés CSS
Un vrai bouton en CSS3
Utilisation de box-shadow pour créer des états focus
Ajout d'animations CSS pour enrichir l'interactivité du formulaire
Misez sur l'interaction
Mises en page à petite échelle
Mise en page multicolonnes
Flexboxer le futur
Lectures et ressources complémentaires
Critique du livre par la rédaction David Bleuse le 10 septembre 2018
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).
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.
le 05/09/2018 à 12:08
Retrouvez tous les meilleurs livres CSS
A Book Apart n°10
Édition : Eyrolles - 96 pages , 1re édition, 26 février 2015
ISBN10 : 2212141475 - ISBN13 : 9782212141474
Traduction du livre SASS for web designers publié en 2013 aux éditions A Book Apart LLC ; 14 cm x 21,5 cm ; 206 g ; quadri
Pourquoi Sass ?
Sass en quelques mots
CSS, c'est compliqué
Qu'est-ce que Sass ?
Syntaxe de Sass
Mythes sur Sass
Workflow Sass
Installer Sass sur un Mac
Installer Sass sous Windows
Définir les fichiers à surveiller
Utiliser une application à la place de la ligne de commande
Choisir un style de formatage
N'éditez pas le fichier converti !
Nous avons un workflow, alors au travail !
Utiliser Sass
Imbrication de propriétés composites
Référencer les sélecteurs parents avec &
Commenter dans Sass
CSS3 adore les mixins
Créer une bibliothèque de mixins
Sass et les media queries
Media queries imbriquées
« Rétiniser » les images d'arrière-plan HiDPI
Critique du livre par la rédaction David Bleuse le 3 juillet 2018
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).
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.
le 28/06/2018 à 12:05
Vers HTML5 et CSS3
de Raphaël Goetter
Incontournable du design Web moderne, les feuilles de styles CSS sont en pleine révolution avec l'adoption des nouveaux standards HTML5 et CSS3. Familier de CSS2, allez plus loin en maîtrisant les techniques avancées déjà approuvées dans CSS2.1 et découvrez les multiples possibilités de CSS3 !
Chaque jour mieux prises en charge par les navigateurs, les CSS sont sans conteste un gage de qualité dans la conception d'un site Web élégant, fonctionnel et accessible, aussi bien sous Mozilla Firefox, Google Chrome, Opéra ou Safari que sous Internet Explorer ou les navigateurs mobiles.
Vous croyiez tout savoir sur les CSS ? Grâce à la deuxième édition de ce livre de référence, enrichie et mise à jour, vous irez encore plus loin ! Vous apprendrez à faire usage tout autant des technologies avant-gardistes de CSS3 et HTML5 que de pratiques avancées, concrètes et mal connues déjà utilisables en production, et ce, pour l'ensemble des médias reconnus par les styles CSS (écrans de bureau ou mobiles, messageries, mais aussi impression, médias de restitution vocale, projection et télévision). Maîtrisez tous les rouages du positionnement en CSS2.1, exploitez les microformats, optimisez les performances d'un site, gérez efficacement vos projets ou contournez les bogues des navigateurs (hacks, commentaires conditionnels, HasLayout...). Enfin, profitez dès aujourd'hui des nouveautés de CSS3 : typographie, gestion des césures, colonnes, arrière-plans, dégradés, ombres portées, redimensionnement, rotations, transitions et autres effets animés, sans oublier les Media Queries, qui permettent d'adapter le site à son support de consultation.
Conseils méthodologiques, bonnes pratiques, outils, tests, exemples avec résultats en ligne, quizzes et exercices corrigés, tableaux récapitulatifs... Rien ne manque à ce manuel du parfait designer Web !
À tous les concepteurs de sites qui souhaitent exploiter les CSS au maximum de leurs possibilités ;
Aux designers, développeurs et intégrateurs Web impatients de découvrir et d'utiliser CSS3.
Édition : Eyrolles - 385 pages , 2eédition, 2 février 2012
ISBN10 : 2212134053 - ISBN13 : 9782212134056
38.50 € TTC (prix éditeur 38.50 € TTC)
Tirer le meilleur de CSS
Exploiter les possibilités de CSS2.1
Gestion de projet et performance
Le positionnement en CSS
Positionnement avancé
HTML5 et CSS3 : l'innovation en marche
La révélation HTML5
En route vers CSS3
CSS et applications spécifiques
CSS pour le Web mobile
CSS pour l'impression
CSS et les messageries
Et les autres périphériques ?
Liste de toutes les propriétés CSS (CSS1, 2 et 3)
Prise en charge de HTML5 et CSS3
Critique du livre par la rédaction David Bleuse le 23 janvier 2015
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 !
le 23/01/2015 à 14:17
Vous croyiez tout savoir sur les CSS ? Grâce à la deuxième édition de ce livre de référence, enrichie et mise à jour, vous irez encore plus loin ! Vous apprendrez à faire usage tout autant des technologies avant-gardistes de CSS3 et HTML5 que de pratiques avancées, concrètes et mal connues déjà utilisables en production, et ce, pour l'ensemble des médias reconnus par les styles CSS (écrans de bureau ou mobiles, messageries, mais aussi impression, médias de restitution vocale, projection et télévision).
le 23/01/2015 à 14:20
David Bleuse nous propose une critique positive de ce livre !
Lisez les critiques.
N'hésitez pas à nous faire pas de votre propre critique.
Les feuilles de styles CSS sont devenues un outil incontournable pour tous les web designers. Des sélecteurs avancés à la génération de contenu, en passant par le grand retour des web fonts, les dégradés, les ombres et les arrondis, jusqu'aux animations les plus complètes, CSS3 offre tout un univers de possibilités créatrices.
Nul ne pouvait mieux vous guider à travers ces galaxies que le designer de renom, auteur et superstar du CSS, Dan Cederholm. Découvrez avec lui ce qui marche, comment ça marche, et que faire quand ça ne marche pas !
Édition : Eyrolles - 132 pages , 1re édition, 20 janvier 2011
ISBN10 : 2212129874 - ISBN13 : 9782212129878
Livre (broché) - 14 x 21 cm
11.04 € TTC (prix éditeur 12.00 € TTC)
Avant-propos de Jeffrey Zeldman
La fonction de timing
Propriétés CSS compatibles avec les transitions
DBrodez la toile
Les dégradés CSS3
Conclusion - Le futur de CSS3
Critique du livre par la rédaction Didier Mouronval le 20 février 2013
« 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.
le 20/02/2013 à 8:56
Je vous propose une critique du livre CSS3 pour les Web designers.
Cet ouvrage décrit de manière claire et succincte la dernière évolution des spécifications CSS afin de faire partager l'essentiel de CSS3 aux designers web. Découvrez avec Dan Cederholm - designer de renom, auteur et superstar du CSS - ce qui marche, comment ça marche, et que faire quand ça ne marche pas !
Si vous aussi vous l'avez lu et apprécié (ou pas ) n'hésitez pas à faire part de vos remarques et commentaires.
Vous pouvez aussi poser vos questions sur ce livre (qui ne seraient pas abordées dans la critique) afin de vous aider à guider votre choix si vous souhaitez l'acheter.
CSS3 pour les Web designers.
johnrock	- Membre régulier	https://www.developpez.com
le 18/03/2013 à 17:34
Le livre « CSS3 pour les Webdesigners » est un bon petit livre de la collection « A Book Apart ». Je trouve qu'il ne ne fait découvrir l'ensemble des spécifications de CSS3. Il parle beaucoup plus à ceux qui souhaitent mettre en place certaines fonctionnalités de CSS3 sur leur site sans pourtant aspirer à devenir un expert de la technologie. Il s’adresse aussi à ceux veulent améliorer l'apparence de leurs sites mais, tout en ne citant que les bases sans préciser l'ensemble des dernières évolutions des spécifications de CSS3.
Apparemment je pense la même chose que le premier.
de David Sawyer McFarland
Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as window-dressing to spruce up their site's appearance. You can tap into the real power of this tool with CSS: The Missing Manual. This second edition combines crystal-clear explanations, real-world examples, and dozens of step-by-step tutorials to show you how to design sites with CSS that work consistently across browsers. Witty and entertaining, this second edition gives you up-to-the-minute pro techniques.
Édition : O'Reilly UK - 558 pages , 2eédition, 1er septembre 2009
ISBN10 : 0596802447 - ISBN13 : 9780596802448
24.05 € TTC (prix éditeur 28.00 € TTC)
Part Two: Applied CSS
vSprucing Up Your Site's Navigation
Part Three: CSS Page Layout
Building Float-Based Layouts
Part Four: Advanced CSS
CSS for the Printed Page
CSS 3: CSS on the Edge
CSS in Dreamweaver CS4
Critique du livre par la rédaction Eusebe le 1er décembre 2009
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.
Ces exercices pratiques, agrémentés d'astuces et d'illustrations en couleur, enseignent les dernières techniques de conception des sites Web en CSS (Cascading Style Sheets ou feuilles de style en cascade). Les CSS permettent de contrôler facilement l'apparence des sites Web en décrivant dans un document séparé la présentation visuelle des pages HTML ou XML. En un tour de main, vous pourrez opérer aussi bien des changements mineurs des sites qu'entreprendre une restructuration complète de votre site. Grâce à cet ouvrage, vous découvrirez dans un premier temps les notions fondamentales des CSS, puis vous apprendrez à créer des systèmes de navigation et des mises en pages efficaces, avant de passer au travail avec la typographie, les couleurs, les arrière-plans et l'espace blanc.
Édition : Campus Press - 435 pages , 1re édition, 14 novembre 2008
ISBN10 : 2744023124 - ISBN13 : 9782744023125
Broché, 992 x 102 x 811
23.66 € TTC (prix éditeur 24.09 € TTC)
Sélecteurs et cascade
Utiliser des css pour affecter la mise en page
Définir les propriétés de premier plan et d'arrière-plan
Définir la typographie
Utiliser des marges et des bordures pour créer de l'espace et des séparations
Mettre en forme des tableaux
Mise en forme pour l'impression
Assembler les éléments du puzzle
Critique du livre par la rédaction RideKick le 15 avril 2009
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.
de Christopher Schmitt
Les CSS (Cascading Style Sheets) permettent d'enrichir et de contrôler très précisément la présentation des pages Web. Si la plupart des navigateurs les prennent en charge, quelques différences subsistent encore. CSS par l'exemple se propose, sur le modèle " un problème / une solution / une discussion " de répondre aux questions que tout concepteur de pages Web ne manquera pas de se poser.
Au travers de nombreux exemples, l'auteur montre comment changer rapidement le look d'une page web ; quelques modifications dans la feuille de style suffisent pour obtenir des pages vraiment différentes. Des exemples complets de conception de feuilles de styles illustrent les différents chapitres.
Les solutions proposées couvrent un large éventail, allant du plus simple au plus complexe. Pour ne citer que quelques-unes des recettes de cet ouvrage :
Typographie : définir une lettrine, contrôler la taille des polices, supprimer l'espace entre les titres et les paragraphes ;
Les images : placer des bordures, jouer avec la transparence, utiliser les techniques des angles arrondis, des portes
coulissantes et des sommets montagneux ;
La page : éliminer les marges, placer une bordure, ajouter une lightbox ;
Listes : les indenter, modifier leur format ; utiliser de grandes images comme marqueurs de liste ;
Liens et navigation : faire clignoter le texte, créer des menus contextuels, changer les couleurs des liens dans différentes parties d'une page, insérer des caractères spéciaux avant les liens ;
Formulaires : créer des boutons de formulaires, appliquer des styles différents aux éléments de saisie d'un formulaire ;
Tableaux : définir l'espacement entre les cellules, concevoir un calendrier, saisir des données comme dans un tableur, alterner
les couleurs d'arrière-plan des lignes d'un tableau ;
Mise en pages : exploiter toutes les possibilités des colonnes et créer des mise en pages asymétriques ;
Impression : créer une page et des formulaires faciles à imprimer ;
Astuces : installer plusieurs versions d'Internet Explorer pour Windows sur un ordinateur, tester un site web dans un
navigateur textuel ;
Conception : utiliser les images panoramiques ou les bulles de texte, utiliser les CSS dans Adobe Dreamweaver ou Microsoft Expression Web Designer.
Cet ouvrage (qui couvre CSS 2.1) donnera au concepteur de pages web, quel que soit son niveau, les moyens de maîtriser les feuilles de style et d'obtenir des pages attrayantes et faciles à modifier.
Édition : O'Reilly - 493 pages , 2eédition, 22 mars 2007
ISBN10 : 2841774325 - ISBN13 : 9782841774326
Broché, 945 x 102 x 693
Liens et navigation
Astuces, solutions de rechange et dépannage
Conception avec CSS
Propriétés CSS 2.1 et extensions particulières
Sélecteurs, pseudo-classes et pseudo-éléments CSS 2.1
Styler les éléments de formulaire
Critique du livre par la rédaction RideKick le 13 mars 2008
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.
Techniques professionnelles pour une mise en page moderne
de Eric A. Meyer
Traducteurs : Laurence Chabard
Donnez plus de place aux CSS (Cascading Style Sheets) dans la conception de vos sites Web !
Vous vous intéressez aux CSS ? Vous préférez un apprentissage basé sur la pratique plutôt que sur la théorie ? Ce livre est pour vous ! Au travers de projets concrets, vous y découvrirez notamment comment résoudre certains problèmes de mise en page. Éric Meyer, le maître du design en CSS, vous propose ici dix exercices extrêmement utiles, conçus pour vous inciter à exploiter davantage les vertus des CSS dans la réalisation de vos sites : vos mises en page deviendront plus flexibles et vous y gagnerez en accessibilité grâce à un poids réduit tout en y introduisant de très beaux effets visuels !
Chaque projet se présente comme un exercice : facile à suivre, formaté en couleur et jalonné de notes, astuces et avertissements, ils vous aideront à maîtriser les CSS. Parmi les sujets abordés, on compte :
La conversion d'une page HTML en une mise en page par positionnement CSS
La mise en forme d'une galerie de photos
L'emploi d'images d'arrière-plan pour un effet de transparence compatible sous tous les navigateurs
L'emploi de listes de liens pour créer des onglets et des menus déroulants sans recours à JavaScript
La création d'un design pour le site CSS Zen Garden
Édition : Campus Press - 260 pages , 1er février 2005
ISBN10 : 2744018341 - ISBN13 : 9782744018343
Conversion d'une page HTML
Mise en forme d'une série de photos
Mise en forme d'un rapport financier
Positionnement en arrière-plan
Menus en liste
Menus déroulants en CSS
Navigation par onglets esthétiques
Mise en forme d'un weblog
Design d'une page perso
Un design Zen Garden
Critique du livre par la rédaction giminik le 1er février 2005
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.
CSS (Cascading Style Sheets) est un standard du W3C permettant d'enrichir et de contrôler finement la présentation de pages web. Aujourd'hui supporté par la grande majorité des navigateurs, il s'érige en standard. Cet ouvrage vous présente tout ce qu'il y a à connaître sur les feuilles de style. Étayé de nombreux exemples, il se propose de vous mener progressivement vers une implémentation parfaite des feuilles de style et de rendre ainsi vos pages web attrayantes et faciles à maintenir. Vous trouverez, parmi d'autres sujets, dans cet ouvrage :
Des explications quant à la structure de CSS : ce qu'est une cascade, comment CSS et XHTML peuvent cohabiter, les règles de bases de CSS.
La manière de bien utiliser les polices, les marges, les couleurs, les arrière-plans, les propriétés de texte, etc.
L'art du positionnement des éléments, des tables, des listes
Comment faire des présentations sonores, pour des médias différents
Des annexes qui récapitulent les différentes propriétés de CSS, ainsi que ces sélecteurs, pseudo-classes et pseudo-éléments.
CSS - La référence est un ouvrage exhaustif qui s'adresse tout aussi bien au webmaster qu'au designer. Abordant CSS2 et 2.1, et les premiers éléments de CSS3, il constitue une véritable encyclopédie pour ceux qui souhaitent apporter à leurs sites web les techniques de présentation modernes.
Édition : O'Reilly - 520 pages , 2eédition, 1er avril 2005
ISBN10 : 2841773574 - ISBN13 : 9782841773572
45.06 € TTC (prix éditeur 48.00 € TTC)
CSS et les documents
Structure et cascade
Valeurs et unités
Mise en forme visuelle de base
Espacements, bordures et marges
Flottement et positionnement
Mise en forme des tables
Listes et contenu généré
Référence des propriétés
Référence des sélecteurs, des pseudo-classes et des pseudo-éléments
Exemple de feuille de style HTML 4
Critique du livre par la rédaction BrYs le 1er avril 2005
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.
Critique du livre par la rédaction giminik le 1er avril 2005
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.
de David Shea, Molly Holzschlag
Le design en CSS est-il forcément synonyme de design rébarbatif ? Persuadé du contraire, Dave Shea a voulu mettre fin aux idées reçues en prouvant que les CSS pouvaient être un allié de poids pour les designers, tant en matière de créativité, que d'efficacité et de flexibilité. En mai 2003, il lance le site CSS Zen Garden (www.csszengarden.com). L'idée est simple et élégante : proposer un code HTML bien écrit à des designers pour qu'ils exercent leur talent et mettent en oeuvre leur imagination pour créer des designs en CSS, puis mettre ces réalisations en ligne à la disposition de tous.
Depuis ses modestes débuts, Zen Garden a bien grandi et compte aujourd'hui plus de 150 designs reçus du monde entier. Le site s'est imposé comme la référence du design de haute qualité en CSS dans toute la communauté des développeurs et designers web.
Dans le Zen des CSS, Dave Shea et Molly Holzschlag vous font voyager à travers 36 des meilleures contributions à Zen Garden en détaillant le processus d'élaboration, les outils et le code utilisé derrière chaque design.
de superbes exemples de designs web en CSS
des astuces pour égayer un design à l'aide de la typographie
de judicieux détournements et des techniques pour assurer la pérennité de vos CSS
de précieux conseils pour réduire le temps de téléchargement des images
le secrets des CSS des plus grands noms du design et développement web.
Édition : Eyrolles - 296 pages , 1re édition, 1er novembre 2005
ISBN10 : 2212116993 - ISBN13 : 9782212116991
28.41 € TTC (prix éditeur 29.09 € TTC)
Chapitre 1 : Code Source
Chapitre 2 : Design
Chapitre 3 : Mise en page
Chapitre 4 : Images
Chapitre 5 : Typographie
Chapitre 6 : Effets spéciaux
Chapitre 7 : Reconstruction
Critique du livre par la rédaction freegreg le 1er novembre 2005
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.
Critique du livre par la rédaction arnaud le 1er novembre 2005
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.
de Andy Clarke
Édition : Eyrolles - 366 pages , 20 août 2007
ISBN10 : 2212121075 - ISBN13 : 9782212121070
Pourquoi est-il désormais possible de transcender CSS ?
Les conseils des pros en matière de prototypes interactifs
Chercher des grilles en dehors du Web
Le design web vu comme un bel art
CSS 3 (la troisième fois sera la bonne)
Mises en page complexes
Critique du livre par la rédaction pyrrha le 7 mai 2009
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.
Critique du livre par la rédaction MasterOfChakhaL le 30 août 2007
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.
de Éric Sarrion
Web 2.0 ou pas, quand il s'agit de construire rapidement des pages dynamiques, agréables à consulter et susceptibles de servir de briques à des applications web toujours plus complexes, il est indispensable de maîtriser JavaScript et les CSS, les deux éléments fondamentaux du Web côté client. Pour la deuxième édition de son best-seller, Éric Sarrion a choisi de développer largement les parties consacrées à JavaScript. La grande nouveauté de cette nouvelle édition est une analyse exhaustive des bibliothèques Prototype et Scriptaculous, utilisées par toutes les applications Web 2.0, et que les autres ouvrages sur le sujet se contentent généralement de survoler. La partie I, consacrée aux feuilles de style, montre les différentes manières de styler une page HTML et progresse jusqu'à obtenir des mises en page avec menu ou en arborescence, uniquement à l'aide des CSS 2, la dernière version des CSS compatible avec tous les navigateurs. La partie II se concentre sur les bases de JavaScript, un langage très puissant, mais beaucoup plus simple à apprendre qu'on ne le croit généralement. La fameuse API DOM (Document Object Model), incluse dans tous les navigateurs modernes, est étudiée dans la partie III. Elle permet au programmeur d'accéder et de modifier à volonté n'importe quel élément de la page. La partie IV est consacrée aux communications AJAX. Vous y trouverez aussi des exemples de code côté serveur en Java et Ruby. La partie V détaille la bibliothèque Prototype, ainsi que la notation JSON, qui permet d'alléger le code JavaScript de façon spectaculaire. Enfin, la partie VI passe en revue, exemples à l'appui, toutes les classes, méthodes et propriétés de la bibliothèque d'effets Scriptaculous. Impossible de trouver plus complet sur le sujet ! À l'heure où les applications Web mobilisent les principaux acteurs de l'Internet, ce livre, dont les nombreux exemples ont tous été testés avec les derniers navigateurs (y compris Firefox 2 et Internet Explorer 7), accompagnera les webmasters et les développeurs pour qui le Réseau est un nouvel espace de créativité.
Édition : O'Reilly - 643 pages , 2eédition, 1er mars 2007
ISBN10 : 2841774538 - ISBN13 : 9782841774531
42.75 € TTC (prix éditeur 42.75 € TTC)
Bibliothèque Prototype
Bibliothèque Scriptaculous
Critique du livre par la rédaction bigboomshakala le 9 août 2007
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.
le 02/06/2014 à 20:20
Un seul livre pour apprendre l'XHTML et les CSS
Vous découvrirez dans cet ouvrage à l'exposé clair et rigoureux toutes les subtilités de la syntaxe de ces deux langages, et apprendrez à concevoir des documents XHTML et des feuilles de style CSS 2 conformes aux standards les plus récents du W3C. Vous découvrirez en particulier comment réaliser des mises en pages sophistiquées sans recourir aux tableaux, grâce aux puissantes techniques de dimensionnement et de positionnement de CSS.
Édition : Eyrolles - 508 pages , 1re édition, 1er mars 2006
ISBN10 : 2212116373 - ISBN13 : 9782212116373
28.41 € TTC (prix éditeur 29.90 € TTC) livraison gratuite !
Introduction à XHTML
Structure d'un document XHTML
Créer du texte et des listes
Insérer des images et du multimédia
Couleurs et image de fond
Créer des bordures, marges, espacements et contours
Le style du texte et des liens
Créer une mise en page : le dimensionnement et le positionnement
Le style des tableaux
Le style des listes
Référence des éléments XHTML
Référence CSS 2
Les entités de caractères
Critique du livre par la rédaction freegreg le 15 août 2006
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.
Critique du livre par la rédaction arnaud le 29 décembre 2006
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.
Les pages Web sont aujourd'hui omniprésentes et servent aussi bien à construire des sites consultables sur l'Internet que des interfaces pour toutes sortes d'applications qui se doivent d'être à la fois performantes et élaborées au plan graphique.
Pour ceux qui veulent prendre part à cette évolution, il devient indispensable de maîtriser les CSS 2.0, et des connaissances minimales en JavaScript ne sont plus superflues.
C'est dans cette optique qu'Éric Sarrion a conçu un ouvrage à la fois complet et compact, qui montre, exemples à l'appui, comment styler une page Web avec CSS et comment la rendre auto-modifiable en fonction du contexte, grâce à JavaScript :
La partie I consacrée aux feuilles de style, explique les différentes manières de styler une page HTML et progresse jusqu'à obtenir des mises en page avec menu ou en arborescence, uniquement à l'aide des CSS.
La partie II se concentre sur les bases de JavaScript, qui s'avère être un langage beaucoup plus simple qu'on ne le croit généralement.
Couplé à la fameuse API DOM ( Document Object Model ) incluse dans les navigateurs modernes et étudiée dans la partie III , JavaScript permet de rendre vos pages HTML entièrement dynamiques.
À l'heure où les applications Web mobilisent les principaux acteurs de l'Internet, ce livre consacré au côté client, accompagnera bien sûr les designers, mais aussi les webmasters et les développeurs pour qui le réseau est un nouvel espace de créativité.
Édition : O'Reilly - 305 pages , 1re édition, 1er novembre 2005
ISBN10 : 2841773817 - ISBN13 : 9782841773817
Qu'est-ce qu'un style?
Propriétés des éléments HTML
Exemples de feuilles de style
Ecrire et déboguer du code JavaScript
Syntaxe du langage
Classes et opérateurs JavaScript
API DOM
Critique du livre par la rédaction denisC le 1er novembre 2005
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.
le 02/06/2014 à 20:23

References: §3
 §5
 §1
 §1
 §1
 §1
 §2
 §2
 §2
 §1
 §4
 §1
 §2
 §3
 §1
 §4
 §1
 §4
 §5
 §1
 §1
 §5
 §3
 §5
 §4
 §2
 §2
 §5
 §6
 §1
 §5
 §6
 §4
 §5
 §6
 §10
 §3
 §6
 §2
 §2
 §7
 §8
 §9
 §3
 §9
 §2
 §2
 §4
 §4
 §3
 §2
 §6
 §5
 §4
 §1
 §2
 §3
 §2
 §2
 §2
 §5
 §1
 §3
 §1
 §2
 §1
 §1
 §4
 §4
 §4
 §4
 §2
 §2
 §2
 §2
 §13
 §3
 §2
 §4
 §6
 §3
 §3
 §14
 §4
 §2
 §1
 §2
 §1
 §2
 §1
 §7
 §4
 §4
 §1
 §5
 §3
 §2
 §5
 §1
 §3
 §2
 §5
 §2
 §3
 §4
 §5
 §3
 §6
 §5
 §5
 §1
 §2
 §5
 §5
 §3
 §4
 §2
 §1
 §1
 §3
 §2
 §2
 §5
 §6
 §8
 §8
 §5
 §7
 §8
 §8
 §8
 §4
 §8
 §1
 §1
 §2
 §3