CSS maintenables avec Sass & Compass · Lorsque les navigateurs ont commencé à interpréter les...

Kaelig Deloumeau-Prigent

CSS maintenablesavec Sass & Compass

DESIGN

OUTILS ET BONNES PRATIQUES POUR L’INTÉGRATEUR WEB

Préface de Christian Heilmann

2e éd.

© Groupe Eyrolles, 2012, 2014, ISBN : 978-2-212-13640-1

Lorsque les navigateurs ont commencé à interpréter les feuilles de styles en cascade,bien des choses ont changé. Je me souviens encore du premier article sur les CSS, quiprédisait que l’on pourrait multiplier par dix la vitesse des sites web, et diviser pardeux leur temps de maintenance et de développement. C’était vrai, à l’époque. Uneconnexion à Internet faisait le bruit crépitant d’un vieux fax et un débit de 56 kilobitsétait encore un luxe. Quant à la mise en page, il fallait bricoler à l’aide d’images, decouleurs de fond, de tableaux et de balises <font>. Et bien sûr, on espaçait les élé-ments à coups de GIF transparents et d’espaces insécables .

Aujourd’hui, penser le design d’un site sans CSS est devenu inconcevable. Rienqu’en 2012, il y eut tant de nouveautés excitantes que même les animations et lestransformations JavaScript seront bientôt aussi obsolètes que les GIF d’espacementd’autrefois. On peut désormais, en CSS, spécifier différents formats de police,ajouter nos propres polices, créer des motifs, des dégradés et, bien sûr, des transfor-mations, des transitions et des animations. On peut même créer du contenu à seulesfins visuelles et on dispose d’une panoplie de sélecteurs dédiés aux actions de l’utilisa-teur – clic, survol à la souris, sélection, etc.

Mais évidemment, tout se paie... Il faut notamment, pour tenir compte de tous lesnavigateurs existants (et à venir), recopier de nombreuses fois les définitions destyles, à cause des différences d’implémentation qui nous empoisonnent la vie.Certes, ce problème est censé un jour disparaître. Mais cela n’empêche malheureuse-ment pas les gens de persévérer dans leurs erreurs, en privilégiant un navigateur par-ticulier sans prévoir de roue de secours pour les plus anciens. C’est l’erreur qui a étéfaite avec IE6, que l’on paie chèrement aujourd’hui par l’existence de produits tropdifficiles à maintenir et à faire évoluer.

Préface

CSS maintenables avec Sass/Compass - Bonnes pratiques pour l'intégrateur web

© Groupe Eyrolles, 2005VIII

En quelque sorte, c’est l’omniprésence des CSS qui en a ôté le côté magique. Ellessont vues désormais comme allant de soi, et c’est tout juste si, lorsque la premièreédition de cet ouvrage a été publiée, il existait de la documentation voire des pistes deréflexion sur la façon dont les structurer et les écrire proprement et simplement. Nostrès hauts débits et nos systèmes de cache ne sont pas seuls en cause. C’est aussi lemépris des développeurs des langages « de haut niveau » qui a déchu les CSS au rangde bidonvilles de code, alors qu’il faudrait leur donner le même soin qu’à nos pro-grammes en Python ou JavaScript.

La preuve : GitHub, dont le design reste somme toute assez simple, charge 400 Kode CSS et plus de 2 000 lignes de code ! Quant à Facebook, le site en était à plus de2 Mo de CSS avant que certains de mes amis y fassent le ménage et réécriventl’ensemble avec une approche orientée objet. Enfin, on vient de découvrir un nou-veau bogue d’Internet Explorer : il ne peut charger que 32 feuilles de styles externes...

En tant que développeur un peu « vieille école » et artisan, l’idée même de 32 feuillesde styles me laisse sans voix. Il faut reconnaître que la plupart des CMS créent uneCSS par module, y compris pour des gros sites, et qu’au lieu de les concaténer, ils secontentent de les ajouter aux templates...

J’ai autrefois écrit un document CSS de 300 lignes pour un gros site international.Six mois après avoir quitté la société, je suis retourné y jeter un coup d’œil. Le docu-ment avait enflé au point d’atteindre 3 800 lignes, avec des enchaînements à rallongede sélecteurs et des noms de classes ultra spécifiques tels que headingright3c6bold !Les malheureux développeurs chargés de faire évoluer l’apparence du site ne compre-naient visiblement rien au fonctionnement des CSS (ou ne s’en souciaient guère) etavaient ajouté, au petit bonheur la chance, des éléments HTML aux templates, pourpouvoir sélectionner facilement certains éléments spécifiques. Et ce n’était qu’un desnombreux crimes de lèse-CSS commis sous mes yeux.

Voilà pourquoi je me suis tant réjoui de voir apparaître, chez les développeurs web,une saine tendance : le désir de « nettoyer » les CSS existantes, pour revenir à la pro-messe initiale de légèreté et de rapidité.

Le livre que vous tenez entre les mains s’inscrit dans ce mouvement. C’est avec com-pétence, profondeur et vision que l’auteur traite un sujet que la plupart trouvent tropconfus pour s’y intéresser. Je suis très heureux que cet ouvrage voie le jour et je sou-haite que sa lecture vous donne l’envie de remettre l’art et la magie CSS au cœur devos feuilles de styles.

Chris Heilmann,développeur-évangéliste en chef du Mozilla Developer Network

Table des matières

Avant-propos................................. 1Intégrateur web, un métier . . . . . . . . . . . . 1À qui est destiné ce livre ? . . . . . . . . . . . . . 2Structure du livre . . . . . . . . . . . . . . . . . . 2Remerciements . . . . . . . . . . . . . . . . . . . . 4

CHAPITRE 1De <font> à @font-face : une problématique nouvelle....... 5

Aux débuts : pas de CSS, ni d’intégrateurs web . . . . . . . . . . . . . . . . 5L’apparition de la feuille de styles comme livrable . . . . . . . . . . . . . . . . . . . . 6CSS aujourd’hui : standards et diversité des navigateurs . . . . . . . . . . . . . . . . . . . . 8Le futur des CSS . . . . . . . . . . . . . . . . . . 11

Un Web adaptatif . . . . . . . . . . . . . . 11Les régions CSS . . . . . . . . . . . . . . . 12Les exclusions CSS3 . . . . . . . . . . . . 14La liberté typographique . . . . . . . . . . 15Nouvelles structures de langage . . . . . 18

CHAPITRE 2Première plongée dans CSS....... 19

Apprendre les CSS : l’incontournable théorie . . . . . . . . . . . . . 19

Comprendre les CSS, c’est comprendre les navigateurs . . . . . . . . . . . . . . . . . 21Une affaire d’expérience . . . . . . . . . . 22

Être en veille constante . . . . . . . . . . . . . . 24Les sites et blogs spécialisés . . . . . . . . 24

CSS-Tricks . . . . . . . . . . . . . . . . 24Smashing Magazine . . . . . . . . . . 25A List Apart . . . . . . . . . . . . . . . 25Alsacréations . . . . . . . . . . . . . . . 26Pompage.net . . . . . . . . . . . . . . . 26OpenWeb . . . . . . . . . . . . . . . . . 27Le Train de 13h37 . . . . . . . . . . . 2724 Ways . . . . . . . . . . . . . . . . . . 28Mais aussi… . . . . . . . . . . . . . . . 29

Aide entre développeurs . . . . . . . . . . . . . 30À l’aide, j’ai un problème insoluble ! . . 30

Isoler le problème . . . . . . . . . . . . 30Outils, partage et entraide . . . . . . 31Documenter son code pour référence 34

Les logiciels libres : un gisement inépuisable d’exemples . . . . . . . . . . . . . . . . . . . 34

CHAPITRE 3Bonnes pratiques pour un code lisible et maintenable................. 37

Un <head> à toute épreuve . . . . . . . . . . . 37Le doctype pour spécifier le rendu des box par le navigateur . . . . . . . . . . . . . . . . 37Un élément <html> polyvalent avec Modernizr . . . . . . . . . . . . . . . . 38Le mode compatibilité d’Internet Explorer . . . . . . . . . . . . . . 43L’encodage Unicode . . . . . . . . . . . . . 45


© Groupe Eyrolles, 2004X

Récapitulatif . . . . . . . . . . . . . . . . . . 46reset.css : réinitialisation des styles . . . . . . 48

Le reset universel : à éviter . . . . . . . . 49Les reset.css sélectifs . . . . . . . . . . . . 50

Bien ranger ses fichiers . . . . . . . . . . . . . 52Un seul fichier ? Attention aux débordements . . . . . . . . . . . . . . 52À chaque fichier sa fonction . . . . . . . 52

reset.css . . . . . . . . . . . . . . . . . . 52typo.css . . . . . . . . . . . . . . . . . . . 53layout.css . . . . . . . . . . . . . . . . . 53forms.css . . . . . . . . . . . . . . . . . . 54global.css . . . . . . . . . . . . . . . . . 55application.css . . . . . . . . . . . . . . 56print.css . . . . . . . . . . . . . . . . . . 56

Écrire un code lisible . . . . . . . . . . . . . . . 57Conventions syntaxiques . . . . . . . . . 57BEM (Block Element Modifier) . . . . 58Notation multiligne ou monoligne ? . . 61

Round 1 : lisibilité et maintenabilité . . . . . . . . . . . . 61Round 2 : CSS3 . . . . . . . . . . . . 63Round 3 : gérer le suivi des versions 64Vainqueur du match . . . . . . . . . . 65

L’indentation : la clé de la lisibilité . . . 65Au sein d’un sélecteur . . . . . . . . . 66Relations entre les sélecteurs . . . . . 67Indenter les valeurs CSS3 . . . . . . 68

Classer les propriétés . . . . . . . . . . . . 68Par ordre alphabétique . . . . . . . . 69Par type de déclaration . . . . . . . . 69

Utiliser les raccourcis . . . . . . . . . . . . 71Documenter son code . . . . . . . . . . . . . . 71

Avant même de documenter, écrire un code explicite . . . . . . . . . . . 71Syntaxe des commentaires CSS . . . . . 73Quand ne pas (trop) documenter ? . . . 74

Dégradation gracieuse et amélioration progressive . . . . . . . . . . . . . . . . . . . . . . 75

Dégradation gracieuse : la tolérance à l’erreur . . . . . . . . . . . . . 75Amélioration progressive . . . . . . . . . . 77

Simplifier un design trop complexe . . . . . 79Tester, encore et encore . . . . . . . . . . . . . 80

Tests d’interopérabilité (multinavigateur) . . . . . . . . . . . . . . . 80Tests de non-régression . . . . . . . . . . 81Une page pour tester tous les styles : le pattern portfolio . . . . . . . . . . . . . . 82

CHAPITRE 4Pragmatisme : démystifier certaines bonnes pratiques ........ 85

Mythe n°1 – Un HTML « pur » sans aucune information de présentation . . . 86Mythe n°2 – N’utiliser que des éléments sémantiques . . . . . . . . . . . . . . . . . . 90Mythe n°3 – Ne pas créer de classes non sémantiques . . . . . . . . 91Mythe n°4 – Le rendu doit être le même dans tous les navigateurs . . . . . . . . . . 92Mythe n°5 – La taille du texte ne doit pas être exprimée en pixels . . . . . . . . . . . 94

CHAPITRE 5Les frameworks CSS .................... 97

Pourquoi utiliser un framework CSS ? . . . 97Ne pas réinventer la roue . . . . . . . . . . 97Travailler en équipe . . . . . . . . . . . . . 98Prototyper rapidement . . . . . . . . . . . 98Découvrir pour apprendre . . . . . . . . . 99Quand ne pas s’en servir . . . . . . . . . 100

Frameworks les plus populaires . . . . . . . 100Foundation : Responsive Web Design avec Sass . . . . . . . . . . . . . . . . . . . . 100Bootstrap, adaptatif et responsable . . 102960.gs : une simple grille de mise en page . . . . . . . . . . . . . . . 103

Table des matières

© Groupe Eyrolles, 2004 XI

HTML5 Boilerplate : un concentré de bonnes pratiques . . . . . . . . . . . . 104

OOCSS : CSS orientées objet . . . . . . . 105Objets CSS . . . . . . . . . . . . . . . . . 106Séparation de la structure et de l’apparence . . . . . . . . . . . . . . 107

Exemple : boutons d’action . . . . 108Séparation du conteneur et du contenu . . . . . . . . . . . . . . . . 111

Exemple : liste d’actualités . . . . . 112Développer son propre framework ? . . . 118

Pourquoi posséder son propre framework ? . . . . . . . . . 119

Productivité, capitalisation d’expérience . . . . . . . . . . . . . . 119Maîtrise de la compatibilité . . . . 119Flexibilité . . . . . . . . . . . . . . . 120Collaboration . . . . . . . . . . . . . 120

CHAPITRE 6Travailler en équipe.................. 121

La communication avant tout . . . . . . . 121Avec les graphistes . . . . . . . . . . . . 121Avec les développeurs . . . . . . . . . . 122

Conventions de codage . . . . . . . . . . . . 123Conventions syntaxiques . . . . . . . . 123Installer des conventions de nommage 124

Un code accessible aux débutants . . . . . 125Les erreurs à ne pas commettre . . . . . . . 126

Réinventer la roue (carrée) . . . . 126Ne pas documenter son code . . . . 126Factoriser prématurément le code 127Ne pas tester . . . . . . . . . . . . . . 127Se laisser tenter par des techniques « dernier cri » . . . . . . . . . . . . . 127Varier les conventions de nommage . . . . . . . . . . . . . . 128Ne pas communiquer . . . . . . . . 129

Gérer les versions avec Git . . . . . . . . . . 129De l’intérêt d’un outil de gestion de versions . . . . . . . . . . . . . . . . . . 129Présentation de Git . . . . . . . . . . . . 130

CHAPITRE 7Préprocesseurs CSS : quand la machine écrit pour vous....... 131

Un préprocesseur, pour quoi faire ? . . . . 131L’approche DRY : simplicité et élégance du code . . . . . . . . . . . . . . . . 132Étendre les possibilités de CSS . . . . . . . 134Un code valide à tout moment . . . . . . . . 134

Fautes de frappe, oublis… l’erreur est humaine . . . . . . . . . . . . 134Préprocesseur = validateur à la volée . 134

LESS . . . . . . . . . . . . . . . . . . . . . . . . . 135Sass . . . . . . . . . . . . . . . . . . . . . . . . . . 136Stylus . . . . . . . . . . . . . . . . . . . . . . . . . 137

CHAPITRE 8Sass et Compass ........................ 139

Premiers pas avec Sass . . . . . . . . . . . . . 139Interfaces graphiques . . . . . . . . . . . 141

Prepros . . . . . . . . . . . . . . . . . . 141CodeKit . . . . . . . . . . . . . . . . . 142LiveReload . . . . . . . . . . . . . . . 142

Installation en ligne de commande . . 143Sous Mac OS X et Linux . . . . . . 143Si l’opération n’a pas fonctionné sous Mac . . . . . . . . . . . . . . . . . 144Sous Windows . . . . . . . . . . . . . 146

Outil en ligne de commande . . . . . . 146Convertir un fichier en Sass . . . . 147Surveiller un dossier : conversion à la volée en temps réel . . . . . . . . 147

Syntaxe et fonctionnalités de Sass . . . . . 148Syntaxe de base de Sass . . . . . . . . . . 148


© Groupe Eyrolles, 2004XII

Règles imbriquées . . . . . . . . . . . . . 149Sélecteurs avancés . . . . . . . . . . . . . 151

Référencer le sélecteur courant . . . 151Référencer les sélecteurs parents . . 152

Commentaires . . . . . . . . . . . . . . . 152Les variables . . . . . . . . . . . . . . . . . 153Les mixins . . . . . . . . . . . . . . . . . . 154

Définir un mixin : @mixin . . . . 155Appeler un mixin : @include . . . 155Arguments . . . . . . . . . . . . . . . 157Bloc de contenu . . . . . . . . . . . . 158

Héritage de classe : @extend . . . . . . 160Inclure un fichier : @import . . . . . . 161Le module de couleurs . . . . . . . . . . 162

Normalisation automatique . . . . 162Opérations sur les couleurs . . . . . 162Transparence, opacité . . . . . . . . 163Saturation . . . . . . . . . . . . . . . 164Varier la luminosité . . . . . . . . . 164

Bonnes pratiques en Sass . . . . . . . . . . . 165Mixins : attention au surpoids . . . . . 165Imbrications : la règle de l’inception . 166

Un problème répandu . . . . . . . . 166Le cauchemar de la surimbrication 168La règle de l’inception . . . . . . . . 168

Performances : concaténer et compacter les CSS . . . . . . . . . . . 168

Compass : un métaframework . . . . . . . 173Premiers pas avec Compass . . . . . . . 173

Compass dans la pratique . . . . . . . . . . . 176Plus jamais d’images manquantes . . . 176Des images et des fontes embarquées 177Dimensions d’une image . . . . . . . . 177Des sprites sans aucun effort . . . . . . 178

Rappels sur les sprites CSS . . . . . 178Présentation du module de sprites de Compass . . . . . . . . 181

CSS3 facile sans préfixe . . . . . . . . . 182Qu’est ce qu’un préfixe constructeur ? . . . . . . . . . . . . . 183Box-shadow . . . . . . . . . . . . . . 184

Border-radius . . . . . . . . . . . . . 185Des dégradés sous tous les navigateurs . . . . . . . . . . . . . 186Transformations . . . . . . . . . . . 187Transitions . . . . . . . . . . . . . . . 188

CHAPITRE 9Erreurs de conception : comment les débusquer .......... 189

L’usage des CSS sur le Web aujourd’hui . 189Les différents producteurs de feuilles de styles . . . . . . . . . . . . . . . . 191Outils pour diagnostiquer . . . . . . . . . . . 192

L’inspecteur web et Firebug . . . . . . . 192Diagnostic en ligne avec CSS Lint . . 194

Les styles inline (dans la source du HTML) . . . . . . . . . . 195La guerre des règles !important . . . . . . . 196Les règles surspécifiées . . . . . . . . . . . . . 196La multiplication des propriétés . . . . . . 197

CHAPITRE 10Méthode : coder un design de zéro........................................ 199

Étudier le design . . . . . . . . . . . . . . . . . 199Déduire des motifs récurrents . . . . . . . . 200Définir la base typographique . . . . . . . . 201Coder la structure générale . . . . . . . . . . 204Coder les modules . . . . . . . . . . . . . . . . 205Étape finale : les exceptions . . . . . . . . . . 206

CHAPITRE 11Méthode : faire le ménage dans des CSS.............................. 209

À partir de quand et jusqu’à quel point optimiser ? . . . . . . . . . . . . . . 209Étape 1 : utiliser les variables à bon escient . . . . . . . . . . . . . . . . . . . . 210

Les couleurs . . . . . . . . . . . . . . . . . 210Les jeux de polices . . . . . . . . . . . . . 211

Table des matières

© Groupe Eyrolles, 2004 XIII

La grille de mise en page . . . . . . . . 213Créer une grille de mise en page simple et maintenable . . . . . . . . 214

Étape 2 : séparation en plusieurs feuilles partielles . . . . . . . . . . . . . . . . . 217Étape 3 : imbrication des sélecteurs . . . . 218Étape 4 : création de mixins . . . . . . . . . 221

Idées de mixins . . . . . . . . . . . . . . . 222Étape 5 : extensions de classes . . . . . . . . 223

Exemple : étendre un composant . . . 223Exemple : optimiser un mixin . . . . . 224

Bonus : débogage cross-browser sans hacks . . . . . . . . . . . . . . . . . . . . . 226

Méthode 1 : classes et commentaires conditionnels . . . . . . . . . . . . . . . . 228Méthode 2 : feuilles de styles séparées avec Sass . . . . . . . . . . . . . . . . . . . 229

Le principe . . . . . . . . . . . . . . . 229En application . . . . . . . . . . . . 230

En résumé . . . . . . . . . . . . . . . . . . . . . 233

Index........................................... 235

Au cours de mes années de pratique en tant qu’intégrateur indépendant et en agenceweb, j’ai remarqué que la formation des développeurs de systèmes en HTML/CSSpouvait laisser à désirer. Pendant trop longtemps, HTML et CSS sont restés des lan-gages de seconde zone, dont on confie le codage à un stagiaire ou au premier déve-loppeur venu.

Les usages actuels du Web sont tellement divers et omniprésents que l’utilisateurpasse de plus en plus de temps devant son navigateur. Or, la couche applicative laplus proche des utilisateurs est justement le trio HTML/CSS/JavaScript. Et plus çava, plus les utilisateurs sont exigeants sur l’ergonomie, la rapidité d’exécution et lacompatibilité d’un même site entre leurs différents périphériques (mobile, ordinateurde bureau, tablette, téléviseur…). Il n’est plus question de laisser une tâche aussi sen-sible entre les mains d’un néophyte !

Intégrateur web, un métierLe métier d’intégrateur répond à ce besoin de développeurs spécialistes de l’affichagedes pages web dans le navigateur. Malheureusement, le manque de conventions univer-selles et de barèmes dans le métier mène à des conceptions inégales en termes de qua-lité, de productivité et de maintenabilité. Les workflows existants ne permettent plusde faire face à l’incroyable complexité et à l’étendue des possibilités offertes par CSS.

Avant-propos


© Groupe Eyrolles, 20052

Que vous soyez en train de concevoir le prochain Twitter ou votre site personnel, lesbonnes pratiques de maintenabilité, de performance et de qualité constituent tou-jours le meilleur chemin à suivre.

Ce livre tente de répondre aux questions que se posent les développeurs et designers web.• Comment apprendre CSS et rester informé des dernières nouveautés en la matière ?• Comment organiser son travail pour collaborer en harmonie avec son équipe ?• Comment produire un code maintenable pour un site qui évoluera ?• Comment améliorer les performances d’affichage et de chargement d’un site

existant ?• Comment se servir des préprocesseurs ? Quels sont leurs bénéfices (et dangers)

sur la qualité de notre travail ?

À qui est destiné ce livre ?Il est destiné à toute personne qui sera amenée à toucher du code sur des projets webd’une certaine envergure :• les intégrateurs web, développeurs, webmestres, designers web… ;• les développeurs qui aimeraient améliorer la qualité de leur code sans sacrifier leur

productivité ;• les designers web qui en ont assez de « bidouiller » en HTML/CSS et souhaitent

passer à la vitesse supérieure en comprenant les enjeux du Web d’aujourd’hui ;• les amoureux du code élégant, maintenable et collaboratif, désireux de découvrir

de nouvelles manières d’affiner leurs connaissances dans des domaines aussi variésque les préprocesseurs CSS, le travail en équipe et les méthodes de nettoyage ducode dans les gros projets.

Structure du livreCe livre est résolument tourné vers la démonstration par l’exemple. Dans la mesuredu possible, chaque exemple est contextualisé, analysé et expliqué. Vous trouverezdonc régulièrement des morceaux de code rencontrés dans la vie réelle et des conseilsque vous pourrez directement appliquer dans vos futures productions.

Dans un premier temps, nous balaierons les bases, pour aller vers des étapes plustechniques et plus élaborées à la fin. Ainsi, la première moitié du livre aborde les

© Groupe Eyrolles, 2005 3

Avant-propos

principes de la coopération en équipe et les bonnes pratiques pour créer un codemaintenable et élégant.

La seconde partie du livre traite des préprocesseurs CSS, plus spécifiquement Sass(et Compass), outils très pratiques pour produire une intégration toujours plus main-tenable et améliorer sa productivité.

QUI SUIS-JE ?

J’ai commencé la création de sites web au collège par la fonctionnalité d’export HTML de MicrosoftPublisher. Mon travail de fin d’année de quatrième, rendu sur CD-Rom, ne sera jamais publié sur le Web.Les professeurs sont dépaysés par l’initiative et je trouve un nouveau média universel pour faire circulerl’information.Ensuite, je découvre Dreamweaver et CSS en recopiant les feuilles de styles trouvées çà et là dans lasource des sites que je visite. Avec un ami, nous concevons un site consacré au jeu vidéo Starcraft : l’épo-que de Multimania, des modems 56 k et des écrans 14 pouces nous pousse à optimiser le poids despages web. À cette époque, le moindre octet est précieux. Je n’aurais jamais imaginé que ce souci dudétail pour les performances me rattraperait lors de la conception de sites mobiles !C’est après un baccalauréat scientifique obtenu (en 2003) tant bien que mal que je rentre à l’universitépour étudier la psychologie. Passant plus de temps devant mon ordinateur qu’en cours, je me lance dansun projet web : Placebo City, qui deviendra plus tard ma carte de visite pour postuler à LunaWeb. Ce sitecommunautaire consacré au groupe de musique Placebo m’a permis d’expérimenter de nombreuxdomaines liés à la création d’un site : développement, hébergement, graphisme, référencement, gestionde communauté, publicité, e-réputation…Par la suite, je fais quelques à-côtés en produisant des sites à titre amateur pour de petites sociétés ouassociations, puis je postule en 2007 chez LunaWeb comme développeur web. C’est au sein de cetteagence web que j’ai pu faire mes armes en tant qu’intégrateur, exerçant enfin ma passion à titre profes-sionnel. Dans le cadre de ce travail, j’ai eu la chance d’être entouré de gens très compétents qui m’ontpermis d’apprendre ce métier dans des conditions que je qualifierais d’idéales, en travaillant aussi biensur des projets de grande envergure que sur des petites créations expérimentales. Au fil des années, jeme suis donc éloigné des logiciels de mise en page pour me tourner vers une conception au plus prochede la base technique des sites web à l’aide d’un éditeur de texte brut et de préprocesseurs CSS.Aujourd’hui, j’anime un blog, Le ministère de l’intégration, sur lequel on discute de design adaptatif, ouresponsive web design, de HTML, CSS, Sass et Compass.Fin mai 2012, j’intègre une nouvelle équipe en qualité de développeur d’interfaces à la division« Responsive web design » de BBC News à Londres. C’est le début d’une carrière côté annonceur, biendifférente de la vie d’agence en termes de processus de fabrication des sites web. Un an après, jour pourjour, je me retrouve chez le Guardian pour développer la prochaine génération du site de ce grand journalinternational.Quand je ne suis pas devant un écran pour faire ma veille sur Twitter (@kaelig), créer des sites web ouregarder une bonne série, j’aime écouter de la musique, déguster un bon vin entre amis et plus encorefaire les deux à la fois.B http://blog.kaelig.fr

http://blog.kaelig.fr



RemerciementsMes premières pensées vont à mes parents qui m’ont beaucoup aidé lors de l’écriturede ce livre, et tout particulièrement mon père pour sa relecture minutieuse. J’aimeraisaussi remercier pour leur rôle (parfois indirect) dans l’aventure que ce livrereprésente : Muriel des éditions Eyrolles et toute son équipe, Sophie, Laurène, Gaël,Mickaël, les deux Chris, Hampton, Nathan, toute l’équipe de LunaWeb présente etpassée, Matt, Pierre, Boris, Ugo, et Nicolas mon parrain qui m’a fait découvrir StarWars et permis de mettre un pied dans le monde professionnel. Enfin, un salut res-pectueux aux bêta-lecteurs techniques : Raphaël, Gaël-Ian et Mehdi, je vous doisune bière (ou quatre), les gars !

Aux débuts : pas de CSS, ni d’intégrateurs webLe métier d’intégrateur n’est pas né en même temps que le Web, loin s’en faut. Àl’origine, le World Wide Web devait permettre à des chercheurs de partager de l’infor-mation scientifique entre eux ; que les pages soient ou non stylées n’entrait pas dansle champ de leurs préoccupations.

Ceux qui ont vécu cette époque se souviennent que dans les années 1990, les naviga-teurs étaient des logiciels rudimentaires (et parfois payants), les connexions trèslentes et les écrans bien moins larges que ceux d’aujourd’hui.

En 1994, le World Wide Web Consortium (W3C) est fondé par un héros des tempsmodernes, l’inventeur du Web Tim Berners-Lee. Le W3C a pour mission de pro-mouvoir un Web pour tous, se basant sur des technologies universelles validées par lemême organisme, que l’on appelle les standards du Web.

La Toile à ses prémices peut être décrite comme un outil à l’usage d’une élite intel-lectuelle désireuse de partager le fruit de sa pensée, notamment à l’aide de HTML,un langage inventé pour lier entre elles différentes ressources d’Internet.

1De <font> à@font-face : une

problématique nouvelle

Après des prémices chaotiques, le Web arrive peu à peu à maturité. D’un mondetrès artisanal, on se dirige vers une industrie aux codes de plus en plus précis :métiers, standards, organisation, homogénéisation… Retraçons l’histoire dumétier de développeur web côté client, appelé intégrateur web.



Aux balbutiements du Web, styler un document se limite grosso modo à modifier lecorps du texte et à insérer une image. À cette époque, ni le grand public, ni le mondedu graphisme ne s’intéressent encore au Web. Heureusement, une nouveauté techno-logique va venir bouleverser l’austérité ambiante : les feuilles de styles en cascade,plus connues sous le nom de CSS (Cascading Style Sheets).

L’apparition de la feuille de styles comme livrableAu milieu des années 1990, alors que les sites commencent à proliférer sur la Toile,une question épineuse émerge : « Comment produire une charte graphique qui vaillepour l’ensemble d’un site, si ce dernier contient des dizaines et des dizaines dedocuments ? »

En effet, d’une page à l’autre, le créateur d’un site doit répéter les informations deprésentation dans le code HTML lui-même, cette redondance posant un évidentsouci de maintenabilité. Les développeurs web de l’époque expriment en outre lesouhait de pouvoir mieux contrôler l’apparence de leurs pages.

C’est en décembre 1996, après moult délibérations, que le W3C publie la recom-mandation CSS Level 1. C’est une révolution : les feuilles de styles permettent alorsde cibler certains éléments du document et de leur appliquer des styles sans avoirrecours à des informations de présentation au sein du code HTML.

ANECDOTE Le premier site web : août 1991

Le premier site web mis en ligne a été publié le 6 août 1991. Intitulé The WWW Project, ses pagesétaient hébergées sur info.cern.ch par le premier serveur web, un ordinateur de marque NeXT, la compa-gnie fondée par Steve Jobs suite à son départ forcé d’Apple. Aujourd’hui, vous pouvez en trouver unecopie sur le site du W3C.B http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

PAROLE D’EXPERT HTML, la victoire de la pratique sur la règle

Frédéric Kaplan nous livre une version courte de l’histoire du langage HTML, truffée d’anecdotes, danslaquelle il prend le recul nécessaire pour nous dévoiler les principes qui ont fait de HTML ce qu’il estaujourd’hui.B http://fkaplan.wordpress.com/2012/01/18/html-limprobable-resurrection-dune-langue-vivante/

info.cern.ch

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://fkaplan.wordpress.com/2012/01/18/html-limprobable-resurrection-dune-langue-vivante/


1 – De <font> à @font-face : une problématique nouvelle

Pour colorer le texte des cellules d’un tableau, on n’écrit donc plus :

Mais plutôt :

CSS pour styler les cellules de tableau

Code HTML du tableau

Et surtout, les CSS s’appliquent à un site entier, alors que chaque page devait êtrestylée indépendamment des autres auparavant. On imagine le gain de temps poureffectuer la maintenance et les évolutions du design !

<table> <tr> <td><font color="red">Une cellule</font></td> <td><font color="red">Encore une</font></td> <td><font color="red">Et une dernière pour la route…</font></td> </tr></table>

td { color: red; }

<table> <tr> <td>Une cellule</td> <td>Encore une</td> <td>Et une dernière pour la route…</td> </tr></table>

Figure 1–1Comme le dirait ce cher J. R. R. Tolkien : « une feuille de styles pour les gouverner tous ».



CSS aujourd’hui : standards et diversité des navigateursHélas, il faut attendre que l’an 2000 pointe son nez pour que cette spécification soitimplémentée correctement par les éditeurs de navigateurs. C’est Internet Explorer 5Mac qui obtient le premier un taux de conformité frôlant les 100 %. Une belleprouesse… qui survient avec quatre ans de retard si l’on se fie au calendrier du W3C,avec des bogues persistants et pas d’implémentation des CSS niveau 2, dont larecommandation par le W3C date de 1998.

L’industrie du butineur est alors à la traîne et freine l’adoption des dernières avancéesdu Web par les professionnels d’Internet : pour prendre en charge les navigateurs degénérations précédentes, les développeurs conservent leurs bonnes vieilles habitudesde codage en tableaux, aboutissant à des sites peu sémantiques, truffés d’informa-tions de présentation. En raison du lourd retard technologique accusé par les naviga-teurs, CSS a donc du mal à s’imposer. Certains développeurs voient même dans cenouvel apprentissage une perte de temps, considérant qu’un standard aussi malimplémenté est, de fait, voué à l’échec.

Pour des raisons de productivité, la tendance s’oriente vers une pratique qui sera fortdommageable au Web des années 2000 : développer ses sites pour un seul navigateurà la fois, celui qui domine le marché, d’abord Netscape (plus de 80 % de parts demarché à son apogée), puis Internet Explorer. Cette pratique donne lieu à undésastre général : des sites entiers cessent de fonctionner lorsqu’ils sont visités sur uneplate-forme différente de celle pour laquelle ils ont été développés. Qui n’a pas enmémoire la mention apposée sur de nombreux sites web de l’époque : « Site optimisépour Internet Explorer 6 » ? Devant une telle débâcle, les designers désireuxd’exprimer leur talent graphique se tournent alors vers des technologies propriétairescomme Flash…

Malgré toutes ces difficultés, les recommandations du W3C s’imposent petit à petitcomme la voie à suivre par les fabricants de navigateurs.

Les développeurs ne sont plus les seuls à toucher au HTML et certains designerscommencent à mettre la main à la pâte. Le 7 mai 2003, Dave Shea dévoile CSS ZenGarden, un projet personnel lancé dans le but de montrer au monde des concepteursweb encore sceptiques que l’on peut réaliser des choses fantastiques à l’aide du lan-gage CSS. L’idée est matérialisée sous la forme d’une page web codée en XHTMLvalide, associée aux feuilles de styles de talentueux designers. Le principe est simple :chaque designer peut composer la présentation d’un document (dont la structure estimposée) grâce aux feuilles de styles.

Avec son « jardin zen », Dave ouvre la porte des standards du Web aux artistes. Ilpave la route du futur en incitant les techniciens à faire fi des pratiques du passé pourse diriger vers un monde excitant et en pleine ébullition.



Le succès de ce site participatif est immédiat. On recense à ce jour 210 designsacceptés, sans compter les 1 000 « rejetés ». Excellent laboratoire de techniques etsavoirs variés, CSS Zen Garden reste en 2012 une source inspiration pour quiconquesouhaite appréhender sereinement le langage CSS.

Mais revenons à 2001 et à la guerre des navigateurs qui fait rage, Internet Explorergrignotant des parts de marché à Netscape qui peine à conserver son avance. Lenavigateur de Microsoft doit alors faire face à un nouveau challenger : Firefox (qui aporté d’autres noms avant celui-ci : Phoenix puis Firebird). Le navigateur au pandaroux, développé par la fondation Mozilla, devient de plus en plus populaire auprèsdes professionnels du Web jusqu’à toucher le grand public et atteindre de fortes partsde marché dans certains pays.

Figure 1–2http://www.csszengarden.com/

Figure 1–3Le fameux panda roux, emblème de Firefox



À l’époque, Firefox est le premier navigateur moderne capable de rivaliser avecInternet Explorer. Libre et gratuit, couramment mis à jour, plus rapide, multi-plates-formes et proposant un système de modules, Firefox présente de nombreux avantagescomparé au navigateur au « e » bleu. Petit à petit, l’oiseau fait son nid : ce navigateuralternatif gagne la confiance des internautes. Le poids d’Internet devient tel dans lesfoyers que Microsoft doit réagir pour ne pas se faire devancer par ses concurrents.

Les ingénieurs de Redmond dégainent un peu tard et sortent en 2011 la premièreversion d’Internet Explorer qui soit respectueuse des standards, même si cetteversion 9 du navigateur ne reconnaît que partiellement les CSS3.

Pendant ce temps, Google lui aussi est entré dans la course avec Chrome, un navigateurbasé sur le moteur de rendu WebKit, plus connu pour être à la base de Safari, le naviga-teur par défaut des ordinateurs Apple et périphériques iOS (iPad, iPhone, iPod touch).

Mi-2013, Google fait un pas de côté en créant le moteur de rendu Blink à partir deWebKit pour l’intégrer dans Chrome. Opera saute dans le train en marche et abandonnePresto au profit de Blink en en devenant aussi contributeur. Cette séparation du codeentre WebKit et Blink permet à Google et Opera d’innover avec une vélocité accrue…

La course est désormais à qui de Chrome, Firefox ou Internet Explorer proposera lesavancées technologiques les plus spectaculaires. La cadence de mise à jour s’accélèrepour suivre le train de l’innovation : Chrome, dont la première version a vu le jour en2008, en est déjà à sa version 30 au moment où ce livre est publié dans sa secondeédition. Mozilla a aussi revu sa feuille de route à partir de sa version 4 (2011) pourdélivrer des mises à jour majeures quasi tous les mois. Internet Explorer 10 voit lejour en 2012, après un cycle court, comparé aux nombreuses années qui ont séparéIE6 (2001) de IE7 (2006). La version 11 est publiée en octobre 2013 et Microsoftclame que son navigateur est le plus rapide à cette date dans le test Sunspider, quiévalue la rapidité d’exécution de code JavaScript. Ce rythme soutenu dénote un fortdésir d’avancer et trahit l’importance de l’innovation sur ce terrain.

Bien que certains modules de CSS3 ne soient pas encore passés au stade de recom-mandation par le W3C, les navigateurs implémentent déjà des propositions de nou-veautés comme les animations, les transitions, les coins arrondis, les dégradés de cou-leurs… C’est avec les contributions du moteur de rendu WebKit que de nombreusesnouveautés de CSS3 sont apparues.

On peut dire que les navigateurs dits « modernes » ont devancé le W3C sur la plu-part des questions techniques liées au HTML5 (CSS3, JavaScript, HTML), et quecelui-ci devient en quelque sorte l’arbitre du match que se livrent les fabricants denavigateurs à coups de propositions innovatrices.



Si tout n’est pas rose dans le monde des navigateurs, on apprécie de voir une indus-trie entière se diriger vers une harmonisation technologique globale. C’est une bellevictoire pour les standards, qui profite tout d’abord à l’utilisateur, le réel bénéficiaired’un Web où tous les contenus sont accessibles quel que soit son terminal.

Le futur des CSSL’avenir d’Internet est tout tracé : des utilisateurs qui se connectent à de multiples ser-vices, sites et applications via une interface web. Pour satisfaire des besoins croissantsen interactivité et rapidité, les navigateurs se perfectionnent, deviennent de plus en plusagiles au profit d’une expérience utilisateur accrue. Firefox OS est un exemple parfaitde système se basant sur ces standards ouverts : l’interface du système d’exploitationmobile développé par Mozilla est codée en HTML et habillée en CSS.

Pour relever les défis de demain, notamment l’utilisation sur différents terminaux(TV, mobile, tablette), il faut exploiter à bon escient les toutes dernières innovationsen termes de conception web.

Jusqu’ici, on s’est contenté de la propriété float pour concevoir des mises en page àl’aide de blocs flottants… Mais après toutes ces années, il est vraiment temps queCSS offre un terrain de jeu bien plus adapté à ce type d’exercice.

Un Web adaptatifLe Web se dirige clairement vers une consommation des contenus très orientée vers lamobilité. Pour consulter des informations personnalisées sur tous nos périphériqueshigh-tech, que l’on soit au bureau devant son écran d’ordinateur, dans le bus avec sonmobile ou dans son salon avec sa tablette sur les genoux, les feuilles de styles permet-tront bientôt d’adapter encore mieux la mise en page à chaque usage en particulier.Certaines techniques sont disponibles comme les Media Queries. De gros efforts sontfournis sur ce module, tant par le W3C que par les fabricants de navigateurs.

EN SAVOIR PLUS Firefox OS

Mozilla tente de révolutionner le monde du mobile avec un système d’exploitation pour smartphoneappelé Firefox OS. Le système lui-même et les applications sont conçus à l’aide de HTML, CSS et Java-Script, ce qui rend le développement sur cette plate-forme très aisé et démocratique (fidèlement à l’éthi-que de Mozilla).

B http://www.mozilla.org/firefox/os/



La communauté se pose actuellement des questions relatives aux images adaptatives :comment servir une image de petite taille à un mobile sans pénaliser le rendu et lesperformances sur le même site visité depuis un ordinateur de bureau ? Actuellement,plusieurs solutions existent, à base de JavaScript et/ou de détection d’agent utilisa-teur, mais aucune d’entre elles n’est viable. Le W3C a lancé un appel à la commu-nauté pour discuter de ce sujet entre professionnels du Web.

Les régions CSSLe futur de CSS est aussi du côté de la mise en page : nous verrons naître des innova-tions et de sensibles améliorations sur les modules concernés, notamment Layout,Regions et Flexbox (boîtes flexibles), qui sont trois des nouveautés CSS3 les plusprometteuses pour les éditeurs de contenus.

Cette discussion peut être suivie sur : B http://www.w3.org/community/respimg/

Figure 1–4Un site, plusieurs apparences. Ici, le même blog sous différents périphériques http://blog.kaelig.fr/

EN SAVOIR PLUS Positionnement avancé en CSS

Pour en savoir plus sur les nouvelles façons de pratiquer le positionnement des blocs avec CSS3, lisez lelivre CSS avancées de Raphaël Goetter. Le chapitre 5 y est entièrement dédié.R Raphaël Goetter, CSS avancées, Eyrolles, 2012



À propos du module Regions, c’est en mai 2011 qu’Adobe a soumis au W3C uneproposition de module dédié au « zoning » de page. Nous avons déjà à notre disposi-tion des outils de mise en page, dont le positionnement absolu, les éléments flottantset les tables, alors pourquoi chercher plus loin ?

Passé au statut de brouillon (Editor’s Draft) le 6 avril 2012, le module Regions CSSest un moyen avancé d’organiser un document selon un flux de contenu non conven-tionnel, proche des possibilités de mise en page du monde du papier.

Le principe des régions est simple et se base sur un constat bien réel : aujourd’hui,nous savons étaler un texte sur plusieurs zones ou colonnes, mais pour cela, nousdevons mettre en œuvre un découpage HTML complexe et quasi impossible à main-tenir (il faut notamment calculer le nombre de caractères pouvant tenir dans chaquezone…). Avec les régions CSS, le document comporte une mise en page prédéfinie,à laquelle on fournit du contenu de manière brute. En s’adaptant au flux de textedélivré, les régions incorporent le contenu.

HTML

CSS

<div id="texte-source"> <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</strong> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div class="css-region" id="zone-1"></div><div class="css-region" id="zone-2"></div><div class="css-region" id="zone-3"></div>

#texte-source { flow-into: contenu-principal;}.css-region { flow-from: contenu-principal;}



Les exclusions CSS3Aujourd’hui, en CSS, nous n’avons pas la possibilité de commander au texted’épouser les contours d’une image centrée dans un paragraphe. Nous sommeslimités aux positionnements flottants à droite ou à gauche (float: left; etfloat: right;).

Les exclusions CSS3 viennent combler un manque dans le paysage des positionne-ments flottants : positionner un élément de nombreuses manières dans le flux du

Figure 1–5Des colonnes de tailles différentes avec les régions CSS

NORMALISATION Propositions d’Adobe au W3C sur les régions CSS

Adobe publie sur son site le détail de sa proposition au W3C ainsi qu’un descriptif du fonctionnement desrégions. Vous trouverez aussi une documentation étendue et à jour sur le site du W3C.• « CSS regions Module Level 3 Editor’s Draft » (Vincent Hardy, Alex Mogilevsky)B http://dev.w3.org/csswg/css3-regions/• « CSS3 regions: Rich page layout with HTML and CSS3 » (Arno Gourdol)B http://www.adobe.com/devnet/html5/articles/css3-regions.html• « CSS regions: Build complex, magazine-like CSS layouts using web standards »B http://labs.adobe.com/technologies/cssregions/



contenu. Il faudra encore attendre quelques mois avant de pouvoir en profiter. Deplus, il n’est pas dit que des polyfills (équivalents pour navigateurs qui ne proposentpas cette fonctionnalité) existeront pour ce type de besoin. Quoi qu’il en soit, cettenouveauté est plutôt excitante : imaginez ce qu’elle peut apporter aux éditeurs dans lamise en page de leurs contenus !

La liberté typographiqueL’industrie de l’impression papier a toujours possédé une avance considérable sur sonconcurrent numérique pour ce qui est de l’affichage typographique. Entre les policescrénelées (les fameux effets d’escaliers qui tendent à disparaître grâce aux écrans à

NORMALISATION Brouillon Adobe et Microsoft sur les exclusions

Le CSS Working Group a publié un brouillon à l’initiative de deux ingénieurs de chez Adobe et Microsoft,Vincent Hardy et Rossen Atanassov.B http://dev.w3.org/csswg/css3-exclusions/

Figure 1–6Une mise en page vivante grâce aux exclusions CSShttp://dev.w3.org/csswg/css3-exclusions/

http://dev.w3.org/csswg/css3-exclusions/

http://dev.w3.org/csswg/css3-exclusions/



haute densité de type Retina depuis l’iPhone 4), la mauvaise gestion des polices et lerendu disparate d’une plate-forme à l’autre, on peut dire que l’informatique a encoredes efforts à fournir avant de rattraper le papier.

Toutefois, le contrôle de l’affichage typographique est de mieux en mieux géré par lesdifférents périphériques connectés. Nous avons déjà de magnifiques exemples sur laToile conçus par des designers expérimentés dans le domaine de la typographie.

Les nouveautés relatives à la typographie qui profiteront à la créativité sur le Web sont :• @font-face : dites adieu à la domination d’Arial, Georgia et Verdana sur tous les

sites web. Importez les polices qui vous plaisent pour aller plus loin dans le design ;• la césure automatique (hyphenation en anglais) : pour une justification et un

colonnage du texte toujours lisibles ;• les ligatures entre caractères : l’élégance typographique à l’état brut.

Il ne s’agit pas tant d’attendre des avancées du côté du W3C, mais plutôt que cesfonctionnalités soient implémentées dans les navigateurs.

Figure 1–7Un usage intensif de @font-face sur le site de l’agence Yebocreative http://www.yebocreative.com



Figure 1–8Le site de la conférence Ampersand et ses invités de marque http://2012.ampersandconf.com/

Figure 1–9Les ligatures, marques d’une typographie sophistiquée

CONSEIL DE PRO La typographie sous Windows

Quand vous implémentez de telles nouveautés, n’oubliez pas de tester leur rendu dans les navigateurs etsystèmes d’exploitation les plus courants. En effet, Windows propose différents modes de rendu typogra-phique en apposant un traitement différent d’une machine à l’autre selon que la technologie de lissageCleartype est activée ou non. Faites attention aussi à vérifier l’apparence du texte sous Windows 7, quilui-même apporte un moteur de rendu complètement revu (notamment sous Internet Explorer 9).



Nouvelles structures de langageLes préprocesseurs CSS (pour en savoir plus sur ce sujet, consultez le chapitre 7)influencent fortement la qualité et la rapidité de développement, tout en ajoutant unecouche de complexité pour le novice. CSS veut être un langage démocratique, acces-sible à tous. Toutefois, il a été proposé au W3C d’intégrer des fonctionnalités pré-sentes dans Sass (et WebKit pourrait les incorporer très bientôt de son côté) :• les mixins, sortes de fonctions réutilisables (abordés dans le chapitre 7) ;• les variables (déjà à l’état de brouillon W3C au moment de la publication de ce

livre : http://dev.w3.org/csswg/css-variables/) ;• les sélecteurs imbriqués (abordés dans le chapitre 7) ;• les opérateurs : addition, soustraction, multiplication, division, trigonométrie…

http://dev.w3.org/csswg/css-variables/

Index

!important 195@font-face 16960 grid system 205, 213, 216

Aaccessibilité 76adaptatif 11Adobe 13, 15amélioration progressive 20, 40,

42, 75, 77, 89Apple Store 144application.css 56

BBlink 10Blueprint 23, 205Boilerplate 104Bootstrap 23, 102box model voir modèle de boîtes

Ccésure 16Christophe Porteneuve 130Chrome 10, 41classe

extension 223CMS 30, 81, 123, 128, 191, 197CodeKit 142coins arrondis 77commentaires

conditionnels 227, 228syntaxe 73

Compass 173

compilation Sass 140, 149, 152conventions

d’écriture 123de nommage 73, 124, 128syntaxiques 57

Corinne Schillinger 21couleurs 210cross-browser 226CSS 6

CSS Zen Garden 9histoire 8Level 1 6théorie 19

CSS3 21, 122, 182border-radius 185box-shadow 184dégradés 186, 230préfixe constructeur 183transformations 187vendor-prefixes 183

CSS3Pie 93

Ddébogage 226dégradation 75

gracieuse 89, 93design

conception 199Dochub 20doctype 37documentation 71, 125

DRY 109, 132, 153, 164, 166, 183, 200, 212

Eem 94en-tête 37exception 206exclusions CSS 14

FFacebook 90, 92, 134fichiers

organiser 52Firebug 192float

exclusions 14flottant 14fonds multiples 78forms.css 54framework 23, 97, 99, 100, 213

960 grid system 103Blueprint 100Bootstrap 98, 102HTML5 Boilerplate 104pertinence 100

Ggestion de versions 64, 99, 129Git 99, 126, 130GitHub 34, 104, 120global.css 55grille 213



Hhack 226Haml 65head 37HTML5 Boilerplate 23, 35, 104hyphenation 16

Iimbrication 149, 166indentation 65intégrateur web 5intégration 88Internet Explorer 8, 17, 38, 76,

93, 127, 193, 226émulation 44mode compatibilité 43

interopérabilité 80, 92, 162ISO-8859-1 45

KKNACSS 23

Llayout.css 53Least 221lisibilité 65LiveReload 142

Mmaintenabilité 226media 106Media Queries 11meta X-UA-Compatible 43microdata 88mixins 222mobile 49, 77mode compatibilité 38modèle de boîtes 38Modernizr 77

personnaliser 40moteurs de recherche 111

NNatalie Downe 82navigateur 92Netscape 23

Nicole Sullivan 29Normalize 23Normalize.css 51, 53, 120notation

classer les propriétés 68CSS3 63multiligne ou monoligne 61sélecteur 66

Oombré 77ombres 40OOCSS 29, 74, 105, 203optimisation pour les moteurs de

recherche 23, 79optimiser 209Orange 72, 197Orange.fr 190

Ppattern library 126, 127pattern portfolio 81, 82Paul Irish 29performances 2, 42, 49, 76, 79,

227, 228pixel 94polices 211polyfills 15, 77pragmatisme 21, 85Prepros 141print.css 56productivité 128, 139, 143, 178propriété

classer 68multiplication 197raccourcis 71

Pure 23

Qquirks mode 38

Rraccourcis 71Raphaël Goetter 20référencement naturel 76

régions CSSrégions CSS3 12

reset.css 48, 52responsive web design 11Ruby 146

RubyGems 144, 174

SSass 139

bonnes pratiques 165commentaires 152couleurs 162extend 160, 213, 223héritage 160inception 168installation 143mixins 18, 154, 221, 222, 224surimbrication 168variable 18, 153

sémantiquedébat 86microdonnées 87

sprites 169, 178style guide 83, 126, 127Stylus 137

Ttaille

em 94pixel 94

tests 31, 80, 81, 127interopérabilité 80, 226non-régression 81pattern portfolio 82

Tim Berners-Lee 5Twitter Bootstrap 120typo.css 53typographie 15, 122, 201

@font-face 16Cleartype 17

UUnicode 45UTF-8 45


Index

Vvariable 210veille 24

WW3C

Adobe 14wireframes 200

XXcode 144

ZZURB Foundation 173

CSS maintenables avec Sass & Compass · Lorsque les navigateurs ont commencé à interpréter les...

Documents

Transcript of CSS maintenables avec Sass & Compass · Lorsque les navigateurs ont commencé à interpréter les...