Pratique de CSS3 & 2.1 Agrandir

Pratique de CSS3 & 2.1

On ne présente plus les CSS tant leur usage est devenu incontournable pour créer de belles pages web au design moderne et innovant. Pratique de CSS3 & 2.1 est une référence pour les designers et développeurs web qui trouveront dans ce livre les techniques pour améliorer la présentation de leur site. Ce guide pratique et concis leur permettra de maîtriser rapidement les CSS 3 et 2.1 et d'embellir leur pages web. Il servira également de référence à portée de main ou de clic.

Plus de détails

Styler facilement le Web

de Pascale Lambert-Charreteur

Date de publication : octobre 2012
Format : PDF sans DRM
147 pages
Collection Focus


978-2-8150-0218-9

Ajouter au panier

On ne présente plus les CSS tant leur usage est devenu incontournable pour créer de belles pages web au design moderne et innovant.

Les CSS permettent de gérer les couleurs d’un tableau, les images et éléments multimédias ou encore le texte. Vous stylez le Web sans recourir, par exemple, à des images ou d’obscures astuces. Ombrages et arrière-plans se définissent en quelques lignes de CSS. Le design d’un site se change facilement en modifiant uniquement la feuille de style qui lui est attachée. On maintient ainsi aisément la cohérence visuelle des pages d’un même site.

Dans ce Focus, Pascale Lambert-Charreteur livre l’art et la manière de styler le Web.

  • Le premier chapitre pointe les bonnes pratiques de base : le Doctype, la sémantique, l’accessibilité, la validation des pages web.
  • Le second chapitre présente les grandes lignes de CSS et fait une mise au point sur les conventions et principes de priorité.
  • Le troisième chapitre explique les sélecteurs et pseudo-classes, révision indispensable avant de se pencher sur la mise en forme des pages.
  • Le quatrième chapitre concerne le positionnement : les différentes mises en forme possibles sont passées en revue.
  • Le cinquième chapitre fourmille d’exemples et d’explications quant à la décoration sans images  : bordures, ombrages, arrière-plans, dégradés et texte sont ainsi traités.
  • Le sixième chapitre aborde les mises en pages plus avancées : media-queries, transformations, transitions et animations sont au programme.
  • Le dernier chapitre liste des ressources indispensables.

De très nombreux exemples de mise en œuvre de CSS accompagnent les explications de l’auteur. Des repères sont fournis quant à l’implémentation par les différents navigateurs de chaque propriété CSS.

Pratique de CSS3 & 2.1 est une référence pour les designers et développeurs web qui trouveront dans ce livre les techniques pour améliorer la présentation de leur site. Ce guide pratique et concis leur permettra de maîtriser rapidement les CSS 3 et 2.1 et d’embellir leur pages web. Il servira également de référence à portée de main ou de clic.

Cet ouvrage existe également en livre imprimé chez votre libraire (ISBN : 9782815030199) ou depuis la boutique Lulu.

Préface

Au commencement le Web était moche.

Les fonds étaient gris-moyen, les textes noirs, les liens non visités bleus et les liens visités violets[1]. Mais voilà, les génies qui ont conçu le Web avaient beau être d’authentiques génies, ça n’en fait pas des designers émérites pour autant.

Très rapidement les CSS (feuilles de styles en cascade) ont fait leur apparition : enfin un moyen de définir des polices, des couleurs, etc. ! C’était sans doute la première révolution d’importance pour le tout jeune Web[2].

La plupart des gens qui travaillaient déjà dans le Web en venaient à se rendre compte que les tableaux empilés les uns dans les autres étaient un genre de mal absolu, et n’avaient alors d’autre solution que de mettre à la suite des tableaux plus simples qui contenaient eux-mêmes moins de tableaux empilés – au final on terminait quand même avec encore plus de tableaux à coder (je ne sais pas si vous me suivez ?).

Dans ces moments où tout est excitant, où tout se renouvelle, Pascale Lambert-Charreteur crée CSS Débutant en 2001. J’y reviens dans un paragraphe, le temps de faire un détour de l’autre côté de l’Atlantique.

En 2003, Dave Shea invente le CSS Zen Garden (http://www.csszengarden.com/) pour montrer toute la richesse et la variété graphiques qu’on peut amener dans une page web rien qu’en modifiant les CSS. Arrive 2004, Douglas Bowman pilote la refonte de Wired (http://www.wired.com/), là encore tout en CSS : c’est le premier site à fort trafic dont la mise en page est réalisée entièrement sans tableaux. À partir de ce moment-là, les CSS deviennent inévitables et bouleversent toutes nos pratiques de développement web.

Vers qui se tournent alors les développeurs pour apprendre ? Vers une ressource de référence bien sûr ! Le livre que vous avez entre les mains / que vous visionnez sur votre téléphone / que vous faites défiler sur votre tablette (rayez les mentions inutiles) est le fruit d’un travail patient de pédagogie, avec la capacité rare de revenir systématiquement aux bases pour expliquer clairement autant la syntaxe que les effets obtenus ; ce livre est tout simplement la conséquence logique et méritée de ces dix dernières années de CSS Débutant.

Bonne lecture !

Stéphane Deschamps

Expert technique Web, fondateur de Paris Web, co-directeur d’Openweb.eu.org

[1]. Les ergonomes vous répéteront à l’envi qu’une couleur plus chaude pour un élément qui doit moins attirer l’attention, c’est mal.

[2]. En vérité c’était la deuxième révolution : le premier grand bouleversement est venu de Marc Andreessen qui crée la balise <img>, qui nous permet d’insérer des images dans notre code.

Introduction

Pourquoi ce livre

C’est sur mon blog, Mammouthland (http://www.mammouthland.net/), que j’ai écrit mon premier tutoriel sur les CSS en mars 2001. Lorsque je le relis aujourd’hui, je ne peux m’empêcher de sourire (un peu jaune) tant il paraît désuet et approximatif. À cette époque peu de ressources francophones existaient sur le sujet et il m’était apparu naturel de faire partager mes connaissances.

Un peu plus de 10 années plus tard, il m’a semblé judicieux de regrouper mes travaux dans un livre et d’accompagner les débutants, les curieux et même les professionnels du Web, dans la découverte de la troisième version des CSS.

Ce livre n’a pas une vocation encyclopédique et ne cherche pas à donner des « leçons » de Web design. Il s’attache en revanche à être un aide-mémoire, accompagné d’exemples simples de mise en œuvre, qui donnent les bases de constructions plus évoluées.

Prérequis et public

Ce livre s’adresse aux personnes ayant déjà quelques notions de HTML et de CSS, mais il s’attache à ne pas laisser les grands débutants dans l’impasse en explicitant les bases dès que cela s’avère nécessaire.

Les plus aguerris, voire les professionnels du Web, y trouveront aussi des repères et des exemples leur permettant de découvrir les nouveautés apportées par les CSS3 et leur niveau d’implémentation dans les principaux navigateurs.

Organisation de l’ouvrage

Le livre se décompose en 7 chapitres :

Les bonnes pratiques de base

Les navigateurs graphiques, dans leur grande permissivité, vous afficheront toujours quelque chose, même avec une page codée n’importe comment. Ceci n’est hélas pas un gage de qualité, et permet rarement d’avoir un rendu similaire avec tous les navigateurs (voire un rendu tout court).

Ce chapitre fait donc un rapide, mais indispensable, tour d’horizon sur le rôle du Doctype, la raison de la sémantique ou encore de l’accessibilité.

Principe et règles générales des CSS

Le langage CSS est relativement simple... en apparence. Il y a en effet quelques modalités de fonctionnement intrinsèques au langage et d’autres inhérentes aux navigateurs dont il faut tenir compte pour éviter les contradictions ou les lourdeurs excessives.

Les sélecteurs

Les sélecteurs avancés existent depuis les CSS1 et chaque nouvelle version du langage apporte son lot de fonctionnalités.

Ceux des CSS 2.1, longtemps mal implémentés par Internet Explorer, ont été peu ou pas utilisés et sont parfois méconnus.

Mais les choses évoluent favorablement, et les possibilités offertes, aussi bien par les sélecteurs de CSS 2.1 que ceux de CSS3, méritent d’être à présent pris en considération.

Le positionnement

Les CSS offrent de multiples possibilités pour faire une mise en page. Que ce soient celles couramment utilisées, comme le positionnement flottant ou absolu, ou les plus novatrices comme les grilles CSS3, chacune a ses avantages et ses écueils.

À partir d’une problématique classique, ce chapitre passe en revue toutes les options possibles de mise en page, qu’elles soient actuelles ou futures.

La décoration

Si les CSS 2.1 permettaient déjà d’implémenter quelques éléments de décoration sans avoir recours à des images, ceux-ci étaient très limités. Les CSS3 font résolument un bond en avant en introduisant des propriétés graphiques que les intégrateurs désiraient depuis longtemps.

La décoration avancée

Au-delà des effets décoratifs décrits dans le chapitre précédents, les CSS3 vont encore plus loin dans le traitement du design grâce aux media-queries, sans compter les effets interactifs comme les transformations et les animations maintenant possibles sans images animées ou autre Flash.

Les ressources

Tour d’horizon des meilleurs outils et ressources pour réaliser un site et faire de la veille technologique.

Les exemples

Tous les exemples développés dans ce livre sont visibles à partir de la section réservée à cet ouvrage : http://css.mammouthland.net/livre/ (figure 1). Ils sont également téléchargeables depuis la page de ce livre.
Les exemples sont mentionnés ainsi : le fichier de l’archive est entre parenthèses, par exemple :

On prend le code HTML suivant (selecteurs-css.html#filial)

Les exemples sont également disponibles en ligne. L’adresse de la page est notée ainsi :

http://css.mammouthland.net/livre/selecteurs-css.php#filial

Ces ressources en ligne, sous licence Creative Commons BY-NC-SA http://creativecommons.org/licenses/by-nc-sa/3.0/fr/, sont librement téléchargeables et modifiables en respectant les termes de la licence.

Les conventions utilisées

Voici les conventions typographiques de cet ouvrage.

Italique

Met en exergue les termes nouveaux ou la signification des acronymes.

Police à chasse fixe

Met en valeur les éléments de code dans le texte.

Remarque

Des notes et remarques éveillent votre attention sur des points précis.

Le texte signalé ainsi vous met en garde.

À propos de l’auteur

Professeur de mathématiques et de sciences physiques et chimiques dans l’académie de Rouen, rien ne pouvait laisser penser que l’auteur pourrait écrire un livre sur un des langages du Web. C’était sans compter son goût pour la programmation et son attrait pour les nouvelles technologies.

Dès lors, sa prédisposition naturelle à partager ses connaissances, dont elle a fait son métier, et sa rencontre avec le milieu évangéliste du Web a fait le reste...

Non contente d’avoir créé en 2002 le site « CSS débutant » http://css.mammouthland.net, elle a aussi participé aux sites collaboratifs Pompage http://pompage.net et OpenWeb http://openweb.eu.org qui militent tous deux pour les bonnes pratiques du Web.

Elle a participé à cinq reprises aux éditions de Paris-Web, manifestation annuelle vouée aux standards du Web, au Webdesign et à l’accessibilité http://paris-web.fr.

On peut la retrouver sur les comptes Twitter @PascaleLC et
@CSSdebutant.

À propos des relecteurs

Karl Dubost http://la-grange.net/, actuellement Web Opener chez Opera software http://fr.opera.com/, a été Conformance Manager pendant 8 ans au W3C http://w3.org/.

Stéphane Deschamps http://www.nota-bene.org/, Expert technique Web chez Orange http://www.orange.fr/, est le co-fondateur de la manifestation annuelle Paris-Web.

Remerciements

Mes premiers remerciements vont à mon mari pour avoir su faire preuve et tant de patience et d’abnégation lors des heures passées à l’écriture de ce livre, ainsi que d’y avoir apporté les premières critiques constructives.

Quant à Karl Dubost et Stéphane Deschamps, mes relecteurs, ma reconnaissance était déjà grande auparavant pour tout ce qu’ils m’ont apporté, elle est maintenant incommensurable. Je ne rends pas hommage seulement à leur talent et à leur qualité de relecteur, mais aussi et surtout à leur humanité et leur souci de partager leur passion et leurs savoirs, de façon tellement désintéressée.

Je tiens aussi à saluer Raphaël Goetter, avec qui j’ai eu le plaisir d’animer deux ateliers sur les CSS à Paris-Web, et Rodolphe Rimelé, tous deux gérants d’Alsacréations http://www.alsacreations.fr/. Je les remercie de leur aide et de leur soutien pour l’hébergement et le maintien de mes sites, Mammouthland et CSS débutant.

Pour finir, je tiens aussi à remercier David Rousset http://blogs.msdn.com/b/davrous/, évangeliste chez Microsoft http://www.microsoft.com/fr-fr/default.aspx, qui m’a permis de découvrir IE10 en avant première et d’en tester tous les comportements avec HTML5 et les CSS3.

1. Bonnes pratiques de base

Ce n’est pas parce qu’un navigateur graphique affiche quelque chose que cela est codé correctement. Et pour coder correctement il faut connaître quelques notions élémentaires et savoir pourquoi on doit les appliquer.

Sans être exhaustif, ce chapitre pointe le minimum requis avant de se lancer.

1. 1. Le Doctype

Une déclaration de Doctype est l’avant-propos essentiel et incontournable de toute construction de page HTML.

C’est en effet par cette indication que le navigateur est renseigné sur la version du langage HTML utilisée pour la construction de la page. Il l’utilise pour basculer dans des modes spécifiques de rendus.

Sans Doctype, vous augmentez donc de façon notoire les chances de voir votre mise en page s’afficher de façon différente selon les navigateurs. En particulier pour les anciennes versions d’Internet Explorer qui bascule en mode Quirks, c’est-à-dire dans un mode navigateur fou. Au bout d’un moment... c’est vous qui le deviendrez devant les bugs d’affichage !

1. 1. 1. Le HTML5

L’avenir est résolument au HTML5 qui apporte une sémantique clarifiée et un ensemble d’interfaces de programmation (API - Application Programming Interface) répondant aux besoins des applications Web.

Même si celui-ci n’est pas encore parfaitement implémenté par tous les navigateurs, on peut utiliser son Doctype tout en codant en HTML4. Ici, pas d’histoire de strict ou de transitionnel comme en HTML4. Un seul et unique Doctype, formidablement simple, est de rigueur :

<!DOCTYPE html>

Seuls quelques balises et attributs ne devront pas être utilisés :

  • <acronym> (remplacé par <abbr>) ;
  • <frame>, <frameset> et <noframe> ;
  • <center>, <font>, <s>, <strike>, etc., déjà dépréciées en HTML4 strict ;
  • align, bgcolor, vlink, etc., dépréciées aussi en HTML4 strict ;
  • language ;
  • longdesc, summary car peu ou mal utilisés, même si la disparition de longdesc fait encore débat et n’est donc pas définitive ;
  • name.

1. 1. 2. Le HTML4

Le HTML4 se décline en 2 versions lorsqu’il est servi en text/html (donc sans XML eXtensible Markup Language) : le HTML 4.01 et le XHTML 1.0. Contrairement à des idées reçues, le XHTML 1.0 n’est pas plus récent que le HTML 4.01. Les spécifications de ces deux langages sont en effet sorties à quelques jours d’intervalle.

Choisir du HTML 4.01 ou du XHTML 1.0 est donc une histoire de goût, ou plus exactement de rigueur, mais non d’obsolescence.

En revanche, ces deux versions peuvent être déclarées en transitionnel ou en strict. Le premier autorise l’utilisation de balises et d’attributs dépréciés, l’autre pas. Là est l’obsolescence....

Il est donc préférable de choisir des DTD strictes :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bien plus lourdes que celle du HTML5, vous en conviendrez !

Le XHTML demande quelques règles d’écriture à respecter :

  • toutes les balises doivent être écrites en minuscules et être fermées (même les non fermantes genre <br /> ou <img />) ;
  • tous les attributs doivent être entre guillemets ;
  • les balises doivent être correctement imbriquées :
  • <p><strong>Texte en gras</p></strong> est incorrect ;
  • <p><strong>Texte en gras</strong></p> est correct.

1. 1. 3. Et le XHTML 1.1 ?

Le XHTML 1.1 ne peut pas être servi en text/html, il ne peut l’être qu’en application xhtml+xml. Ceci n’est utile que si vous utilisez vraiment du XML (eXtensible Markup Language), pour écrire des formules mathématiques avec du MathML (Math Markup Language) par exemple, ou encore inclure des dessins au format SVG (Scalable Vector Graphics).

D’autre part Internet Explorer, jusqu’à sa version 8 incluse, ne sait pas l’interpréter.

Ce Doctype ne doit donc être utilisé qu’en toute connaissance de cause.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

À noter que le HTML5 peut aussi être servi en application xhtml+xml avec certaines règles précises.

Références

Activation du mode de rendu du navigateur en fonction de Doctype : http://hsivonen.iki.fi/doctype/ (en anglais)

Déclarations XHTML (Alsacréations) : http://www.alsacreations.com/astuce/lire/41-comment-bien-dclarer-du-xhtml-10-et-du-xhtml11.html

Traduction de la spécification HTML 4.01 (24/12/1999)
http://www.la-grange.net/w3c/html4.01/

Traduction de la spécification XHTML 1.0 (26/01/2000)
http://www.la-grange.net/w3c/xhtml1/

Spécification HTML5 W3C : http://www.w3.org/TR/html5/ (en anglais)

Guide HTML-Compatible XHTML Documents – W3C :
http://dev.w3.org/html5/html-xhtml-author-guide/ (en anglais)

HTML5 (Wikipédia) : http://fr.wikipedia.org/wiki/HTML5

1. 2. La sémantique

Définition « La sémantique est une branche de la linguistique qui étudie les signifiés » (Wikipédia).

En d’autres termes : la sémantique, en matière de langage HTML, repose sur la signification des éléments.

Le W3C, dans sa grande sagesse, a en effet attribué une signification à chaque balise ou attribut. Signification lue et comprise par les navigateurs et les lecteurs d’écran, mais aussi par les robots des moteurs de recherche, attribuant ainsi plus de pertinence à telle ou telle portion de texte.

Ainsi, par exemple, la balise <h1> sera à utiliser comme titre principal de chapitre ou de section, et non pour augmenter la taille de la police de caractère et sa graisse ; la balise <blockquote> est à utiliser pour mettre en exergue un bloc de citation et non pour faire un retrait, etc.

On met ici en évidence la différence entre la signification de la balise (dédiée, donc non modifiable) et la mise en forme visuelle (modifiable via la feuille de style CSS).

Il faut donc respecter l’orthographe du langage HTML... et sa grammaire pour être compris.

Il faudra aussi se prémunir de toute utilisation excessive de <div> (surnommée divite) néfaste à la structure de votre page HTML.

Référence

Respecter la sémantique XHTML (Laurent Jouanneau, OpenWeb) http://openweb.eu.org/articles/respecter_semantique/

1. 3. Accessibilité

La première règle d’accessibilité est tout simplement de respecter la sémantique. Tout détournement de balise sera donc à proscrire.

1. 3. 1. Images

Le texte alternatif des images sera à traiter avec soin et pertinence. De nombreux webmestres, accros au référencement, oublient souvent qu’un site web est avant tout fait pour des êtres humains... et non pour des robots. On trouve donc souvent des texte alternatifs (via l’attribut alt) parfaitement abscons car constitués d’une suite de mots-clés, sensés améliorer le référencement, mais parfaitement incompréhensibles à la lecture.

La bonne pratique est la suivante :

  • toute image porteuse d’une information doit avoir un texte alternatif pertinent reprenant cette information ;
  • toute image purement décorative doit avoir un texte alternatif vide.

1. 3. 2. JavaScript

L’utilisation du JavaScript (et par extension d’AJAX et XMLHttpRequest) devra aussi toujours être réfléchie et raisonnée. Le JavaScript ne doit jamais empêcher l’accès à l’information ou encore nuire à la navigation dans le cas où il est désactivé. Le JavaScript doit être un plus, mais ne jamais bloquer l’accès aux contenus ou aux fonctionnalités du site.

1. 3. 3. CSS

Pour finir, certaines règles CSS peuvent être néfastes à l’accessibilité. L’usage, par exemple, d’un display:none qui fait disparaître un contenu, ou la génération de contenu via les pseudo-éléments ::after ou ::before sont à utiliser à bon escient. Nous y reviendrons.

Ces quelques règles de bon sens ne suffisent pas à rendre systématiquement des pages HTML accessibles à 100 %, mais c’est déjà un bon début.

1. 4. La validation

Il y a quelques années l’accent a été mis sur l’importance de la validité du code d’une page HTML. Cela a permis de sensibiliser les webmestres au soin à apporter au codage, pour une meilleure prise en charge par les navigateurs respectant au mieux les standards. Hélas, l’effet pervers de vouloir à tout prix une page valide, au mépris de tout respect de la sémantique, se fait régulièrement sentir.

Il est vrai que :

<div>Bienvenue sur mon site !</div>

<div>Hello world !</div>

est parfaitement valide...

Mais votre œil déjà aguerri aura tout de suite remarqué que la sémantique est complètement absente et que cette portion de code devrait être (par exemple) :

<h1>Bienvenue sur mon site !</h1>

<p>Hello world !</p>

La validation d’une page n’est donc pérenne que si elle s’accompagne des deux points développés précédemment, à savoir le respect de la sémantique et de l’accessibilité.

2. Principe et règles générales du CSS

Les prémices du langage CSS sont apparus en 1995, la première spécification CSS1 officielle du W3C ayant été publiée en décembre 1996. Autant dire que ce langage n’est pas vraiment jeune...

Il est né de la volonté de séparer la forme et le fond d’une page web, tout en facilitant la maintenance de l’aspect visuel d’un site.

Le principe est donc de lier une page CSS à l’ensemble des pages HTML, comme le montre la figure 2.1.

Figure 2.1. Principe d’une feuille de style

Figure 2.1. Principe d’une feuille de style

Avant de débuter, il convient de connaître quelques conventions, précautions et principes de priorités, pour aborder au mieux l’apprentissage du langage CSS.

2. 1. Vocabulaire et syntaxe

[...]

2. 2. Cascade et héritage

[...]

2. 3. Optimisation

[...]

2. 3. 1. Ordre de priorité

[...]

2. 3. 1. 1. Exemple

[...]

2. 4. Remise à zéro des marges et des espaces

[...]

2. 5. Préfixes propriétaires

[...]

2. 6. Les CSS, solution du design au pixel près ?

[...]

3. Les sélecteurs

Comme leur nom l’indique, les sélecteurs permettent de sélectionner, ou plus exactement de cibler, un élément plutôt qu’un autre.

Bien exploités les sélecteurs avancés, pseudo-classes et pseudo-éléments, permettent une maîtrise très fine du rendu d’une page web.

Les conventions d’écriture utilisées par la suite sont :

  • E : élément E ;
  • F : élément F enfant de E ;
  • foo : attribut de nom foo ;
  • val : valeur d’attribut de nom val.

3. 1. Sélecteur de descendance (E F)

[...]

3. 1. 1. Exemple

[...]

 

3. 2. Sélecteur filial (E > F)

[...]

3. 2. 1. Exemple[...]

 

3. 3. Sélecteur d’enfant adjacent (E + F)

[...]

3. 3. 1. Exemple

[...]

3. 4. Sélecteurs d’attributs

[...]

3. 4. 1. Exemple de (E[foo])

[...]

 

3. 4. 2. Exemple de (E[foo=val])

[...]

 

3. 4. 3. Autres opérateurs possibles

[...]

3. 5. Pseudo-classes

[...]

3. 5. 1. :link, :visited, :hover, :focus et :active

[...]

3. 5. 2. :first-child et :last-child

[...]

 

3. 5. 3. :nth-child et :nth-of-type

[...]

 

3. 5. 4. :only-child et :only-of-type

[...]

 

3. 5. 5. :lang

[...]

 

3. 5. 6. :empty

[...]

 

3. 5. 7. :target

[...]

3. 5. 8. :enabled, :disabled, :checked, :valid, :invalid, :required et :optional

[...]

 

3. 6. Pseudo-éléments

[...]

3. 6. 1. ::after et ::before

[...]

3. 6. 1. 1. Exemple 1

[...]

 

3. 6. 1. 2. Exemple 2

[...]

 

3. 6. 2. ::first-line et ::first-letter

[...]

3. 6. 2. 1. Exemple

[...]

4. Le positionnement

Au travers d’une problématique courante, celle d’une mise en page 3 lignes/2 colonnes, nous allons passer en revue les différents types de positionnement, des plus courants au plus récents introduits par les CSS3.

Au fur et à mesure, les notions indispensables seront abordées, ainsi que les écueils ou pièges à éviter ou à contourner.

Bien entendu les codes proposés ne sont que des suggestions possibles à mettre en œuvre, et non des solutions intangibles.

4. 1. Problématique

[...]

4. 1. 1. Code HTML

[...]

4. 1. 2. Le flux

[...]

4. 2. Le positionnement flottant

[...]

4. 2. 1. Ce qu’il ne faut pas faire

[...]

4. 2. 2. Ce que l’on peut faire

[...]

 

4. 3. Le positionnement « positionné »

[...]

4. 3. 1. Le positionnement absolu

[...]

4. 3. 1. 1. Ce qu’il ne faut pas faire

[...]

4. 3. 1. 2. Ce que l’on peut faire

[...]

4. 3. 2. Le positionnement fixé

[...]

4. 3. 2. 1. Ce qu’il ne faut pas faire

[...]

4. 3. 2. 2. Ce que l’on peut faire

[...]

4. 3. 3. Le positionnement relatif

[...]

4. 3. 3. 1. Ce qu’il ne faut pas faire

[...]

4. 3. 3. 2. Ce que l’on peut faire

[...]

4. 4. Par tableau

[...]

4. 4. 1. Ce qu’il ne faut pas faire

[...]

4. 4. 2. Ce que l’on peut faire

[...]

 

4. 5. Mode « bloc en ligne »

[...]

4. 6. Les boîtes flexibles

[...]

4. 7. Les grilles

[...]

4. 7. 1. Puzzle.tifExercice

[...]

4. 7. 2. Puzzle.tifSolution

[...]

4. 8. Le multicolonnage

[...]

 

5. La décoration

Le design, évidemment, est bien le nerf de la guerre et les CSS3 permettent un bond en avant considérable dans ce domaine. Nombre de choses impensables sans l’ajout d’images, il y a encore peu de temps, sont maintenant possibles avec les CSS.

On y gagne en performances car bien souvent les CSS sont moins gourmandes que des images. On pourra aussi y gagner en facilité de mise en œuvre et, en y prenant soin, en accessibilité.

De quoi rendre grincheux les accros à Photoshop...

Le hic majeur étant bien entendu l’implémentation dans les navigateurs. C’est là que tout le principe de la dégradation harmonieuse prend son sens : profiter des meilleurs atouts des CSS sans léser les internautes encore dotés de navigateurs vieillissants, en évitant de les bloquer dans leur navigation.

5. 1. Les bordures

5. 1. 1. Bordures simples

[...]

5. 1. 2. Bordures images

[...]

5. 1. 2. 1. Problématique

[...]

5. 2. Ombrages

5. 2. 1. Ombrages de boîtes

[...]

 

5. 2. 1. 1. Ombrages multiples

[...]

5. 2. 2. Ombrages de texte

[...]

5. 3. Transparences

5. 3. 1. Problématique

[...]

5. 3. 2. Opacity

[...]

 

5. 3. 3. Color

 

[...]

5. 4. Arrière-plans

5. 4. 1. Arrière-plans multiples

[...]

5. 4. 1. 1. Exemple

[...]

 

5. 4. 2. Arrière-plans étirables

[...]

5. 4. 2. 1. Problématique

[...]

 

5. 4. 3. Limites et positionnement des images d’arrière-plan

[...]

5. 5. Dégradés

[...]

5. 5. 1. Dégradé linéaire

[...]

5. 5. 2. Dégradé incliné

[...]

5. 5. 3. Dégradé radial

[...]

5. 6. Polices de caractères

[...]

5. 6. 1. Problématique

[...]

 

5. 6. 2. La théorie

[...]

5. 6. 3. La pratique

[...]

 

6. Décorations avancées

Les avancées les plus spectaculaires des CSS3 sont peut-être le fait de pouvoir transformer une page web a priori statique en page qui s’adapte à son environnement ou qui devient animée sans l’apport de technologies extérieures.

Bien entendu, c’est en exploitant plus à fond le triplet « HTML5/CSS3/JavaScript » que les effets seront les plus aboutis : ce qui suit devrait déjà vous permettre d’entrevoir les fantastiques possibilités qui nous sont offertes.

6. 1. Media-queries

[...]

6. 1. 1. Problématique 1

[...]

6. 1. 2. Puzzle.tifSolution 1

[...]

6. 1. 3. Puzzle.tifSolution 2

[...]

6. 1. 4. Problématique 2

[...]

6. 2. Transformations et transitions

6. 2. 1. Problématique

[...]

6. 2. 2. La transformation

[...]

 

6. 2. 3. L’effet de transition

[...]

6. 2. 4. Puzzle.tifExercice

[...]

6. 2. 5. Puzzle.tif Solution de l’exercice

[...]

6. 3. Animations

[...]

6. 3. 1. Problématique

[...]

6. 3. 1. 1. La théorie

[...]

6. 3. 1. 2. La pratique

[...]

6. 3. 2. Bouquet final

[...]

6. 3. 3. Puzzle.tif Proposition de solution

[...]

7. Ressources

7. 1. Outils

7. 1. 1. Support HTML5, CSS3

[...]

7. 1. 2. Générateurs de CSS3

[...]

 

7. 1. 3. CSS3 pour IE

[...]

 

7. 1. 4. SVG

[...]

 

7. 1. 5. HTML5

[...]

 

7. 1. 6. Validation

[...]

 

7. 1. 7. Extensions pour navigateurs

7. 1. 7. 1. Firebug

[...]

7. 1. 7. 2. Webdevelopper

[...]

7. 1. 7. 3. Heading map

[...]

7. 1. 7. 4. Accessibilité

[...]

 

7. 1. 8. Tutoriels

[...]

Les exemples sont téléchargeables ici

Cet ouvrage existe également en livre imprimé chez votre libraire sur simple commande  (ISBN : 9782815030199) ou depuis la boutique Lulu.

Errata et remarques pour Pratique de CSS3 & 2.1

Merci à Raphaël d'avoir repéré la plupart de ces erreurs ou inexactitudes.

Le positionnement absolu - page 62 du PDF et 40/41 papier

Un width s'est glissé à la place d'un height.

#content {
     background-color:#9966FF;
     width:720px; min-height:125px; /*hauteur minimale égale à la hauteur maximale du #nav*/ }
#nav {
     background-color:#FF3366;
     width:240px; position:absolute;
     top:0; /*alignement supérieur avec #content */
     right:0; /*ou left:720px*/
     max-height:125px;
}
 

Mode "bloc en ligne" - page 69 du PDF et 46 papier

Précision : les whitespaces apparaissent dès qu'il y a un espace physique ou un retour chariot entre deux éléments, qu'ils soient de type block ou inline.

Flexbox - page 71 du PDF et 47 papier

Entre le moment de l'écriture et celui de la parution, les spécifications ont encore changé ! Les valeurs sont maintenant flex et inline-flex. Et pour centrer les boîtes, la syntaxe est à présent justify-content:center.

/*syntaxe officielle (W3C octobre 2012)*/
display:flex;
justify-content:center;
 

Pour tout savoir, précipitez-vous sur l'article très complet publié conjointement sur OpenWeb et Alsacreations.

Arrière-plans étirables - page 100 du PDF et 70 papier

  • cover : l'image garde ses proportions et elle est rognée si un côté déborde (quel qu'il soit).

  • contain : l'image garde ses proportions et n'est pas rognée. Des blancs peuvent donc apparaître.

Dégradés

  • Page 104 du PDF et 74 papier : sans filtre propriétaire Microsoft (voir ce générateur), on peut déclarer un background-color en dernier dans le code, afin d'avoir tout de même un fond avec IE<10.

  • Page 106 du PDF et 76 papier : la ligne comportant le préfixe -ms- est inutile puisqu'IE10 implémente les dégradés sans préfixe.

Polices de caractère - page 109 du PDF et 78 papier

Tableau  : iOS supporte le format .woff depuis sa version 5 (iOS5).

Media-queries - page 116 du PDF et 85 papier

Le width:100% proposé dans le code pourra avantageusement être remplacé par un width:auto.