Initiation html5 Css3partie3

Présentation des
5 LEÇON
notions essentielles
sur les feuilles de
style en cascade CSS :
Dispositions
M AT R I C E D ' O B J E C T I F S D ' E X A M E N
Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif

de l'examen MTA
Organisation du contenu d’une Organiser le contenu d’une 3.2
interface utilisateur avec CSS interface utilisateur avec CSS
Utilisation de la boîte flexible Organiser le contenu d’une 3.2
(Flexbox) pour appliquer au interface utilisateur avec CSS
contenu un alignement, une
direction et une orientation
Utilisation des dispositions en Organiser le contenu d’une 3.2
grille pour appliquer au contenu interface utilisateur avec CSS
un alignement, une direction et
une orientation
TERMES CLÉS
boîte flexible marge
bordure marge intérieure
contenu modèle de boîte flexible (Flexbox)
disposition en grille modèle de disposition en grille
élément block-level modèle de grille
élément de grille préfixe du fournisseur
élément flexbox relation parent/enfant
élément inclus requêtes multimédias
interface utilisateur (UI)
Stacey est gestionnaire de site Web chez Media Malted Milk. Elle a appris que vous
travaillez avec l'équipe de développement d'application cliente et que vous étudiez
HTML5 et CSS3. Stacey développe également ses compétences en HTML5 et
aimerait tout d'abord commencer par incorporer la boîte flexible et les dispositions en
grille dans le site Web Malted Milk, une fois que les spécifications seront plus
largement utilisées. Elle aimerait rassembler des informations sur les dispositions en
grille et en boîte flexible, y compris leur compatibilité avec les navigateurs actuels et
créer un petit aide-mémoire à propos de leurs propriétés CSS.
110
Présentation des notions essentielles sur les feuilles de style en cascade CSS : Dispositions | 111
■ Organisation du contenu d’une interface utilisateur avec CSS
Les interfaces utilisateur peuvent être simples et directes ou être plus complexes avec
plusieurs sections, boutons et contrôles. La conception d'une interface qui s'affiche bien
sur les grands écrans de PC et sur les petits appareils mobiles exigeait auparavant
beaucoup de balises et de code. Aujourd'hui, le modèle de boîte flexible et le modèle de
disposition en grille en CSS réduisent la quantité de code nécessaire pour la
compatibilité inter-périphériques. Les boîtes flexibles contiennent du texte, des images
L'ESSENTIEL et d'autres contenus, et le navigateur ajuste automatiquement la taille de la zone selon
la taille de l'écran utilisé pour afficher le document HTML. Le même principe
s'applique aux dispositions en grille, qui sont tout simplement des colonnes et des
lignes qui contrôlent la mise en page du contenu dans un document HTML. Comme les
spécifications CSS ne sont pas encore définitives, vous devrez utiliser des préfixes
spécifiques au fournisseur avant les noms de propriétés CSS pour tout faire fonctionner.
L'interface utilisateur ou IU est la partie d’un site Web ou d’une application avec laquelle
l'utilisateur peut interagir. La disposition de l'interface utilisateur peut être ultra simple
avec juste un bouton ou deux ou très complexe avec beaucoup de parties et chaque partie
peut contenir un ou plusieurs boutons, menus, barres d'outils, formulaires etc.
Avec un tel éventail de dispositions, il est difficile de créer des interfaces utilisateur qui
fonctionnent bien pour des applications et des sites Web affichés sur des appareils
mobiles. Le positionnement et le redimensionnement automatique des éléments d'une
interface utilisateur sont essentiels à une conception de qualité. Par exemple, le
positionnement relatif des éléments d'interface utilisateur convient à de nombreuses pages
Web et les développeurs Web ont utilisé la propriété float pendant des années pour avoir
de la souplesse dans leurs conceptions. (Vous avez découvert la propriété float dans la
leçon 4.) Toutefois, le positionnement relatif ne fonctionne pas pour la plupart des
applications Web mobiles car il produit un chevauchement inapproprié des éléments ou
des éléments apparaissent au mauvais endroit.
Une combinaison de positionnement absolu et de boîtes flexibles (conteneurs) fonctionne
beaucoup mieux pour les applications Web mobiles et les parties de pages Web en général.
Par exemple, un élément d'interface utilisateur qui doit toujours figurer au même endroit
sur l'écran, par exemple un en-tête ou un pied de page, devrait utiliser le positionnement
PRÊT POUR LA CERTIFICATION absolu. Pour plus de flexibilité, le modèle de boîte flexible CSS3 convient parfaitement
Comment CSS est
aux éléments qui sont redimensionnés ou repositionnés automatiquement (horizontalement
ou verticalement) en fonction de la taille de l’écran. Le modèle de disposition en
utilisé pour contrôler la grille CSS3 est un autre modèle d'interface utilisateur. Il vous donne une plus grande
disposition d'une interface maîtrise des dispositions complexes que le modèle de boîte flexible. Cette leçon porte sur
utilisateur ? les modèle de boîte flexible et les modèles de disposition en grille.
3.2
Avant de nous plonger dans les sujets de cette leçon, vous devez comprendre quelques
petites choses sur la compatibilité entre CSS3 et un navigateur. Comme pour HTML5, la
spécification CSS3 est en cours de développement et fait l'objet de modifications
constantes. Le nom de certaines propriétés peut changer d’une version à l’autre dans le
projet de spécification CSS3, et de nouvelles valeurs de propriété peuvent être créées et
d’autres supprimées.
Pour s’assurer que les styles CSS3 fonctionnent correctement pendant cette phase de
transition, la plupart des principaux navigateurs Web offrent des noms de propriété de
remplacement. Ces solutions permettent simplement d’ajouter un préfixe de fournisseur,
mot clé placé entre tirets, devant un nom de propriété CSS3. Gardez ce qui suit à l'esprit
quand vous utilisez les propriétés CSS3 :
• Internet Explorer utilise le préfixe -ms-.
• Firefox prend en charge le préfixe -moz-.
• Opera utilise le préfixe -o-.
• Chrome et Safari prennent en charge le préfixe -webkit-.
Par exemple, la propriété flexbox est une propriété CSS3 que vous apprendrez dans cette
leçon. Pour appliquer le style flexbox aux éléments et les afficher dans Firefox, vous
devez actuellement utiliser la propriété -moz-flexbox.
112 | Leçon 5
Il est recommandé d'inclure les préfixes des quatre fournisseurs de fonctionnalités CSS3
qui sont encore émergents. De cette façon, votre page Web a les meilleures chances d'être
affichée correctement, quels que soient les principaux navigateurs utilisés. Cependant, le
fait d'inclure les préfixes des quatre fournisseurs dans votre code le rend plus long, et cela
ne garantit pas que la fonction CSS3 fonctionne dans tous les navigateurs. Si un
navigateur ne prend pas en charge la fonctionnalité ou la propriété prefix du fournisseur,
la fonctionnalité ne s'affiche pas correctement. Le site Web « Can I use » à l'adresse
caniuse.com vous aide à déterminer quels navigateurs prennent en charge des
fonctionnalités CSS3 et HTML5 spécifiques.
Une autre pratique à suivre, surtout pendant la transition à CSS3, consiste à utiliser des
familles de polices génériques pour éviter les éventuels problèmes d'affichage entre
différents navigateurs. Une famille de polices à espacement fixe, soit serif ou sans
REMARQUE
* serif, est la meilleure façon d'éviter des résultats inattendus. Cependant, CSS3 offre
également la possibilité d'utiliser n'importe quelle police. Il faut cependant savoir
quand utiliser une police à espacement fixe et quand il est possible d'utiliser une police
fantaisiste. Vous en apprendrez plus sur la typographie et polices Web dans la leçon 7.
Utilisation de la boîte flexible pour des dispositions simples et utilisation de

la grille pour les dispositions complexes
Les boîtes flexibles sont conçues pour les barres d’outils, les menus, les formulaires
et d’autres éléments semblables dans des pages Web et applications. Les grilles sont
mieux adaptées aux conceptions élaborées.
Le groupe W3C a créé, il y plusieurs années, des spécifications pour le modèle de boîte

PRÊT POUR LA CERTIFICATION
Quel est le but du modèle simple, appelé modèle de boîte CSS. Ce modèle décrit les zones qui entourent le contenu
de boîte CSS ? dans un document HTML, que le document devienne une page Web ou une application
3.2 Web. Pensez à toutes les parties d'un document HTML comme si elles étaient dans une
boîte. Chaque boîte doit être conforme aux règles définies par le modèle de boîte.
Le modèle de boîte CSS est illustré dans la figure 5-1. Le modèle de boîte CSS est
composé de marges, de cadres, de marges intérieures et de contenu.
Figure 5-1
Modèle de boîte CSS
traditionnel
La marge est transparente et se situe sur le bord extérieur d’une boîte, formant l’espace
qui sépare les boîtes du document. La bordure entoure la boîte. Une bordure peut être
transparente, en couleurs ou avec un motif, par exemple des pointillés. La marge
intérieure représente l’espace compris entre la bordure de la boîte et son contenu. En
règle générale, la marge intérieure adopte la même couleur que la couleur d’arrière-plan
de la boîte. Le contenu correspond à tout ce qui figure à l’intérieur de la boîte, par
exemple du texte et des images. Vous pouvez utiliser les propriétés CSS border, margin,
padding, height et width pour modifier les diverses parties du modèle de boîte.
Un problème majeur avec le modèle de boîte CSS, c'est que les différents navigateurs
Web appliquent les propriétés CSS différemment. Par exemple, bien que le W3C indique
que les propriétés height et width définissent la hauteur et la largeur du contenu d'une
boîte, les anciennes versions d'Internet Explorer appliquent les mêmes propriétés à la
hauteur et la largeur de la bordure, ce qui comprend les marges intérieures et le contenu.
Les concepteurs d'applications Web et de page Web utilisent souvent des hacks (valeurs
de propriétés CSS personnalisées) pour forcer Internet Explorer à utiliser des balises
REMARQUE
* CSS que les autres navigateurs vont ignorer. Ce concept est similaire aux préfixes
fournisseurs pour les propriétés CSS mentionnées dans la section précédente.
Il faut comprendre deux autres concepts sur le modèle de boîte CSS : les éléments de
niveau bloc et inclus. Un élément de niveau bloc permet de créer des boîtes qui facilitent
la mise en page du document. Les sections, les articles, les paragraphes, les listes et les
images sont des exemples d’éléments de niveau bloc. Les éléments inclus sont conçus
pour agencer le texte sans nuire à la structure du document. L’application de caractères
gras et le nouvel élément HTML5 mark sont des exemples d’éléments inclus.
Enfin, il est important de comprendre la relation parent/enfant lorsque vous travaillez
avec le CSS. Globalement, une boîte parent peut contenir une ou plusieurs boîtes enfants.
Les boîtes contenues dans une boîte parent sont également appelées boîtes enfants. La
figure 5-2 montre un exemple simple d'une boîte parent avec une boîte enfant imbriquée.
Un enfant peut hériter des styles CSS d'un parent, ce qui signifie que les styles appliqués
à un parent s'appliquent également à un enfant. Les propriétés CSS ne peuvent pas toutes
être héritées. Lorsque vous appliquez des styles, vous devez vérifier les spécifications
CSS pour déterminer l'héritage de propriété.
Figure 5-2
Boîtes parents et enfants
Ce qu'il manquait à CSS depuis sa création c'était un moyen facile pour organiser les
éléments horizontalement et verticalement dans un document HTML : afin que CSS soit
Qu'est-ce que le modèle utilisé pour vérifier que la disposition est correcte dans les différents navigateurs et dans
de boîte flexible ? les différentes tailles d'écran. Les modèles de boîte flexible et de disposition en grille en
3.2 CSS3 ont permis de régler ce problème.
Le modèle de boîte flexible CSS est un mode de disposition qui permet d’utiliser des boîtes
flexibles dans les interfaces utilisateur. Ce modèle fait partie du projet de spécification CSS3.
Une boîte flexible offre des dispositions flexibles pour créer une interface utilisateur. Vous
pouvez créer des pages Web et des applications mobiles à partir d'éléments, de contrôles, de
barres d’outils, de menus et de formulaires qui sont automatiquement redimensionnés et
repositionnés lorsque l’utilisateur change la taille de la fenêtre du navigateur. Le navigateur
prend en compte l’espace libre disponible et calcule automatiquement les dimensions, ce qui
active les tailles relatives et le positionnement.
Par exemple, la figure 5-3 montre une barre d'outils horizontale avec des icônes dans une
boîte flexible. La boîte flexible parent est indiquée par l'arrière-plan ombré et les icônes sont
les boîtes enfants. Lorsque l'utilisateur élargit horizontalement la taille de l'écran, la boîte
flexible s'étend également et répartit l'espace de manière uniforme entre les boîtes enfants.
Figure 5-3
Barre d'outils flexible
114 | Leçon 5
Vous pouvez présenter le contenu d'une boîte flexible dynamiquement dans n'importe
quelle direction, à gauche, à droite, en haut ou en bas. Vous pouvez aussi échanger l'ordre
des boîtes et modifier leurs tailles et leurs positions pour remplir l'espace disponible. Une
boîte flexible multiligne renvoie le contenu automatiquement sur plusieurs lignes, comme
un traitement de texte qui gère du texte dans un paragraphe.
La disposition en boîte flexible est similaire à la disposition en bloc, mais la boîte flexible
n'utilise pas de colonnes ou d'éléments flottants. En outre, une disposition en bloc dispose
REMARQUE
* généralement le contenu verticalement (et une disposition en ligne dispose généralement le
contenu horizontalement), une boîte flexible quant à elle redimensionne dans les deux sens.
Alors que le modèle de boîte flexible convient parfaitement à des éléments simples,
comme les boutons, les barres d’outils et de nombreux formulaires, vous pouvez utiliser le
Qu'est-ce que la
modèle de disposition en grille CSS pour les dispositions plus complexes. Le modèle de
disposition en grille ?
disposition en grille permet de contrôler la création de sections de documents HTML ou
3.2
de documents entiers avec CSS3. Comme son nom l’indique, un modèle de grille utilise
des lignes et des colonnes pour donner un aspect plus clair et structuré (voir la figure 5-4).
Figure 5-4
Illustration d'une disposition
en grille
La disposition en grille offre aussi de la modularité. Vous pouvez donc facilement déposer
des éléments dans une grille ou déplacer des sections vers une autre zone d'un document.
Les grilles sont beaucoup plus souples et plus faciles à manipuler que des tableaux HTML
ou même des colonnes ou des éléments flottants pour structurer la disposition.
Le site Web du New York Times (www.nytimes.com) constitue un exemple de présentation

REMARQUE
* en grille (comme la plupart des sites de journaux en ligne).
■ Utilisationde la boîte flexible (Flexbox) pour appliquer au contenu un

alignement, une direction et une orientation
Une boîte flexible et son contenu peuvent être configurés pour modifier la taille, horizontalement
L'ESSENTIEL et verticalement, lorsque la taille de l'écran sur lequel ils sont affichés change. Vous pouvez
également inverser le sens et l'ordre des boîtes flexibles avec une ligne de code.
PRÊT POUR LA CERTIFICATION Vous devez définir un élément en tant que boîte flexible à l'aide des propriétés CSS
Comment une boîte display:flexbox ou display:inline-flexbox, qui sont décrites comme suit :
flexible est-elle utilisée
• flexbox: définit la boîte flexible comme un élément de niveau bloc
pour établir l'orientation,
la direction et l'alignement • inline-flexbox: définit la boîte flexible comme un élément inclus
du contenu ? Une boîte à l’intérieur d’une autre boîte est une boîte enfant et peut être flexible ou non.
3.2 Une boîte enfant est également appelée élément flexbox.
La boîte flexible introduit également neuf autres propriétés, indiquées dans le tableau 5-1. Vous
apprendrez à utiliser la plupart de ces propriétés et les valeurs dans les sections suivantes.
Tableau 5-1
Valeurs et propriétés d'une Propriété Valeur Description
boîte flexible
flex pos-flex Rend les boîtes enfants flexibles en
neg-flex hauteur et en largeur
preferred-size
none
flex-align start Définit l'alignement par défaut pour les
end boîtes enfants. Si l'orientation de la boîte
center parent est horizontale, flex-aligne détermine
baseline l'alignement vertical des boîtes enfants et
stretch vice versa
flex-direction row Contrôle l'orientation des boîtes enfants
row-reverse dans la boîte parent, ce qui affecte
column également la propriété flex-pack
column-reverse
flex-flow flex-direction Définit simultanément les propriétés
flex-wrap flex-direction et flex-wrap
flex-item-align auto Remplace l'alignement par défaut des
start boîtes enfants auxquelles la propriété
end flex-align a été appliquée
center
baselinebstretch
flex-line-pack start Définit l'alignement de la boîte enfant
end dans la boîte parent lorsqu'il existe un
center espace supplémentaire
justify
distribute
stretch
flex-order number Affecte les boîtes enfants aux groupes et
contrôle l'ordre dans lequel elles apparaissent
dans une mise en page, en commençant
par le groupe ayant le plus petit numéro.
flex-pack start Justifie l'alignement des boîtes enfants
end dans une boîte flexible et réduit l'espace
center disponible dans la boîte parent.
flex-wrap nowrap Indique si les boîtes enfants s’agencent
wrap automatiquement sur plusieurs lignes ou
wrap-reverse dépassent de la boîte flexible.
Utilisez le tableau précédent comme référence pour apprendre à créer les éléments
flexboxes et flexbox.
✚ PLUS D’INFORMATIONS
Pour plus d'informations sur les boîtes flexibles, visitez le « Module Disposition de boîte flexible CSS »
W3C sur http://www.w3.org/TR/css3-flexbox/.
116 | Leçon 5
Utiliser les éléments Flexboxes et Flexbox
Une boîte flexible peut contenir des boîtes enfants flexibles en hauteur et en largeur.
La propriété flex permet de rendre les boîtes enfants flexibles. La propriété flex-flow
définit les propriétés flex-direction et flex-wrap d'une boîte flexible (la boîte parent) en
même temps.
Observons une boîte flexible en action. Supposons qu'une entreprise fournisse trois
principaux types de services, qui sont indiqués et décrits brièvement en trois paragraphes
sur une page Web. Les trois paragraphes forment trois conteneurs d'informations, comme
illustré dans la figure 5-5.
Figure 5-5
Une boîte flexible parent
avec trois boîtes enfants
(éléments flexbox)
Notez l'espace supplémentaire à droite de la dernière boîte enfant, nommée Enfant3. Vous
pouvez modifier le CSS qui contrôle les boîtes afin que les trois boîtes enfants étendent
automatiquement leur taille uniformément pour remplir l'espace disponible dans la boîte
flexible. Vous pouvez également modifier une boîte enfant, telle que Enfant3, pour qu'elle
puisse remplir l'espace, comme illustré dans la figure 5-6.
Figure 5-6
Modification de la troisième
boîte enfant pour remplir
l'espace vide disponible
MISE À L'ÉCHELLE PROPORTIONNELLE DANS UNE BOÎTE FLEXIBLE

Le W3C spécifie la propriété flex qui contrôle la hauteur et la largeur des éléments
flexbox. display: flexbox permet de créer une boîte flexible parent, la propriété flex permet de
donner aux boîtes enfants leur flexibilité.
La propriété display: flexbox est utilisée sans valeurs supplémentaires.
La propriété flex peut prendre une valeur flex positive et/ou négative, une taille souhaitée
et le mot clé none comme indiqué :
flex : pos-flex neg-flex preferred-size none
Les valeurs positives et négatives flex indiquent la flexibilité. Contrairement à l'usage du
mot « négatif », les deux valeurs sont en fait des nombres positifs, comme 1, 2, 3 et ainsi
de suite. (Vous pouvez également utiliser 1.0, 2.0, 3.0, etc.)
S'il reste de la place dans la boîte flexible lorsque la taille de l'écran augmente, les
éléments flexbox se développent pour remplir l'espace en fonction de la valeur flex
positive. Une valeur de 1 signifie que chaque élément flexbox occupera une part égale de
l'espace disponible, une valeur de 2 signifie que chaque élément occupera deux parts
égales et ainsi de suite. Si les éléments flexbox débordent de la boîte parent parce qu'ils
sont collectivement plus larges que le parent, le navigateur utilise la valeur flex négative
pour mesurer la hauteur ou la largeur de chaque élément.
Si vous ne spécifiez pas de valeur flex positive, elle est de 1 par défaut. L'omission d'une
valeur flex négative aboutit à 0 par défaut.
La valeur de taille préférée peut être une valeur valide pour la propriété height et width
CSS, comme 100px. Si vous ne spécifiez pas de valeur de taille préférée, la valeur par
défaut est 0px. Vous pouvez également définir la valeur size souhaitée sur auto, qui utilise
la valeur de la propriété width ou height en tant que la taille par défaut.
Le mot clé none équivaut à 0 0 auto.
Quelques explications supplémentaires peuvent être nécessaires pour la valeur de la

propriété flex. Imaginons que vous ayez une boîte flexible avec trois boîtes enfants. La
valeur flex pour enfant1 et enfant2 est de 1 et la valeur pour enfant3 est de 2. Un enfant
avec un flex de 2 est deux fois plus flexible qu'un enfant avec un flex de 1. Cela ne signifie
REMARQUE
* pas nécessairement qu'enfant3 sera deux fois plus large qu'enfant1 et enfant2. En fait, la
valeur flex calcule l’espace libre disponible par extension ou contraction. Le changement
est appliqué en fonction de la partie flexible en comparaison avec les autres boîtes enfants.
PRÊT POUR LA CERTIFICATION La puissance des éléments flexbox réside dans le fait qu'ils peuvent évoluer librement ou
Comment une boîte ajuster de façon dynamique leurs principales dimensions. La taille de ces éléments
flexible fournit-elle la mise augmente ou diminue selon l'espace disponible dans la boîte flexible dans laquelle ils
à l'échelle proportionnelle résident.
des éléments ?
3.2 Dans le code CSS et le balisage HTML suivants, la boîte flexible contient quatre éléments
flexbox. Chaque enfant a une valeur flex de 1 et est défini sur auto. Lorsque l'utilisateur
modifie la taille de la fenêtre du navigateur, les boîtes enfants doivent se développer et se
réduire en même temps que la boîte parent.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de boîte flexible enfant</title>
<style>
div { display: flexbox;
outline: 2px solid silver
}
p { flex: 1 auto; margin: 1em;
font-family: sans-serif;
color: white;
background: tomato;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Il s’agit de la boîte enfant1.</p>
<p>Il s’agit de l’enfant3.</p>
</div>
</body>
</html>
La figure 5-7 montre le résultat avant et après le redimensionnement de la fenêtre du navigateur.

118 | Leçon 5
Figure 5-7
Boîtes enfants flexibles dans
une boîte parent
CRÉER UNE BOÎTE FLEXIBLE AVEC DES ÉLÉMENTS FLEXBOX

PRÉPAREZ-VOUS. Pour savoir comment créer une boîte flexible avec des éléments flexbox
qui ont une hauteur fixe mais une largeur flexible, effectuez les opérations suivantes :
1. Dans un outil d'édition ou un outil de développement d'application, créez un fichier
HTML qui inclut le code CSS et le balisage suivants :
<!doctype html>
<html>
<head>
<title>Exemple de boîte flexible enfant</title>
<style>
div { display: flexbox;
outline: 2px solid silver }
p { flex: 1 auto; margin: 1em;
color: white;
background: limegreen;
height: 25px;
padding: 1em;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
La propriété display: La propriété flexbox CSS permet de créer la boîte parent : la boîte
flexible. Un contour argenté est créé pour la boîte flexible, cela vous permet simplement
de la voir dans la fenêtre du navigateur pour les besoins de cet exercice. Les styles de
paragraphe (p) s'appliquent aux éléments flexbox (les boîtes enfants). La propriété flex
applique la flexibilité à chaque boîte enfant. Les éléments ont une largeur de 75 pixels
par défaut. S'il reste de l'espace dans la boîte flexible lorsque la taille de l'écran
augmente, les éléments flexbox s'étendent horizontalement pour remplir l'espace.
L'utilisation d'un contour autour de la boîte flexible (boîte parent) consiste à rendre
l'identification des frontières de la boîte flexible plus facile. Vous n'avez pas à inclure
REMARQUE
* de contour autour des boîtes flexibles dans vos applications ou pages Web.
2. Enregistrez le fichier sous le nom L5-flexbox-exercise.html et ouvrez-le dans un

navigateur Web. L'affichage doit ressembler au contenu de la figure 5-8.
Figure 5-8
Création d'une boîte flexible
avec des éléments flexbox,
3. Redimensionnez la fenêtre du navigateur, rétrécissez-la et élargissez-la, en faisant

glisser le bord droit de la fenêtre vers le centre de l'écran, puis de nouveau vers la
droite. Regardez comment les éléments flexbox s'élargissent et se rétrécissent avec la
boîte flexible.
4. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous
passez à l'exercice suivant au cours de cette session.
120 | Leçon 5
Vous pouvez aussi utiliser la fonction CSS flex avec la propriété CSS height ou width pour
contrôler la hauteur et la largeur des éléments flexbox. La propriété flex et la fonction flex
ont le même comportement, mais utilisent une syntaxe légèrement différente (une fonction
utilise des valeurs entre parenthèses).
L'exercice suivant vous montre comment utiliser la fonction flex et introduit la propriété
flex-wrap. La propriété flex-wrap indique si les boîtes enfants s’agencent automatiquement
sur plusieurs lignes (comme illustré dans la figure 5-9). La propriété flex-wrap utilise les
valeurs nowrap, wrap et wrap-reverse.
Figure 5-9
Exemple d'habillage en
utilisant le flex-wrap :
propriété wrap
Illustration: © MightyIsland/iStockphoto
Comme vous allez le voir, le code CSS utilise les préfixes fournisseurs (-ms-, -moz-, -o- et
-webkit-), qui sont obligatoires pour que la propriété flex-wrap fonctionne. N'oubliez pas, les
préfixes fournisseurs sont fréquemment utilisés pendant la transition à CSS3 pour rendre
le code compatible avec le plus de navigateurs possible.
CRÉER DES ÉLÉMENTS FLEXBOX AVEC LA FONCTION FLEX

PRÉPAREZ-VOUS. Pour créer des éléments flexbox avec la fonction flex et utiliser la
propriété flex-wrap, procédez comme suit :
1. Dans un outil d'édition ou un outil de développement d'application, créez un
document HTML avec le balisage suivant :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple de fonction Flex</title>
<style>
div {
display: flexbox;
display: -ms-flexbox;
display: -moz-flexbox;
display: -o-flexbox;
display: -webkit-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-o-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
height: 200px;
padding: 1em;
color: white;
outline: 2px solid silver;
}
div>div {
width: 75px;
width: -ms-flex(1 75px);
width: -moz-flex(1 75px);
width: -o-flex(1 75px);
width: -webkit-flex(1 75px);
margin: 1em;
height: 100px;
background-color: #b200ff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div>Service 1</div>
</div>
</body>
</html>
Comme dans le dernier exercice, la propriété display: La propriété flexbox CSS permet de
créer la boîte parent : la boîte flexible. Le deuxième ensemble de styles div (div>div, qui
est simplement une façon abrégée d'appliquer des styles à un groupe d'éléments HTML
sans attribuer de classes) s'applique aux éléments flexbox : dans le code, la propriété
width et la fonction flex contrôlent la largeur des éléments flexbox qui possèdent une
largeur préférée de 75 pixels, mais qui occupent tout l’espace libre disponible lorsque la
taille d’écran augmente. La propriété flex-wrap avec la valeur wrap force les éléments
flexbox à s’agencer automatiquement sur plusieurs lignes dans la boîte flexible.
2. Enregistrez le fichier sous le nom L5-flexfunction-exercise.html et ouvrez-le dans le
navigateur Web. N'oubliez pas de maximiser la fenêtre. Le fichier doit ressembler à la
figure 5-10.
Figure 5-10
Éléments flexbox dans une
boîte flexible parent
122 | Leçon 5
3. Réduisez la largeur de la fenêtre du navigateur en faisant glisser le bord droit de la

fenêtre vers le centre de l'écran. Notez qu'au fur et à mesure que la boîte flexible
(représentée par le contour argenté) se rétrécit, la taille des éléments flexbox diminue
uniformément. La figure 5-11 montre la boîte flexible avec des éléments flexbox une
fois la taille de la fenêtre du navigateur réduite.
Figure 5-11
La boîte flexible et les
éléments flexbox rétrécissent
lorsque la taille de la fenêtre
du navigateur est réduite
4. Réduisez la taille de la fenêtre jusqu'à ce que les éléments flexbox s’agencent

automatiquement.
5. Ouvrez le fichier dans chacun des autres principaux navigateurs Web pour voir s'il se
restitue correctement.
Voici quelques autres propriétés que vous pourriez utiliser assez souvent avec les boîtes flexibles :
• flex-pack : justifie l'alignement des boîtes enfants dans une boîte flexible et réduit
l'espace disponible dans la boîte parent. Cette propriété adopte l’une des quatre
valeurs suivantes : start, end, justify ou center.
• flex-align : définit l'alignement par défaut pour les boîtes enfants, mais avec une
torsion. Si l’orientation de la boîte parent est horizontale, la propriété flex-align
détermine l’alignement vertical des boîtes enfants, et vice-versa.
Une fois que les enfants d'une boîte flexible ont terminé la flexion et si l'espace est
toujours disponible dans la boîte flexible, les enfants peuvent être alignés avec les
propriétés flex-pack et flex-align (ou flex-item-align). La chose la plus importante à retenir est
que vous devez appliquer la propriété flex-pack à la boîte flexible parent dans votre code
CSS et appliquer flex-align aux éléments enfants.
MODIFICATION DE L'ORIENTATION DES ÉLÉMENTS ENFANTS DANS UNE BOÎTE

FLEXIBLE
La propriété flex-direction modifie la direction des boîtes enfants à l’intérieur de la boîte
parent. Elle adopte les valeurs row, row-reverse, column et column-reverse.
La propriété flex-flow définit les propriétés flex-direction et flex-wrap simultanément.
L'exemple suivant utilise la propriété flex-flow avec la valeur de la colonne.
<!doctype html>
<html>
<head>
<title>Exemple de fonction Flex</title>
<style>
div {
display: flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;
-webkit-flex-flow: column;
height: 400px;
padding: 1em;
color: white;
font-weight:bold;
}
p{
width: 100px;
margin: 1em;
height: 100px;
background-color: dodgerblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>Enfant1</p>
<p>Enfant2</p>
<p>Enfant3</p>
</div>
</body>
</html>
Le résultat du rendu de ce code et le balisage dans le navigateur Web sont illustrés dans la
figure 5-12.
Figure 5-12
Trois boîtes enfants dans
l'ordre numérique
124 | Leçon 5
Pour inverser l'ordre des boîtes enfants, remplacez chacune des valeurs de la colonne
flex-flow par colonne-reverse, comme suit :
flex-flow : column-reverse;
ms-flex-flow : column-reverse;
-moz-flex-flow : column-reverse;
-o-flex-flow : column-reverse;
webkit-flex-flow : column-reverse;
Comparez la figure 5-13 à la figure 5-12 pour voir les effets de la valeur reverse.
Figure 5-13
Les mêmes boîtes enfants
dans l'ordre inverse
INVERSER L'ORDRE DES ÉLÉMENTS FLEXBOX

PRÉPAREZ-VOUS. Pour créer une boîte flexible qui inverse l'ordre des éléments flexbox,
effectuez les opérations suivantes :
1. Dans un outil d'édition ou un outil de développement d'application, créez un document
HTML avec le balisage suivant :
<!doctype html>
<html>
<head>
<title>Exemple d'éléments flexbox en ordre inversé</title>
<style>
div {
display: flexbox;
flex-flow: column;
-ms-flex-flow: column;
-moz-flex-flow: column;
-o-flex-flow: column;
-webkit-flex-flow: column;
height: 400px;
padding: 1em;
color: white;
font-weight: bold;
}
p{
width: 300px;
margin: 1em;
height: 100px;
background-color: olive;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>Pierre</p>
<p>Papier</p>
<p>Ciseaux</p>
</div>
</body>
</html>
2. Enregistrez le fichier sous le nom L5-reverseorder-exercise.html et ouvrez-le dans le

navigateur Web. Ajustez la taille de la fenêtre du navigateur afin que l'affichage ressemble
à celui de la figure 5-14.
Figure 5-14
Boîte flexible avec des
éléments flexbox orientée
verticalement
126 | Leçon 5
4. Dans le fichier HTML, inversez l'ordre des colonnes à l'aide de la valeur flex-flow:
column-reverse, comme suit :
flex-flow : column-reverse;
ms-flex-flow : column-reverse;
-moz-flex-flow : column-reverse;
-o-flex-flow : column-reverse;
-webkit-flex-flow: column-reverse;
5. Réenregistrez le fichier et ouvrez-le dans le navigateur Web. L'affichage doit ressembler

au contenu de la figure 5-15.
Figure 5-15
Les éléments flexbox sont
dans l'ordre inverse
7. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous passez
à l'exercice suivant au cours de cette session.
TRI ET RÉORGANISATION DU CONTENU

Vous pouvez contrôler l'ordre et la disposition du contenu d'une boîte flexible à l'aide de la
propriété flex-order. Cette propriété réorganise les éléments enfants dans une boîte flexible.
Comment les boîtes Pour ce faire, la propriété assigne des boîtes enfants aux groupes et contrôle ensuite l'ordre
flexibles servent-elles à dans lequel elles apparaissent dans une mise en page, en commençant par le groupe ayant le
trier et à organiser du plus petit numéro.
contenu ?
Nous allons voir comment la propriété flex-order fonctionne. Le code CSS suivant et le
3.2
balisage créent trois boîtes enfants dans une boîte flexible :
<!doctype html>
<html>
<head>
<title>Exemple de tri flexible</title>
<style media="screen">
div {
display: flexbox;
flex-flow: row;
-ms-flex-flow: row;
-moz-flex-flow: row;
-o-flex-flow: row;
-webkit-flex-flow: row;
height: 200px;
padding: 1em;
background-color: palegoldenrod;
font: bold 100%/1 sans-serif;
}
div>div {
width: 100px;
margin: 1em;
height: 100px;
background-color: dodgerblue;
text-align: center;
color: white;
font-size: x-large;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div>Clés</div>
<div>Téléphone</div>
<div>Portefeuille</div>
</div>
</body>
</html>
L'ouverture du fichier dans le navigateur affiche les résultats indiqués la figure 5-16.
Figure 5-16
Trois boîtes enfants dans
une boîte flexible avec une
orientation horizontale
L'élément de style HTML précédent comprend l'attribut media=screen, qui est une
requête de média. Les requêtes de média vous permettent d'adapter un document
HTML aux périphériques des utilisateurs Parmi les types d'élément multimédia HTML
REMARQUE
* on trouve aural, braille, handheld, print, projection, screen, tty et tv. La même syntaxe
peut également être utilisée avec les règles CSS @media et @import. La règle @media all
indique que le CSS doit être appliqué à tous les médias de sortie.
La propriété flex-order place les boîtes enfants dans des groupes ordonnés. Le groupe par
défaut est 0. Vous devez déclarer des groupes et leur assigner un numéro en CSS en
utilisant la propriété flex-order et tous les éléments enfants qui ne sont pas explicitement
affectés à un groupe restent dans le groupe 0. Les groupes déclarés apparaissent avant le
128 | Leçon 5
groupe 0. Donc, pour réorganiser les boîtes enfants afin que les boîtes Clés et Portefeuille
apparaissent avant la boîte Téléphone, ajoutez ce code au bas de la section de style :
div>div:first-child,
div>div:last-child {
flex-order: 1;
-ms-flex-order: 1;
-moz-flex-order: 1;
-o-flex-order: 1;
-webkit-flex-order: 1;
}
L'ouverture du fichier dans le navigateur Web donne les résultats indiqués dans la
figure 5-17.
Figure 5-17
Réorganisation des boîtes
enfants dans une boîte
parent
EXPLORER LA PROPRIÉTÉFLEX-ORDER
PRÉPAREZ-VOUS. Pour explorer la propriété flex-order, procédez comme suit :
document HTML basé sur le code précédemment illustré dans la figure 5-16.
2. Enregistrez le fichier sous le nom L5-flexorder-exercise.html.
3. Ajoutez le code suivant à la fin de la section de style :
div>div:first-child,
div>div:last-child {
flex-order: 1;
-ms-flex-order: 1;
-moz-flex-order: 1;
-o-flex-order: 1;
-webkit-flex-order: 1;
}
4. Enregistrez le fichier et affichez-le dans un navigateur Web. Il devrait ressembler à
celui de la figure 5-17.
restitue correctement. Notez les navigateurs qui prennent en charge les propriétés
flex-flow et flex-order.
■ Utilisationdes dispositions en grille pour appliquer au contenu un alignement,

une direction et une orientation
Les dispositions en grille sont semblables aux feuilles de calcul. En effet, elles contiennent
L'ESSENTIEL des cellules, des lignes et des colonnes, mais vous pouvez créer différents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout à une feuille de calcul.
Les dispositions en grille sont plus adaptées à des dispositions plus complexes qu'une boîte
flexible peut facilement gérer. Les interfaces de jeu sont de bonnes candidates pour les grilles,
tout comme les mises en page de journal (voir la figure 5-18). Une disposition en grille permet
de positionner des lignes et des colonnes pour un contrôle précis de la mise en page et
nécessite une fraction du code CSS comme avec les anciennes techniques. La modularité est
un autre avantage des grilles. Pour déplacer des blocs de contenu d'un côté d'une page ou d'une
application à un autre, il vous suffit de déplacer certaines lignes de code dans CSS.
Figure 5-18
Mise en page de journal
à l'aide d'une grille
Vous devez définir un élément grid (layout) en utilisant la propriété CSS grid display:grid
ou display:inline-. Cela crée le conteneur pour la disposition.
Les éléments enfants d'une grille sont appelés éléments de grille, vous pouvez les
PRÊT POUR LA CERTIFICATION positionner et dimensionner en fonction de ce qui suit :
Comment une disposition • Tracés de la grille : les colonnes et les lignes de la grille ; vous devez définir les
en grille est-elle utilisée tracés de la grille à l'aide des propriétés grid-rows et grid-columns
pour établir l'orientation,
la direction et l'alignement • Lignes de la grille : lignes horizontales et verticales qui divisent les colonnes ou les lignes
du contenu ? • Cellules de la grille : espace logique utilisé pour organiser les éléments de grille,
3.2 semblable à une cellule dans une feuille de calcul
Les propriétés grid et leurs valeurs sont répertoriées dans le tableau 5-2.
Tableau 5-2
Valeurs et propriétés Propriété Valeur Description
d'une grille
Propert grid-columns length Spécifie les paramètres pour
ou percentage une ou plusieurs colonnes ou
grid-rows fraction lignes dans une grille
max-content
min-content
minmax
(min, max)
auto
grid-template string+ Offre une visualisation de la
none structure de l'élément grid et
définit les cellules de la grille
grid-cell string Positionne un élément enfant à
none l'intérieur d'une cellule de grille
nommée
grid-column [integer or Place des éléments enfants dans
ou string start] une grille
grid-row [integer or
string end]
auto
grid-column-span integer Définit les dimensions d'une
ou cellule de grille en spécifiant la
grid-row-span distance (en lignes) entre la
ligne de début à la ligne de fin
(suite)
130 | Leçon 5
Tableau 5-2
(suite) Propriété Valeur Description
grid-column-sizing track-minmax Modifie la taille des colonnes ou des
ou lignes implicites, qui sont dimensionnés
grid-row-sizing automatiquement par défaut
grid-flow none Crée des colonnes ou des lignes
rows supplémentaires pour recevoir du
columns contenu
grid-column-align start Contrôle l'alignement de l'élément
ou end enfant dans une cellule
grid-row-align center
stretch
Avec toutes les propriétés disponibles il est donc évident que vous pouvez spécifier la
structure de l'élément grid, positionner et dimensionner des éléments de grille de plusieurs
façons.
Création d'une grille à l'aide de propriétés CSS pour les lignes et colonnes
Les propriétés CSS display:grid (ou display:inline-grid), grid-columns et grid-rows sont

utilisées pour créer des structures de grille. La taille des colonnes et des lignes peut
être fixe ou flexible.
Les principales propriétés qui créent une grille sont display:grid (ou display:inline-grid), grid-
columns et grid-rows.
Vous pouvez définir une taille fixe pour les colonnes et les lignes, ainsi elles ne sont pas
redimensionnées lorsque la taille de l'écran change, ou définir une taille fractionnaire par
rapport à la grille. Les tailles fractionnaires sont définies avec fr, ainsi, une ligne définie
avec 2fr présentera une taille deux fois supérieure à la taille d’une ligne définie avec 1fr.
La valeur 1fr est l'abréviation de « une fraction ». Vous pouvez également utiliser la valeur « auto »
pour que des colonnes ou des lignes s'adaptent à leur contenu.
Quelles sont les propriétés Le code CSS suivant et le balisage HTML fournissent un exemple de présentation de la
CSS pour les colonnes et grille. Le préfixe fournisseur - ms- est inclus au début de toutes les constructions liées à la
les lignes de la grille ?
grille parce que, à ce jour, seul Microsoft Internet Explorer 10 prend en charge les disposi-
3.2
tions en grille. Ceci est illustré dans la figure 5-19.
Figure 5-19
Disposition en grille simple
<!doctype html>
<html>
<head>
<title>Exemple de grille</title>
<style type="text/css">
#grid {
background: palegoldenrod;
border: silver;
display: -ms-grid;
color: white;
font-weight: bold;
-ms-grid-columns: 150px auto 2fr;
-ms-grid-rows: 50px 6em auto;
}
#logo {
background: dodgerblue;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#item {
background: olive;
-ms-grid-row: 2;
-ms-grid-column: 2;
}
</style>
</head>
<body>
<div>
<div id="grid">
<div id="logo">Logo</div>
<div id="item">Article</div>
</div>
</div>
</body>
</html>
Dans cet exemple, la structure de la grille a trois colonnes et trois lignes. La première
colonne a une largeur fixe de 150 pixels. La largeur de la deuxième colonne s'ajuste en
fonction du contenu, comme indiqué par le mot clé auto. La troisième colonne correspond
à deux unités de fraction de l’espace restant dans la grille.
La première ligne est de 50 pixels de haut, la deuxième ligne est de 6 ems de haut, et la
troisième ligne s'ajuste en fonction du contenu.
CRÉER UNE DISPOSITION EN GRILLE SIMPLE

PRÉPAREZ-VOUS. Pour créer une disposition en grille simple, effectuez les opérations
suivantes :
document HTML basé sur le code précédemment illustré dans la figure 5-19.
2. Enregistrez le fichier sous le nom L5-grid-exercise.html.
3. Ouvrez le fichier L5-grille-exercise.html dans Internet Explorer 10. Si vous affichez le
fichier HTML dans un autre navigateur, cela va produire des résultats inattendus. La
disposition doit se présenter comme dans la figure 5-19.
132 | Leçon 5
4. Ajoutez un autre élément à la grille afin qu'une cellule s'affiche dans la troisième ligne
et la troisième colonne. Pour ce faire, insérez le texte suivant à la fin de la section de
style :
#item2 {
background: orange;
-ms-grid-row: 3;
-ms-grid-column: 3;
}
5. Insérez le texte suivant après l'élément div dans la section body :
<div id="item2">Article2</div>
6. Réenregistrez le fichier et affichez-le dans un navigateur Web. La disposition doit se
présenter comme dans la figure 5-20.
Figure 5-20
Troisième élément ajouté
à la grille
7. Fermez l'outil d'édition et le navigateur Web.
Pour plus d'informations sur les dispositions en grille, visitez la page « Disposition en grille CSS » sur
http://www.w3.org/TR/css3-grid-layout/.
Présentation des modèles de grille
Un modèle de grille utilise des caractères alphabétiques pour représenter la position

des éléments dans une grille. Vous devez utiliser les caractères alpha avec les
propriétés grid-template, grid-rows et grid-columns pour créer une grille dans
laquelle les données peuvent être organisées.
Le module des modèles de disposition en grille CSS du groupe W3C présente une autre

approche des dispositions en grille en créant un modèle de grille, qui ressemble à un
Qu'est-ce qu'un modèle de tableau vide dans lequel les données peuvent être organisées. Un modèle de grille utilise
grille ? des caractères alphabétiques pour représenter la position des éléments dans une grille.
3.2
Utilisez la propriété grid-position et attribuez un caractère alphabétique comme valeur de position.
Les exemples suivants illustrent la propriété grid-position définie pour les quatre éléments :
news { grid-position: a; }
weather { grid-position: b; }
sports { grid-position: c; }
events { grid-position: d; }
Après l'attribution des positions, créez une disposition avec des chaînes de caractères.
Une chaîne est égale à une ligne, et chaque caractère de la chaîne est une colonne. Par
exemple, pour créer une grille avec une seule ligne et quatre colonnes qui s'ajustent au
contenu, vous devez utiliser la syntaxe suivante :
div { grid-template: "abcd"; grid-rows: auto;
grid-columns: auto;}
Bien que cet exemple utilise le mot clé auto, vous pouvez utiliser les valeurs grid-rows et
grid-colums comme indiqué dans le tableau 5-2.
Les spécifications pour les dispositions de modèle de grille sont semblables à des ébauches
et ne sont pas prises en charge par les navigateurs Web au moment de la rédaction de ce
document. Cependant, vous pourriez rencontrer des modèles de grille pour l'examen MTA
98-375. Vous devriez donc vérifier la dernière spécification du module des modèles de
disposition en grille CSS du groupe W3C lors de la préparation de l'examen.
RÉSUMÉ DES COMPÉTENCES
Dans cette leçon, vous avez appris ce qui suit :

• L es interfaces utilisateur peuvent être simples et directes ou être plus complexes
avec plusieurs sections, boutons et contrôles.
• La conception d'une interface qui s'affiche bien sur les grands écrans de PC et sur les petits
appareils mobiles exigeait auparavant beaucoup de balises et de code. Aujourd'hui, le
modèle de boîte flexible CSS et le modèle de disposition en grille réduisent la quantité de
code nécessaire pour la compatibilité inter-périphériques. Comme les spécifications CSS
ne sont pas encore définitives, vous devrez utiliser des préfixes spécifiques au fournisseur
avant les noms de propriétés CSS pour tout faire fonctionner.
• Les boîtes flexibles sont conçues pour les barres d’outils, les menus, les formulaires
et d’autres éléments semblables dans des pages Web et applications. Les grilles sont
mieux adaptées aux conceptions élaborées.
• Une boîte flexible et son contenu peuvent être configurés pour modifier la taille,
horizontalement et verticalement, lorsque la taille de l'écran sur lequel ils sont
affichés change. Vous pouvez également inverser le sens et l'ordre des boîtes
flexibles avec une ligne de code.
• Une boîte flexible peut contenir des boîtes enfants flexibles en hauteur et en
largeur. Vous devez utiliser la propriété flex avec les boîtes enfants. La propriété
flex-flow définit les propriétés flex-direction et flex-wrap d'une boîte flexible (la boîte
parent) en même temps.
• Les dispositions en grille sont semblables aux feuilles de calcul. En effet, elles contiennent
des cellules, des lignes et des colonnes, mais vous pouvez créer différents types de
dispositions qui, en fin de compte, ne ressemblent pas du tout à une feuille de calcul.
• Vous devez utiliser les propriétés CSS display:grid (ou display:inline-grid), grid-columns
et grid-rows pour créer des structures de grille. La taille des colonnes et des lignes
peut être fixe ou flexible.
• Les boîtes flexibles et les grilles sont conçues pour mettre à l'échelle proportionnellement.
• La propriété flex-order vous permet de modifier l'ordre des éléments enfants dans
une boîte flexible, de les réorganiser dans un ordre quelconque sans avoir à les
modifier dans le balisage HTML.
• Un modèle de grille utilise des caractères alphabétiques pour représenter la
position des éléments dans une grille. Vous devez utiliser les caractères alpha avec
les propriétés grid-template, grid-rows et grid-columns pour créer une grille dans
laquelle les données peuvent être organisées.
■ Évaluation des connaissances

Compléter l’espace vide
Complétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces
prévus à cet effet.
1. L' est la partie d’un site Web ou d’une application avec laquelle
l'utilisateur peut interagir.
2. Dans le modèle de boîte CSS de W3C d’origine, la désigne l’espace
entre la bordure et le contenu de la boîte.
134 | Leçon 5
3. Dans le modèle de boîte CSS de W3C, un élément de niveau

permet de créer des boîtes qui assistent à la mise en page du document.
4. Les boîtes flexibles enfants sont appelées et sont agencées selon le
modèle de boîte flexible.
5. Les éléments enfants d'une grille sont appelés
6. offre une méthodologie de disposition flexible pour la création d’une
interface utilisateur, notamment pour créer des contrôles, des barres d’outils, des
menus et des formulaires qui sont redimensionnés et repositionnés automatiquement
lorsque l’utilisateur change la taille de la fenêtre du navigateur.
7. La relation décrit la manière dont une boîte parent peut contenir une
ou plusieurs boîtes enfants.
8. Un ressemble à un tableau vide dans lequel les données peuvent
être organisées.
9. Un élément est conçu pour agencer le texte sans nuire à la structure
du document. Citons comme exemples les caractères gras et le nouvel
élément HTML5 mark.
10. Alors que le modèle de boîte flexible convient parfaitement à des éléments simples,
comme les boutons, les barres d’outils et de nombreux formulaires, vous pouvez
utiliser le modèle pour les dispositions plus complexes.
Questions à choix multiples

Entourez la lettre correspondant à la meilleure réponse.
1. Parmi les éléments suivants, lequel ne figure pas dans le modèle de boîte CSS de
W3C d’origine ?
a. margin
b. bordure
c. toolbar
d. remplissage
2. Parmi les modèles suivants, lequel convient le mieux aux boutons et barres d’outils ?
a. Modèle de boîte flexible (Flexbox)
b. Modèle de boîte CSS
c. Modèle de disposition en grille
d. Aucune des réponses ci‑dessus
3. Vous utilisez CSS pour créer une boîte flexible dans un document HTML dans le
cadre de votre travail. Tout le monde au bureau utilise le navigateur Web Internet
Explorer. Quel préfixe devez-vous utiliser avec le nom des propriétés CSS pour
garantir la compatibilité de l’affichage du document HTML ?
a. -moz-
b. -ms-
c. -webkit-
d. -o-
4. Quelle propriété flexbox permet de rendre les boîtes enfants flexibles au niveau de la
hauteur et de la largeur ?
a. flex
b. flex-child
c. flex-wrap
d. flex-align
5. Vous souhaitez répartir l’espace vide dans une fenêtre de navigateur de manière
uniforme en fonction de la taille de toutes les boîtes enfants à l’intérieur d’une boîte
flexible. Quelle propriété CSS devez-vous utiliser ?
a. flex-align
b. flex-wrap
c. flex-order
d. flex-pack
Understanding CSS Essentials: Layouts | 135
6. Quelle propriété flexbox permet d’affecter des éléments enfants à des groupes pour
contrôler la disposition à l’intérieur d’une boîte flexible ?
a. flex
b. flex-group
c. flex-direction
d. flex-order
7. Parmi les propriétés suivantes, laquelle permet de placer des éléments enfants dans
une grille ?
a. grid-columns
b. grid-column
c. grid-flow
d. grid-pack
8. Parmi les propositions suivantes, laquelle permet d’adapter un document HTML aux
périphériques des utilisateurs ?
a. Requêtes multimédias
b. Modèle de boîte CSS
c. Propriété grid-template
d. @import
9. Parmi les propositions suivantes, laquelle correspond à la meilleure utilisation d’une
disposition en grille ?
a. Menu
b. Barre d’outils
c. Pied de page
d. Interface de jeu
10. Quelle est la fonction principale d’un modèle de grille ?
a. Appliquer un style à une grille
b. Créer une table pour recueillir des données
c. S’assurer que la grille possède un nombre égal de colonnes et de lignes
Vrai/Faux
Entourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.
V F 1. Une boîte flexible est définie par un élément avec les propriétés CSS
display:boxflex ou display:inline-boxflex.
V F 2. Une boîte parent peut contenir une ou plusieurs boîtes enfants.
V F 3. Vous ne pouvez pas inverser l’ordre des boîtes enfants à l’intérieur d’une boîte
flexible.
V F 4. Une boîte flexible nécessite un contour ou une couleur d’arrière-plan.
V F 5. Une disposition en grille convient davantage à un journal en ligne ou un jeu vidéo.
■ Évaluation des compétences

Scénario 5-1 : Faire la distinction entre le modèle de boîte flexible (Flexbox)
et le modèle de disposition en grille
Une collègue, Cynthia, confond le modèle de boîte flexible CSS de W3C avec le modèle
de disposition en grille. Comment lui expliquez-vous la différence ?
Scénario 5-2 : Présentation des boîtes flexibles et des éléments flexbox

Mlle Takeet est enseignante dans une école maternelle privée Barely Tall Academy. Elle
souhaite développer un jeu de mémoire pour aider les élèves à connaître les animaux
d’Afrique. Le jeu doit comporter un grand nombre de boîtes contenant des images et des
136 | Lesson 5
questions. Elle décide d’utiliser une disposition flexible, mais n’a aucune expérience
avec HTML5 ou CSS. Elle est assez frustrée de ne pas comprendre les détails des boîtes
flexibles et des éléments flexbox. Que pouvez-vous dire à Mlle Takeet ?
■ Évaluation de la maîtrise des concepts

Scénario 5-3 : Solution à l’incompatibilité des navigateurs
Ed raconte que même en vérifiant de près son code CSS et le balisage HTML et en validant
son document sur la page Web Service de validation du W3C (World Wide Web Consortium),
le document ne s’affiche pas comme prévu dans son navigateur Web. Certaines propriétés
flexbox ne fonctionnent tout simplement pas. Que pouvez-vous dire à Ed ?
Scénario 5-4 : Présentation de la propriété Flex

Revoilà Ed avec un autre problème. Il teste la propriété flex pour créer des sections d’une
page Web. Il voudrait que la taille d’une boîte enfant corresponde au double de la taille de
l’autre boîte enfant sur la même ligne. Il utilise une valeur de 2 pour la seconde boîte,
mais elle ne s’affiche pas dans les proportions doubles par rapport à la première boîte
enfant. Que pouvez-vous lui dire pour l’aider à mieux comprendre la propriété flex ?
Gestion de LEÇON 6
l’enchaînement du
texte avec CSS
Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif

de l'examen MTA
Gestion de l'enchaînement du Gérer l’enchaînement du texte 3.3
texte avec CSS avec CSS
Présentation et utilisation des Gérer l’enchaînement du texte 3.3
régions pour contrôler avec CSS
l'enchaînement du texte entre
plusieurs sections
TERMES CLÉS
césure flow-into
conteneur de contenu flux nommé
disposition multicolonne iframe
élément flottant positionné régions CSS
exclusions CSS source de contenu
flow-from
Stacey, gestionnaire du site Web de Media Malted Milk, a pu se familiariser avec HTML5

et CSS3 avec votre aide. Elle aimerait en savoir plus sur les techniques de gestion de flux
de contenu à l'aide de CSS3. Elle souhaite préparer une présentation électronique sur les
régions CSS, la disposition multicolonne, la césure et les exclusions CSS, puis présenter
ces informations au personnel au cours d'un déjeuner-colloque la semaine prochaine.
■ Gestion de l'enchaînement du texte avec CSS
Historiquement, la gestion du flux de contenu était une procédure effectuée manuellement

L'ESSENTIEL dans les documents HTML. Désormais, les régions et les exclusions CSS ainsi que les
dispositions à plusieurs colonnes permettent d'enchaîner le contenu de manière dynamique.
137
138 | Leçon 6
Les éditeurs de logiciels comme Adobe et Microsoft ont su paramétrer avec une grande
précision la mise en page complexe de publications imprimées telles que les magazines, les
journaux et les livres. Adobe InDesign, Microsoft Publisher et même Microsoft Word 2010
gèrent de manière efficace l'enchaînement du contenu dans les colonnes. InDesign et
Publisher sont particulièrement efficaces lorsqu'il s'agit de répartir le contenu dans les zones
non contiguës (adjacentes) d'un document, parfois séparées par des images, des boîtes de
contenu voire des pages. Les logiciels de publication assistée par ordinateur permettent
d'enchaîner facilement le contenu entre les différentes zones. Ainsi, lorsqu'une zone est
modifiée, le contenu est correctement redistribué dans les autres zones connectées.
Depuis des années, l'enchaînement du contenu de documents HTML représentait un
véritable défi pour les concepteurs Web et les concepteurs d'applications. Dans un document
HTML, l'affichage d'une disposition complexe requiert le même positionnement flexible de
boîtes que celui offert par les logiciels de publication assistée par ordinateur, mais les outils
nécessaires pour ce type d'enchaînement ne sont disponibles que depuis très peu de temps.
PRÊT POUR LA CERTIFICATION Microsoft et Adobe ont collaboré avec le groupe W3C pour créer le concept de régions CSS
Comment faut-il pour l'enchaînement de contenu Web. Les régions CSS permettent aux développeurs d'organiser
utiliser CSS pour gérer le de manière dynamique le contenu de plusieurs boîtes, ou conteneurs, dans les documents HTML
flux de contenu de texte avec des dispositions fluides. Le contenu s'adapte et s'affiche correctement, que l'utilisateur
dans un document HTML ? consulte le document sur un moniteur d'ordinateur de grand format ou sur l'écran d'une tablette.
3.3 Si CSS3 permet d'utiliser la disposition multicolonne pour répartir le contenu dans
plusieurs colonnes (voir la figure 6-1), les régions CSS permettent de mieux contrôler
l'enchaînement du contenu dans le cas de dispositions plus complexes. Pour combiner
les régions CSS, vous devez utiliser des techniques de disposition CSS, notamment les
colonnes, les boîtes flexibles et les dispositions en grille.
Figure 6-1
Disposition Web avec des
colonnes
Illustration: © Megan Tamaccio/iStockphoto

REMARQUE
*
Microsoft recommande
La césure, qui coupe les mots entre les syllabes en fin de ligne, est également importante
d'utiliser les régions CSS pour des mises en page fluides, car elle permet de justifier l'ensemble des paragraphes
pour la mise en page indépendants ainsi que ceux contenus dans les colonnes. Les éléments flottants positionnés,
et JavaScript lors désormais appelés exclusions CSS, vous permettent d'entourer complètement de texte des
du développement images, des formes ou des conteneurs de texte.
d'applications Windows Cette leçon aborde les régions CSS, la disposition multicolonne CSS3, la césure CSS3 et les
Store dans Windows 8 et éléments flottants positionnés. Vous apprendrez comment enchaîner et présenter le contenu
Internet Explorer 10. dans des dispositions HTML capables de s'ajuster de manière dynamique.
Pour plus d'informations sur les régions CSS, la césure et la disposition à plusieurs colonnes, Microsoft
et Adobe proposent des ressources qu'il est utile de consulter. Rich page layout with HTML et CSS3 »
(Régions CSS3 : Mise en page enrichie avec HTML et CSS3) à l'adresse http://adobe.ly/kN7MUy. Pour
accéder aux informations fournies par Microsoft, consultez la page Web « CSS » à l'adresse http://
msdn.microsoft.com/fr-fr/library/hh673536(v=VS.85).aspx.
Gestion de l’enchaînement du texte avec CSS | 139
■ Présentation et utilisation des régions pour contrôler l'enchaînement du

texte entre plusieurs sections
Les régions CSS vous permettent d'enchaîner le contenu entre les différentes zones, adjacentes
ou non, d'un document HTML. Les régions CSS représentent des zones (régions) définies
L'ESSENTIEL d'un document HTML dans lesquelles le contenu peut être réparti. Lorsqu'une région ne peut
pas recevoir la totalité du contenu, le reste du contenu est automatiquement inséré dans la
région suivante. Ceci est similaire au fonctionnement des programmes de mise en page.
Dans un document HTML standard, vous pouvez afficher le contenu dans différentes sections
ou zones, mais chaque zone est indépendante. Pour faire passer le texte de débordement
d'une zone à l'autre, l'opération est généralement manuelle. Cette méthode ne convient pas
vraiment à une situation dans laquelle un utilisateur redimensionne l'écran ou utilise des outils
d'accessibilité, par exemple une loupe. Cette méthode ne permet pas non plus de basculer
automatiquement entre le mode portrait et le mode paysage sur les tablettes et les smartphones.
Les régions CSS représentent une solution à ce problème.
Les régions CSS représentent des zones (régions) définies d'un document HTML dans
lesquelles le contenu peut être réparti. Comme pour les programmes de mise en page, lorsque
le contenu est trop volumineux pour s’insérer dans une région, le reste du contenu passe
automatiquement dans la région suivante. (Voir la figure 6-2.) Si un utilisateur redimensionne
l'écran sur lequel le document est affiché, ou s'il affiche le document sur un écran plus petit ou
Que sont les régions CSS ? plus grand, le contenu est redimensionné et se redéroule automatiquement dans les diverses
3.3 régions.
Figure 6-2
Flux de contenu avec les
régions CSS
Il n'est pas nécessaire que les régions soient adjacentes dans le document, et vous
pouvez contrôler l'ordre dans lequel le contenu inséré s'affiche. La figure 6-3 illustre
l'enchaînement d'un contenu dans des régions non contiguës. Ce type d'enchaînement
est semblable à l'« enchaînement d'un article » ; il permet d'ajouter des citations et des
encadrés à un document sans affecter l'enchaînement du contenu.
Figure 6-3
Flux de contenu non contigu
entre les régions
140 | Leçon 6
Enchaînement dynamique du contenu à travers les conteneurs
Pour implémenter des régions CSS, vous devez spécifier une source de contenu et
des conteneurs de contenu. Ces deux tâches sont effectuées à l'aide des propriétés CSS
flow-into et flow-from .
Une source de contenu représente un ou plusieurs blocs de texte dans un

Que représentent une document HTML identique ou distinct contenant les données à organiser à l’aide d’une
source de contenu et un disposition. Le contenu est également appelé « flux de contenu ».
conteneur de contenu par Vous avez également besoin de conteneurs de contenu, c'est-à-dire les zones dans
rapport aux régions CSS ?
lesquelles le contenu est organisé. Un document HTML comportant des conteneurs de
3.3
contenu sert de page maître, comme un modèle. Chaque conteneur est dimensionné et
positionné à l'emplacement où vous souhaitez afficher le contenu ; mais au départ chaque
conteneur est vide.
Dans la source de contenu, la propriété CSS flow-into est attribuée à l'élément qui contient
PRÊT POUR LA CERTIFICATION le contenu à organiser. La valeur de cette propriété est appelée un flux nommé.
Comment contrôler
L'exemple suivant commence par du code CSS pour une source de contenu. La valeur de
l'enchaînement du texte
entre plusieurs régions ? flow-into est « main », qui est le flux nommé. Dans la mesure où le contenu sera affiché à
3.3 un autre emplacement (dans les conteneurs de contenu), cet élément source proprement dit
ne sera pas visible sur la page HTML.
<style>
#source {
flow-into: main;
}
.region {
flow-from: main;
background: #9ACD32;
}
</style>
<body>
<div id="source">
<p>Lorem ipsum dolor ...</p>
</div>
<div id="region1" class="region"></div>
</body>
Le W3C définit les régions CSS dans la spécification relative aux régions CSS, encore
en cours de rédaction à ce jour. Ainsi, à l'instar des boîtes flexibles et des grilles décrites
REMARQUE
* dans la leçon 5, il convient d'utiliser le préfixe du fournisseur avec les noms de propriétés.
L'utilisation du préfixe de fournisseur est abordée dans l'exercice étape par étape suivant.
Dans ce même exemple, la propriété CSS flow-from crée le conteneur de contenu, qui

est une région CSS. La valeur de la propriété flow-from doit correspondre à la valeur du
flux nommé de la propriété flow-into C'est ainsi que sont associés la source de contenu
et le conteneur de contenu. (Dans l'exemple de cette section, la source de contenu et
les conteneurs de contenu se trouvent dans le même document HTML pour plus de
commodité. Dans une application réelle, vous utiliserez probablement un document
HTML distinct pour la source et les conteneurs.)
Lorsqu'un navigateur affiche la page avec les conteneurs de contenu, le contenu est
réparti dans les conteneurs et s'affiche à l'écran, comme illustré à la figure 6-4. Si vous
redimensionnez l'écran, le contenu se redéroule tel qu'illustré à la figure 6-5.
Figure 6-4
Flux de contenu dans des
conteneurs
Figure 6-5
Le redimensionnement de
l'écran redéroule le contenu
Vous pouvez également utiliser plusieurs sources et affecter la propriété flow-into à plusieurs
éléments. Le contenu est extrait de la source dans l'ordre dans lequel il apparaît dans le
modèle DOM (Document Object Model). C'est ce que l'on appelle l'ordre des documents.
Le modèle DOM a été présenté dans la leçon 1, mais il est utile d'y revenir ici. Le
modèle DOM est une spécification du W3C qui décrit la structure des documents
HTML et XML (Extensible Markup Language) de manière à permettre à un navigateur
REMARQUE
* Web de les manipuler. Le modèle DOM permet aux programmes et aux scripts de
mettre à jour le contenu, la structure et les styles à la volée ; n'importe quel élément
d'un fichier HTML ou XML peut ainsi être modifié.
142 | Leçon 6
DÉBORDEMENT DU TEXTE
Afin que les régions CSS fonctionnent, l'enchaînement du contenu ne doit pas affecter la
hauteur d'une région ; vous devez définir la hauteur des régions dans CSS de manière à ce
qu'elles ne soient pas flexibles. Une région reçoit autant de contenu que possible, puis le
reste du contenu est inséré dans la région suivante.
S'il reste du contenu une fois toutes les régions remplies, l'un des trois scénarios suivants
peut se produire. L'excès de contenu de la dernière région peut :
• Être tronqué
• Continuer à déborder et être visible
• Continuer à déborder, mais être masqué
Vous pouvez contrôler la façon dont la dernière région gère le débordement du contenu
à l'aide des propriétés region-overflow et overflow.
region-overflow a la valeur auto ou break. À l'aide de la valeur auto, vous définissez la
propriété overflow du contenu selon que celui-ci doit être visible ou masqué. Par exemple,
si vous souhaitez que le contenu continue à déborder et qu'il soit visible, utilisez la
syntaxe suivante :
.region {
region-overflow:auto;
Débordement visible
}
La figure 6-6 montre le contenu visible qui déborde au-delà de la dernière région.
Figure 6-6
Débordement de contenu
visible
L'affectation de la valeur break à la propriété region-overflow empêche le contenu de

déborder au-delà de la dernière région, tronquant le contenu à cet emplacement. La
syntaxe est la suivante :
.region {
region-overflow:break;
}
IMPLÉMENTATION MICROSOFT DES RÉGIONS CSS

La méthode utilisée par Microsoft pour l'implémentation des régions CSS diffère
légèrement de la version de W3C décrite précédemment. Microsoft utilise des iframes,
qui désignent des mini-boîtes sur une page Web dont le contenu externe est intégré dans
un document HTML, telle que la source de contenu. Vous devez également utiliser le
préfixe du fournisseur -ms- avec les propriétés flow-into et flow-from.
L'exemple suivant illustre un élément iframe avec un ID unique, que vous ajoutez à une
page maître :
<iframe id="main-data-source" src="source.html" />
Ensuite, vous créez le flux nommé à l'aide d'un sélecteur CSS qui spécifie la source de
données :
#main-data-source { -ms-flow-into: main; }
Pour créer des conteneurs de contenu, assignez un nom de classe aux éléments que vous
souhaitez utiliser en tant que conteneurs :
<div class="region"></div>
<div class="region"></div>
L'utilisation de region dans les deux cas n'est pas une erreur ! Tout comme pour
l'application d'une règle CSS, vous pouvez identifier les régions à l'aide d'un nom de
REMARQUE
* classe partagé (comme dans cet exemple) ou les répertorier à l'aide d'ID individuels
(comme dans le premier exemple).
Créez ensuite un sélecteur CSS qui spécifie la source de données permettant d'accepter le

flux de contenu :
.region { -ms-flow-from: main; }
Si vous comparez ces code et balisage spécifiques à Microsoft à l'exemple général illustré
précédemment, il est possible d'identifier assez aisément les similitudes.
Il convient de noter plusieurs autres éléments se rapportant à la version de Microsoft des
régions CSS, certains pouvant figurer dans l'examen 98-375 :
• msRegionUpdate : permet de manipuler de manière dynamique les régions

• msRegionOverflow : gère le débordement de contenu, à l'instar de la propriété region-overflow
• msGetRegionContent : méthode de script définie par Microsoft comme renvoyant
« une matrice d'instances Range correspondant au contenu du flux de région qui
se trouve dans la région »
Vous rencontrerez peut-être ces éléments lorsque vous recherchez ou développez des
régions CSS pour Windows 8 ou Internet Explorer 10.
CRÉER DES RÉGIONS CSS

PRÉPAREZ-VOUS. Pour créer des régions CSS fixes, procédez comme suit :
1. Dans un outil d'édition ou un outil de développement d'applications, créez un
document HTML incluant le contenu suivant :
<!doctype html>
<html>
<head>
<title>Exemple de régions CSS</title>
144 | Leçon 6
body, html { height:100%; width:100%; }
body{
famille de polices sans serif;
color: black;
font-size: large;
}
#source{
-webkit-flow-into: main;
}
.region{
-webkit-flow-from: main;
margin: 0 25px 0 0;
background: #EEE8AA;
padding: 20px;
}
#region1{
width: 20%;
height: 50%;
float: left;
}
#region2{
width: 20%;
height: 50%;
float: left;
}
#workarea{
position: absolute;
padding: 25px;
}
</style>
</head>
<body>
<div id="source">
<p>Lorem ipsum dolor . . . mollis a ipsum.</p>
</div>
<div id="workarea">
</div>
</body>
</html>
Les points de suspension (. . .) du paragraphe Lorem ipsum signifient qu'une partie du
contenu a été omise à des fins de présentation. Dans votre document HTML, incluez
un paragraphe de texte factice comportant entre 8 et 10 lignes.
2. Enregistrez le fichier sous L6-regions-exercise.html.
3. Appliquez le style gras à quelques mots, au milieu du paragraphe environ.
4. Réenregistrez le fichier.
5. Notez que le code CSS utilise le préfixe de fournisseur -webkit- . Vous devez utiliser un
indicateur de ligne de commande pour activer les régions CSS dans le navigateur. Pour ce
faire, sélectionnez Démarrer, tapez le nom du navigateur dans la zone Rechercher, cliquez
avec le bouton droit de la souris sur le nom du navigateur dans la liste de résultats, puis
sélectionnez Propriétés. La boîte de dialogue Propriétés s'affiche. Dans le champ Cible,
positionnez le curseur à la fin du champ, entrez un espace et tapez --enable-css-regions.
6. Cliquez sur OK.
7. Ouvrez le fichier L6-regions-exercise.html dans le navigateur Web. Redimensionnez la
fenêtre du navigateur de façon à ce que le contenu s'affiche dans les conteneurs et
que le contenu en gras soit positionné dans le conteneur de gauche. Les résultats
doivent ressembler à ceux de la figure 6-7.
Figure 6-7
Enchaînement de contenu
dans des conteneurs de
régions CSS
8. Réduisez la taille de la fenêtre du navigateur pour voir l'effet du débordement du contenu.

9. Comment empêcher le débordement du contenu dans le deuxième conteneur ?
Apportez les modifications nécessaires au code CSS, réenregistrez le fichier et affichez
les résultats dans le navigateur.
Reportez-vous à la page Web « CSS Regions Module Level 3 » du W3C à l'adresse http://www.w3.org/
TR/2012/WD-css3-regions-20120823// pour obtenir les dernières informations sur l'implémentation
des régions CSS. Vous pouvez réaliser un exercice pratique à l'aide des régions CSS sur le site Web de
Microsoft à l'adresse http://bit.ly/veOZX2. Cette page peut nécessiter l'utilisation d'Internet Explorer 10
pour un rendu correct).
Utilisation des colonnes et de la césure pour optimiser la lisibilité du texte
CSS3 vous permet de créer des dispositions à plusieurs colonnes dont le fonctionnement est
similaire à celui de la fonctionnalité de colonnes de Microsoft Word. Vous pouvez également
activer la césure afin de couper correctement les mots à la fin des lignes. Ceci évite que les
longs mots sautent à la ligne suivante, laissant un espace à la fin de la ligne précédente.
Parmi les nouvelles fonctionnalités de CSS3 figurent la césure et les dispositions à plusieurs
colonnes. À l'instar des journaux, vous pouvez maintenant créer des documents HTML
comportant plusieurs colonnes qui sont redimensionnées en fonction de la taille de l'écran de
l'utilisateur. La césure permet de couper les mots entre les syllabes en fin de ligne, de façon
à créer une marge droite plus uniforme et éliminer les espaces vides dans les paragraphes.
146 | Leçon 6
CRÉATION DE COLONNES
Les propriétés CSS3 d’une disposition multicolonne permettent de créer des colonnes
en répartissant le texte sur plusieurs colonnes, de spécifier l’espace entre les colonnes
(espacement), d'afficher des lignes verticales (règles) entre les colonnes et de définir la
position des sauts de colonne.
Les principales propriétés CSS utilisées pour créer et manipuler plusieurs colonnes d'un
document HTML sont les suivantes :
• column-count : définit le nombre de colonnes que doit comporter un élément ; peut
également utiliser la propriété columns avec les valeurs de propriétés set column-
count et column-width simultanément
• column-gap : spécifie l'espacement entre les colonnes, également appelée reliure
• column-rule : crée une ligne verticale dans l'espace qui sépare les colonnes et définit la largeur,
le style (ligne simple ou double, trait, pointillés, 3D, etc.) et la couleur de la règle
La disposition multicolonne CSS3 utilise le concept de la « zone de colonnes » pour
désigner le conteneur qui renferme le contenu et l'affiche dans des colonnes. La zone de
colonnes se trouve entre la zone de contenu et le contenu dans le modèle de boîte CSS
original. (Reportez-vous à la leçon 5 si vous souhaitez passer en revue les informations se
rapportant au modèle de boîte.)
Le tableau 6-1 répertorie toutes les propriétés de colonne qui fonctionnent dans CSS3.
Tableau 6-1
Propriétés multicolonnes Propriété Valeur Description
utilisées dans CSS3
break-after auto Insère un saut de ligne après la zone de
always colonnes générée
avoid
left
right
page
column
region
avoid-page
avoid-column
avoid-region
break-before (identique à Insère un saut de ligne avant la zone de
break-after) colonnes générée
break-inside auto Insère un saut de ligne à l'intérieur de la
avoid zone de colonnes générée
avoid-page
avoid-column
avoid-region
column-count integer Définit le nombre de colonnes utilisées
auto par un élément
column-fill auto Définit comment les colonnes sont
balance remplies ; répartit le contenu de manière
uniforme entre les colonnes, si possible,
ou les remplit de manière séquentielle
(suite)
Tableau 6-1
Suite Propriété Valeur Description
column-gap length Spécifie l'espacement entre les colonnes
normal
column-rule column-rule-width Propriété abrégée qui définit les proprié-
column-rule-style tés column-rule-width, column-rule-style
column-rule-color et column-rule-color au même emplace-
transparent ment dans une feuille de style
column-rule-color color Spécifie la couleur de la règle entre les
colonnes
column-rule-style border-style Spécifie le style de la règle entre les
colonnes, par exemple ligne unie, ligne
double, pointillés et ainsi de suite
column-rule-width border-width Spécifie la largeur de la règle entre les
colonnes
column-span none Spécifie si un élément doit s'étendre sur
all aucune colonne ou toutes les colonnes
column-width length Spécifie la largeur d'une ou de plusieurs
auto colonnes
columns column-width Définit à la fois les propriétés column-
column-count width et column-count
Voyons maintenant comment fonctionne le code CSS. Le code suivant utilise la propriété

PRÊT POUR LA CERTIFICATION column-count pour créer trois colonnes en utilisant le texte du balisage HTML suivant :
Comment créer plusieurs
colonnes dans un <head>
document HTML à l'aide <style>
de CSS ? .tricolumn { column-count: 3; }
3.3 </style>
</head>
<body>
<h2>Trois colonnes</h2>
<div class="tricolumn">
Lorem ipsum . . . orci.
</div>
</body>
Dans la mesure où les colonnes CSS3 sont encore en cours de création, il conviendra

peut-être d'ajouter des préfixes de fournisseur aux noms de propriétés associés aux
colonnes. Dans le cas de cet exemple, nous avons modifié le code comme suit pour
les quatre principaux navigateurs :
<style>
.tricolumn {
-ms-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-webkit-column-count: 3;
}
</style>
148 | Leçon 6
Les résultats doivent ressembler à ceux de la figure 6-8 dans le navigateur Web de Mozilla
Firefox.
Figure 6-8
Trois colonnes
Vous pouvez créer plusieurs colonnes à l'aide de la propriété columns Cette propriété
permet de définir rapidement le nombre de colonnes et leur largeur dans une même
déclaration. Le code suivant utilise la valeur auto pour la largeur des colonnes :
.tricolumn { columns: 3 auto; }
Une autre façon d'utiliser la propriété columns consiste à affecter une valeur numérique
à column-width et à laisser la valeur column-count à auto. L'exemple suivant définit column-
width sur 15em, ce qui signifie que l'élément à plusieurs colonnes aura une largeur de
colonne de 15 ems (ou 15 fois la largeur de la taille de police du contenu de la colonne) :
columns: auto 15em;
Ajoutons maintenant une règle aux colonnes. Cette propriété définit la largeur, le style et
la couleur de la règle entre toutes les colonnes. La syntaxe utilisée pour une ligne bleue
pointillée de 3 pixels de large est la suivante :
column-rule: 3px dashed blue;
Pour contrôler la taille de l'espacement entre les colonnes, utilisez la propriété column-gap .
Cette propriété utilise une valeur entière, comme illustré ci-dessous, ou le mot clé normal.
column-gap: 3em;
L'effet combiné de trois colonnes avec une règle de colonne et un espacement de 3em est
illustré à la figure 6-9 (avec les préfixes de fournisseur appliqués). Le redimensionnement
de la fenêtre du navigateur entraîne également le redimensionnement des colonnes et la
redistribution du contenu dans celles-ci, comme illustré dans la figure 6-10.
Figure 6-9
Trois colonnes avec un
espacement et une règle
de taille supérieure
Figure 6-10
Le redimensionnement de
la fenêtre du navigateur
modifie les colonnes
Pour spécifier si un élément tel qu'un titre doit couvrir plusieurs colonnes, utilisez la
propriété column-span. Cette propriété est définie sur le nombre de colonnes sur lequel
l'élément doit s'étendre ou utilise les mots clés all ou none , selon que l'élément s'étend sur
toutes les colonnes ou ne s'étend sur aucune colonne, respectivement.
column-span: all;
Comme vous le voyez, les propriétés liées aux colonnes permettent un affichage souple du
contenu, avec un nombre minimum de déclarations CSS.
CRÉER UNE DISPOSITION MULTICOLONNE

PRÉPAREZ-VOUS. Pour créer une disposition multicolonne, procédez comme suit :
1. Dans un outil d'édition ou un outil de développement d'applications, créez un document
HTML approprié incluant le contenu suivant :
<!doctype html>
<html>
<head>
<title>Trois colonnes</title>
<style>
.tricolumn {
}
</style>
</head>
<body>
<h2>Mes trois colonnes</h2>
<div class="tricolumn">
Lorem ipsum . . . orci.
</div>
</body>
</html>
Les points de suspension (. . .) du paragraphe Lorem ipsum signifient qu'une partie du
contenu a été omise à des fins de présentation. Dans votre document HTML, incluez
un paragraphe de texte factice comportant au moins 10 lignes. Notez également
l'utilisation du préfixe de fournisseur Mozilla (-moz-). Il est possible d'inclure tous les
préfixes de fournisseur, mais nous n'en avons utilisé qu'un par souci de simplicité.
2. Enregistrez le fichier sous L6-columns-exercise.html.
3. Définissez un espacement de 2 em entre les colonnes et une règle de colonne verte de
2 px de largeur. La syntaxe utilisée pour les propriétés column-gap et column-rule est la
suivante :
.tricolumn {
-moz-column-gap: 2em;
-moz-column-rule: 2px solid green;
}
4. Réenregistrez le fichier et affichez-le dans le navigateur Web Firefox. Les résultats
doivent ressembler à ceux de la figure 6-11.
Figure 6-11
Résultats de l'exercice
comportant trois colonnes
150 | Leçon 6
5. Redimensionnez la fenêtre du navigateur pour voir l'effet sur les colonnes.

6. (Facultatif) Remplacez « Mes trois colonnes » par un titre plus long. Essayez d'étendre
le titre sur les trois colonnes.
Pour en savoir plus sur les dispositions à plusieurs colonnes, consultez la section « Multi-column regions »
de la page Web « CSS Regions Module Level 3 » à l'adresse http://bit.ly/IA03vV, ainsi que la page Web du
site W3schools.com se rapportant à la disposition multicolonne CSS3 à l'adresse http://bit.ly/KpY0Gz.
UTILISATION DE LA CÉSURE
La césure désigne le processus permettant de connecter deux mots à l’aide d’un tiret (-)
ou de couper les mots entre les syllabes en fin de ligne. La césure est particulièrement
utile pour les dispositions utilisant plusieurs colonnes, car elle permet d'éliminer les
espaces vides dans les colonnes lorsque les longs mots sautent automatiquement à la ligne
PRÊT POUR LA CERTIFICATION suivante, ce qui produit un texte d'apparence plus professionnelle. En général, la césure
Comment activer la césure automatique tente de justifier le texte sur la marge de droite.
dans un document HTML à
CSS3 inclut désormais la propriété hyphens qui contrôle la césure. La propriété utilise les
l'aide de CSS ?
3.3
valeurs none, manual, et auto:
• auto : active la césure automatique des mots, en fonction des possibilités de saut de
ligne dans les mots ou à l'aide d'une « ressource de césure spécifique à la langue »
• manual : active la césure uniquement en fonction des possibilités de saut de ligne dans les mots
• none : empêche la césure
Le W3C souligne l'obligation de déclarer une langue à l'aide des attributs HTML lang
ou XML xml:lang pour garantir une césure automatique correcte. Ceci signifie que si la
totalité de votre document HTML utilise la même langue (français, par exemple) et que
REMARQUE
* vous souhaitez activer la césure automatique, vous devez ajouter l'attribut à votre élément
Une liste des codes de
HTML ou déclaration doctype, par exemple :
langue est disponible
sur la page Web <!doctype html>
« HTML Language <html lang="fr-fr">
Code Reference » du ou
site W3schools.com à
<html xmlns="http://www.w3.org/1999/xhtml"
l'adresse http://www.
xml:lang="fr" lang="fr">
w3schools.com/tags/
ref_language_codes.asp Vous devez inclure le préfixe du fournisseur avec la propriété hyphens, par exemple -ms-
hyphens pour Internet Explorer 10, -moz-hyphens pour Firefox et ainsi de suite.
Microsoft fournit d'autres propriétés de césure spécifiques aux environnements Microsoft,

comme suit :
• -ms-hyphenate-limit-zone: spécifie la largeur de l'espace blanc de fin (appelé zone de
césure, illustré à la figure 6-12) pouvant figurer dans une ligne avant l'application
de la césure ; la valeur de la propriété est une longueur exprimée en pixels ou en
pourcentage
• -ms-hyphenate-limit-chars : spécifie le nombre minimum de caractères pouvant être coupés
dans un mot ; si le nombre de caractères est inférieur au nombre minimum, le mot n'est
pas coupé
• -ms-hyphenate-limit-lines : spécifie le nombre maximum de lignes coupées consécutives
pouvant contenir des mots coupés
Figure 6-12
Zone de césure
Le balisage suivant avec CSS inline utilise la propriété -ms-hyphens dont la valeur est
définie sur auto :
<!doctype html>
<html lang="fr-fr">
<body>
<div style="width: 200px;
border: 2px solid orange;">
<p style="-ms-hyphens: auto;

text-align: justify;
font-size: 14pt;">
Hyphenation is the process of connecting . . .
plus professionnelle.</p>
</div>
</body>
</html>
Ce balisage s'affiche dans Internet Explorer 10, comme illustré dans la figure 6-13.
Figure 6-13
Propriété -ms-hyphens rendue
dans Internet Explorer 10
152 | Leçon 6
Bien que Microsoft propose plusieurs propriétés se rapportant à la césure dans les
applications Internet Explorer 10 et Windows 8, la spécification du W3C relative à la
*
REMARQUE césure continue d'évoluer. Actuellement, les travaux du W3C portent sur les propriétés
hyphenate-character, hyphenate-limit-zone, hyphenate-limit-word, hyphenate-limit-lines, et
hyphenate-limit-last.
ACTIVER LA CÉSURE AUTOMATIQUE

PRÉPAREZ-VOUS. Pour activer la césure automatique, procédez comme suit :
1. Dans un outil d'édition ou un outil de développement d'applications, créez un document
HTML incluant le contenu suivant. Notez que nous utilisons le préfixe de fournisseur Mozilla
à titre d'exemple dans cet exercice. Remplacez le texte du paragraphe commençant par « La
césure est » par une biographie de quatre lignes sur vous-même, votre instructeur, un autre
stagiaire ou une célébrité :
<!doctype html>
<html lang="fr-fr">
<head>
<title>Exemple de césure</title>
</head>
<body>
<div style="width: 200px;
border: 2px solid orange;">
<p style="-moz-hyphens: auto;

text-align: justify;
font-size: 14pt;">
Hyphenation is . . . professionnelle.</p>
</body>
</html>
2. Enregistrez le fichier sous L6-hyphen-exercise.html et affichez-le dans le navigateur

Web Firefox.
Pour plus d'informations sur la césure, reportez-vous à la section « Hyphenation » (Césure) de la
page « CSS Text Level 3 » du W3C à l'adressehttp://www.w3.org/TR/css-text-3/#hyphens. Microsoft
fournit des informations sur les propriétés de césure spécifiques à Internet Explorer à l'adresse
http://bit.ly/IQpgj4.
Utilisation d'exclusions CSS pour créer un enchaînement autour d'un objet

flottant
Un élément flottant positionné désigne une construction CSS qui permet de positionner

des images, du texte et des boîtes n’importe où dans un document HTML, avec le texte
qui s’agence ensuite autour de ces éléments. Les éléments flottants positionnés sont
appelés exclusions CSS dans la spécification du W3C.
Vous avez peut-être remarqué que des éléments flottants ont été utilisés dans l'exercice sur
les régions précédemment dans la leçon. La valeur left a été affectée aux deux éléments
flottants, ce qui les fait apparaître côte à côte lors de l'affichage. Le positionnement était
effectué par rapport au reste du document. En outre, si vous ne spécifiez pas la hauteur ou
la largeur d'un élément flottant, celui-ci est automatiquement redimensionné pour s'adapter à
PRÊT POUR LA CERTIFICATION son contenu.
Qu'est-ce qu'un élément
flottant positionné ou une Les exclusions CSS vous permettent de contrôler avec une grande précision la position d'un
exclusion CSS ? élément flottant, à une distance spécifiée à partir du haut, du bas, du côté gauche ou droit
3.3 d'un conteneur. Vous pouvez également créer un élément flottant de n'importe quelle forme :
rectangulaire, circulaire, triangulaire et n'importe quelle forme intermédiaire. Les autres
éléments du document s'agencent simplement autour de l'exclusion.
L'exemple d'exclusions CSS illustré dans la figure 6-14 utilise une disposition à plusieurs
colonnes avec une exclusion (référencée en tant qu'élément flottant positionné sur le site
Web) au milieu. Vous pouvez déplacer la boîte n'importe où dans la disposition de l'exemple
et voir comment le texte s'enroule automatiquement autour de la boîte bleue.
Figure 6-14
Élément flottant positionné
dans une disposition
multicolonne dans
Internet Explorer 10
La figure 6-15 est un autre exemple d'exclusions dans lequel le texte entoure un cercle
au milieu d'un paragraphe. Cette image inclut une marge autour du cercle, mais le texte
pourrait épouser directement le contour du cercle.
Figure 6-15
Conteneur personnalisé sous
la forme d'un cercle
154 | Leçon 6
Le tableau 6-2 répertorie les propriétés W3C se rapportant aux exclusions CSS.
Tableau 6-2
Propriétés des exclusions CSS Propriété Valeur Description
shape-outside auto Crée la forme générale d'une exclusion
shape
url
shape-inside outside-shape Modifie le contenu d'une forme
auto
shape
uri
wrap wrap-flow Méthode abrégée permettant de définir
wrap-margin les propriétés wrap-flow, wrap-margin, et
wrap-padding wrap-padding dans une même déclaration
wrap-flow auto Spécifie comment les exclusions affectent
both le contenu inclus dans les éléments de
start niveau bloc
end
maximum
clear
wrap-margin length Spécifie un décalage pour le contenu en
dehors de l'élément
wrap-padding length Fournit une marge intérieure (décalage)
pour le contenu à l'intérieur d'un élément
wrap-through wrap Spécifie comment le contenu doit habiller
none un élément d'exclusion
Pour créer une exclusion CSS simple, utilisez la propriété wrap-flow: both pour afficher le
contenu sur tous les côtés de l'exclusion. Une autre option consiste à utiliser wrap-flow:
clear pour afficher le contenu au-dessus et au-dessous de l'exclusion, mais en laissant les
zones sur les côtés vides.
Pour déclarer une forme d’exclusion, utilisez les propriétés shape-inside et shape-outside qui
définissent le contenu et la forme générale d’une exclusion, respectivement.
Pour le moment, les exclusions CSS ne fonctionnent pas de manière fiable dans
l'ensemble des principaux navigateurs. Si vous voulez tester les exclusions CSS, utilisez
Internet Explorer 10. Pour utiliser les propriétés des exclusions CSS pour l'affichage dans
Internet Explorer 10, ajoutez le préfixe du fournisseur -ms- . Microsoft utilise également les
propriétés -ms-wrap-side et -ms-flow-wrap qui ne font pas partie de la spécification du W3C.
EXPLORER LES PROPRIÉTÉS D'EXCLUSIONS CSS

PRÉPAREZ-VOUS. Pour explorer les propriétés des exclusions CSS, procédez comme
suit :
1. À partir d'un navigateur Web, accédez à la page Web « CSS Exclusions and Shapes
Module Level 3 » du W3C, à l'adresse http://dev.w3.org/csswg/css3-exclusions/.
2. Parcourez les exemples d'exclusions CSS.
3. Dans Internet Explorer 10, copiez le code d'un exemple qui vous intéresse, créez un
document HTML approprié et testez le fichier dans Internet Explorer 10.
4. Consultez la page « Positioned Floats » du site Microsoft Internet Explorer Drive à

l'adresse http://bit.ly/lQulDB. Accédez à la page à l'aide de chacun des principaux
navigateurs. Sélectionnez chaque paramètre, un à la fois, pour vérifier les effets obtenus.
5. Fermez tous les programmes et fichiers ouverts.
Pour en savoir plus sur les exclusions CSS, reportez-vous à la page Web « CSS Exclusions and
Shapes Module Level 3 » du W3C à l'adresse http://www.w3.org/TR/css3-exclusions/. La page Web
intitulée « Exclusions » de Microsoft à l'adresse http://bit.ly/ImadRV fournit des informations sur
les exclusions CSS et sur les propriétés spécifiques à Microsoft pour les applications Windows 8 et
Internet Explorer 10.

• H istoriquement, la gestion du flux de contenu était une procédure manuelle dans les
documents HTML. Désormais, les régions et les exclusions CSS ainsi que les dispositions
à plusieurs colonnes permettent d'enchaîner le contenu de manière dynamique.
• Les régions CSS vous permettent d'enchaîner le contenu entre les différentes zones,
adjacentes ou non, d'un document HTML.
• Pour créer et manipuler des régions CSS, vous devez identifier une source de
contenu et créer des conteneurs de contenu. Ces deux tâches sont effectuées à
l'aide des propriétés CSS flow-into et flow-from.
• CSS3 vous permet de créer des documents HTML comportant plusieurs colonnes, tel
un journal, qui sont redimensionnées en fonction de la taille de l'écran de l'utilisateur.
• La césure permet de couper les mots entre les syllabes en fin de ligne, de façon à créer
une marge droite plus uniforme et éliminer les espaces vides dans les paragraphes.
• Un élément flottant positionné désigne une construction CSS qui permet de
positionner des images, du texte et des boîtes n’importe où dans un document HTML,
avec le texte qui s’agence ensuite autour de ces éléments. Les éléments flottants
positionnés sont appelés exclusions CSS dans la spécification du W3C.

1. Les représentent des zones définies d’un document HTML dans
lequel le contenu est organisé. Elles sont utilisées à la place de plusieurs colonnes
dans les dispositions complexes.
2. Les propriétés CSS3 d’une permettent de créer des colonnes en
répartissant le texte sur plusieurs colonnes, de spécifier l’espace entre les colonnes
(espacement), d'afficher des lignes verticales (règles) entre les colonnes et de définir
la position des sauts de colonne.
3. Une peut représenter un ou plusieurs blocs de texte, dans un
document HTML identique ou distinct, contenant les données à organiser à l’aide
d’une disposition de régions CSS.
4. Les font partie des régions CSS dans lesquelles le contenu est organisé.
5. La désigne le processus permettant de connecter deux mots à l’aide
d’un tiret (-) ou de couper des mots entre les syllabes en fin de ligne.
6. Une est un élément flottant positionné qui permet de positionner des
images, du texte et des boîtes n’importe où dans un document HTML, avec le texte qui
s’agence ensuite autour de ces éléments.
156 | Leçon 6
7. La propriété CSS crée un conteneur de contenu pour les régions CSS.

8. La propriété CSS identifie la source de contenu pour les régions CSS.
9. Un désigne un mini-document HTML intégré dans un document HTML.
10. La valeur de la propriété flow-into est appelée un .

1. Vous créez une source de contenu de régions CSS nommée « main ». Parmi les
syntaxes suivantes, laquelle est correcte ?
a. flow-from: main
b. flow-into: main
c. main: flow-into
d. main: flow-from
2. Vous créez un conteneur de contenu de régions CSS à associer à une source de
contenu nommée « main ». Parmi les syntaxes suivantes, laquelle est correcte ?
a. flow-from: main
b. flow-into: main
c. main: flow-into
d. main: flow-from
3. Quelles sont les options permettant de traiter le texte de débordement dans le dernier
conteneur d’une région CSS ? (Choisissez toutes les réponses applicables.)
a. Troncation
b. Continuer à déborder et être visible
c. Continuer à déborder, mais être masqué
d. Duplication
4. Quelle est la différence entre l’implémentation des régions CSS de Microsoft et la
spécification W3C ?
a. Microsoft utilise la propriété flow-into.
b. Microsoft utilise la propriété flow-from.
c. Microsoft n'utilise pas d'iframes.
d. Microsoft utilise des iframes.
5. Quelle propriété CSS3 crée des colonnes évolutives ?
a. column-count
b. add-columns
c. wrap-columns
6. Quelle propriété CSS3 crée une ligne entre les colonnes dans une disposition à
plusieurs colonnes ?
a. break-inside
b. column-fill
c. column-gap
d. column-rule
7. Parmi les propositions suivantes, laquelle n'est pas une valeur admise pour la
propriété CSS3 hyphens ?
a. none
b. lines
c. manual
d. auto
8. Parmi les propositions suivantes, laquelle permet de spécifier la largeur de l'espace

que vous pouvez laisser en fin de ligne avant la césure ?
a. -ms-hyphenate-limit-chars
b. -ms-hyphenate-limit-lines
c. -ms-hyphenate-limit-zone
9. Parmi les propositions suivantes, laquelle représente le terme précédemment utilisé
pour les exclusions CSS ?
a. éléments flottants gauche/droite
b. éléments flottants positionnés
c. changeur de forme
d. DOM
10. Quelle propriété CSS3 crée une exclusion CSS ?
a. wrap-flow
b. flow-wrapper
c. shape-wrapper
d. wrapper-shape
Vrai/Faux
V F 1. Une exclusion CSS doit être de forme rectangulaire ou circulaire.
V F 2. Vous devez déclarer une langue à l'aide des attributs HTML lang ou XML
xml:lang pour garantir une césure automatique correcte.
V F 3. Vous pouvez centrer un titre sur plusieurs colonnes à l'aide de la propriété
column-span : all.
V F 4. Pour combiner les régions CSS, vous devez utiliser des techniques de disposition CSS,
notamment les colonnes, les boîtes flexibles et les dispositions en grille.
V F 5. Dans les régions CSS, la valeur de la propriété flow-from doit correspondre à la
valeur de la propriété flow-into.

Scénario 6-1 : Enchaînement du contenu dans un bulletin d'informations
Changpu est stagiaire chez Media Malted Milk. Son responsable lui demande de créer
la mise en page d'un bulletin d'informations en utilisant HTML5 et CSS3. Le bulletin
d'informations sera consulté par les employés sur des ordinateurs, des tablettes et peut-
être des smartphones. Changpu a créé un modèle avec des sections, des articles, un titre et
un pied de page, et des encadrés. Il voudrait déplacer automatiquement certains éléments
en cas de débordement vers d'autres zones de la disposition, mais il ne sait pas comment
faire. Quel conseil lui donnez-vous ?
Scénario 6-2 : Distinction entre la source de contenu et les conteneurs

de contenu
Changpu a décidé d'opter pour les régions CSS afin de créer un flux de contenu
dynamique dans son bulletin d'informations, mais il ne comprend pas bien la différence
entre les sources de contenu et les conteneurs de contenu. Comment pouvez-vous
expliquer les deux fonctionnalités à Changpu ?
158 | Leçon 6

Scénario 6-3 : Présentation des règles de césure
Salih est un de vos amis d'université. Il crée un document HTML dont le contenu est en
arabe pour son groupe linguistique, et il voudrait appliquer la césure au document. Il a
utilisé la propriété hyphens et affiche le document dans un navigateur Web pris en charge,
mais la césure n'est pas appliquée. Y a-t-il autre chose que Salih doit effectuer dans le
document ?
Scénario 6-4 : Présentation des principes fondamentaux des exclusions CSS

Gladys, jusqu'ici membre de l'équipe de maintenance des sites Web, vient d'intégrer
l'équipe de développement d'applications et du Web. Elle commence à étudier les
exclusions CSS et vous voit passer devant son bureau. Elle s'arrête et vous demande de
l'aider à comprendre les notions de base des propriétés des exclusions CSS.
Gestion de LEÇON 7
l'interface graphique
avec CSS
Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif de l'examen MTA
Gestion de l'interface graphique Gérer l'interface graphique 3.4

avec CSS avec CSS
TERMES CLÉS
adapté au Web opacité
animation perspective
dégradé propriété border-radius
dégradé linéaire rotation
dégradé radial traduction
échelle transformation
filtre SVG transition
image clé transparence
inclinaison WOFF (Web Open Font Format)
ombre portée
L'équipe de développement de Malted Milk Media veut actualiser son site Web pour
lui donner un look plus contemporain. Ils vous ont demandé de revoir les principales
zones du site et de proposer des améliorations graphiques basées sur CSS3 qui aideront
Malted Milk à se démarquer de la concurrence.
Gestion de l'interface graphique avec CSS
Les nouvelles propriétés CSS3 permettent d'offrir facilement une interface utilisateur
L'ESSENTIEL plus graphique et plus attrayante pour les applications et les sites Web.
CSS3 vous permet de créer de superbes éléments graphiques pour les sites Web et les
applications et ainsi augmenter la satisfaction de l'expérience utilisateur. Vous pouvez
créer des effets graphiques comme des coins arrondis et des ombres portées et appliquer
des transformations 2D et 3D, comme les rotations et les mises à l'échelle. Des transitions
159
160 | leçon 7
et des animations, réalisées entièrement avec HTML et CSS3, donnent vie à du texte, des
PRÊT POUR LA
CERTIFICATION boîtes et des images statiques.
De quelle manière
pouvez-vous gérer En outre, bon nombre de propriétés CSS3 s'appliquent à des éléments de zones de dessin,
l'interface utilisateur et SVG est livré avec un ensemble complet de filtres qui produisent des effets similaires
graphique avec CSS ?
aux propriétés CSS3.
3.4
Création d'effets graphiques
CSS3 fournit la propriété border-radius pour créer des coins arrondis, la propriété box-shadow
pour créer des ombres, la propriété opacity pour créer des effets de transparence, et les
propriétés linear-gradient et radial-gradient pour créer des dégradés d'arrière-plan.
PRÊT POUR LA CSS3 vous permet d'appliquer facilement plusieurs nouveaux effets graphiques aux éléments
CERTIFICATION
Quels nouveaux effets HTML et ainsi rendre l'interface utilisateur plus attrayante. Parmi les nouveaux effets
graphiques pouvez-vous graphiques on trouve : les coins arrondis, les ombres portées, la transparence et les
créer avec CSS3 ? dégradés d'arrière-plan. Vous pouvez même appliquer certaines de ces propriétés (comme
3.4 les ombres) au texte.
CRÉATION D'ANGLES ARRONDIS

La propriété CSS3 border-radius vous permet de créer des coins arrondis autour des
éléments de mise en page, tels que les titres, les pieds de page, les barres latérales, les
boîtes graphiques et les contours autour des images. border-radius définit une longueur
qui est généralement exprimée en pixels ou en ems, mais qui peut également être en
PRÊT POUR LA pourcentage. La longueur représente le rayon du cercle qui définit l'« arrondi » de
CERTIFICATION chaque angle de la boîte. Plus le nombre est petit et moins le coin est arrondi. Certains
Quelle propriété CSS
crée des coins arrondis navigateurs ont des difficultés à rendre le pourcentage correctement, vous devez donc
autour des éléments de utiliser une longueur en pixel ou en em lorsque cela est possible.
mise en page ?
Pour créer une boîte avec une bordure arrondie, le code et le balisage CSS doivent ressembler
3.4
à ceci :
<!doctype html>
<html>
<head>
<title>Angles arrondis</title>
div {
padding: 40px 40px;
width: 400px;
color: #fff;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>
<body>
<div>Boîte avec des coins arrondis</div>
</body>
</html>
Gestion de l'interface graphique avec CSS | 161
La boîte avec des coins arrondis s'affiche dans un navigateur Web, comme illustré dans la
figure 7-1.
Figure 7-1
Boîte avec quatre angles
arrondis
Vous pouvez également arrondir un seul angle d'une boîte en utilisant les propriétés suivantes :
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
La figure 7-2 montre un exemple de chaque boîte.
Figure 7-2
Boîtes avec un coin arrondi
chacune
Si vous envisagez d'arrondir un seul angle sur plusieurs éléments dans un document
HTML, vous pouvez gagner du temps en créant une classe distincte pour chacun (coin
supérieur gauche, coin supérieur droit, coin inférieur gauche et coin inférieur droit). La
syntaxe devrait ressembler à ce qui suit :
.top-left-corner { border-top-left-radius:25px; }
La page Web de Microsoft « Exercices pratiques : Border-radius » à l'adresse

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_border-radius.htm
REMARQUE * vous permet de voir comment les modifications apportées à la longueur de la propriété
border-radius affectent les coins d'une boîte.
CRÉATION D'OMBRES
CSS3 présente la propriété box-shadow pour créer des ombres portées autour des éléments
de mise en page. Une ombre portée désigne un effet visuel dans lequel un objet est répété
en arrière-plan et déplacé légèrement au-dessous de lui-même pour créer l'illusion qu'il
flotte au-dessus de son arrière-plan.
162 | leçon 7
La syntaxe CSS pour créer une ombre est la suivante :

PRÊT POUR LA
CERTIFICATION box-shadow: h-shadow v-shadow blur spread color inset;
crée des ombres portées
autour des éléments de Les attributs h-shadow et v-shadow indiquent la position horizontale et verticale de l'ombre par
mise en page ? rapport à la boîte. Ces deux attributs sont nécessaires. La valeur h-shadow définit le décalage
3.4 horizontal de l'ombre. Une valeur positive décale l'ombre à droite de l'élément et une valeur
négative à gauche. La valeur v-shadow définit le décalage vertical de l'ombre. Une valeur
positive décale l'ombre à partir du bas de l'élément et une valeur négative à partir du haut.
Les autres attributs sont facultatifs. L'attribut blur, en pixels, indique le degré de flou
appliqué à l'ombre. L'attribut spread indique la taille de l'ombre, color spécifie la couleur de
l'ombre, et inset déplace l'ombre de l'extérieur vers l'intérieur de la boîte.
La figure 7-3 montre un exemple de la boîte aux coins arrondis avec une ombre portée.
L'ombre a été créée à partir de ces valeurs qui spécifient sa position horizontale et verticale,
son degré de flou et sa couleur :
box-shadow: 10px 10px 5px #808080;
Figure 7-3
Ombre portée appliquée
à une boîte
CSS3 fournit également la propriété text-shadow pour appliquer un ombrage au texte. Les
attributs sont les mêmes que la propriété box-shadow, sauf que spread et inset ne sont pas inclus.
CRÉER UNE BOÎTE AVEC DES COINS ARRONDIS ET UNE OMBRE

PRÉPAREZ-VOUS. Pour créer une boîte avec des coins arrondis et une ombre, effectuez
les opérations suivantes:
1. Dans un outil d'édition ou de développement d'applications, créez un document HTML
incluant le contenu suivant :
<!doctype html>
<html>
<head>
<title>Angles arrondis</title>
div {
border: 3px solid #000;
background-color: #000;
padding: 1em;
width: 300px;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
color: #fff;
famille de polices sans serif;
font-size: large;
text-align: center;
}
</style>
</head>
<body>
<div>Exemple de boîte</div>
</body>
</html>
2. Enregistrez le fichier sous le nom L7-box-exercise.html. Affichez le fichier dans un

navigateur Web, qui doit ressembler à la figure 7-4.
Figure 7-4
Boîte avec des coins arrondis
3. Pour ajouter une ombre portée, ajoutez la ligne suivante à l'élément de style :
box-shadow: 5px 5px 5px #999;
4. Enregistrez le fichier et affichez les résultats dans un navigateur Web. La boîte doit
ressembler à la figure 7-5.
Figure 7-5
Boîte avec des coins arrondis
et une ombre portée
5. Laissez le fichier, l'outil d'édition et le navigateur Web ouverts si vous envisagez

d'effectuer l'exercice suivant au cours de cette session.
APPLICATION DE LA TRANSPARENCE
Un élément opaque ne laisse pas passer la lumière, tandis que vous pouvez voir à travers
un élément transparent. Même si les termes sont opposés, si vous réduisez l'opacité d'un
élément ou si vous augmentez sa transparence, vous finissez par obtenir la même chose.
La figure 7-6 montre l'effet de transparence (ou la réduction d' opacité) sur une image.
L'image originale se trouve sur la gauche. L'image avec une transparence de 50 % appliquée
se trouve sur la droite.
Figure 7-6
Transparence appliquée
à une image
PRÊT POUR LA
CERTIFICATION La syntaxe permettant d'appliquer une transparence à une image ou un autre élément est :
vous permet d'appliquer opacity: value
de la transparence à
un élément ou à une La valeur est une valeur à virgule flottante comprise entre 0,0 (100 % transparent) et
image ?
1,0 (100 % opaque). Pour appliquer une transparence de 45 %, par exemple, vous devez
3.4 utiliser la valeur 0,55 (1,0 – 0,45).
164 | leçon 7
A JOUTER DE LA TRANSPARENCE À UNE BOÎTE

PRÉPAREZ-VOUS. Pour ajouter de la transparence à une boîte, effectuez les opérations
suivantes :
1. Ouvrez le fichier L7-box-exercise.html dans un outil de développement d'application
ou d'édition, s'il n'est pas déjà ouvert.
2. Ajoutez la ligne suivante à l'élément de style :
opacité: 0.6;
3. Enregistrez le fichier sous le nom L7-tranparency-exercise.html et affichez les résultats
dans un navigateur Web. La boîte doit ressembler à la figure 7-7.
Figure 7-7
Boîte avec des coins arrondis,
avec une ombre portée et
40 % de transparence
4. Laissez le fichier, l'outil d'édition et le navigateur Web ouverts si vous envisagez

d'effectuer l'exercice suivant au cours de cette session.
APPLICATION DE DÉGRADÉS À L'ARRIÈRE-PLAN

Un dégradé est un changement progressif de couleurs, soit dans le même ton (par exemple,
du vert foncé au vert clair), soit d'une couleur au début et d'une autre couleur à la fin (par
exemple, un fondu du bleu vers le jaune). Les développeurs utilisent couramment des dégradés
pour apporter un léger fondu dans les arrière-plans, les boutons, etc.
Les différents types (ou méthodes) de dégradés CSS3 sont les suivants :
• linear-gradient : crée un dégradé de haut en bas (ou vice-versa) ou en diagonale

• radial-gradient : un dégradé radial commence à partir d'un point central et rayonne la
couleur vers les bords d'un conteneur
• repeating-linear-gradient : crée un dégradé linéaire répétitif, qui se traduit par des bandes
droites d'un dégradé de couleurs
• repeating-radial-gradient : crée un dégradé radial répétitif qui se traduit par des bandes
circulaires d'un dégradé de couleurs
Pour appliquer un dégradé à une image HTML, utilisez la propriété background avec l'une
PRÊT POUR LA
CERTIFICATION
des méthodes de dégradés indiquées ci-dessus, avec des paramètres spécifiques à chaque
Quelle propriété CSS méthode. Les valeurs possibles pour les méthodes sont répertoriées sur la page Web de
vous permet d'ajouter un W3C « Valeurs d'images CSS et contenu remplacé, niveau de module 3 » à l'adresse :
dégradé d'arrière-plan http://dev.w3.org/csswg/css-images-3/#repeating-gradients.
à un conteneur HTML ?
Un dégradé linéaire est un dégradé horizontal, vertical ou diagonal. Pour créer un dégradé
3.4
linéaire du noir au blanc, utilisez le code CSS suivant :
background: linear-gradient(black, white);
Le dégradé par défaut va de haut en bas. Vous pouvez insérer les valeurs « top », « bottom »,
« right » ou « left » comme première valeur pour contrôler la direction du dégradé. La
figure 7-8 montre le dégradé noir et blanc qui s'étend de haut en bas.
Figure 7-8
Dégradé linéaire du noir (en
haut) vers le blanc (en bas)
Un dégradé diagonal est un type de dégradé linéaire qui s'étend d'un angle d'un conteneur en
diagonale jusqu'à un autre angle. Le code pour un dégradé diagonal qui commence dans le
coin inférieur gauche et se prolonge jusqu'au coin supérieur droit d'un conteneur est le suivant :
background: linear-gradient(45deg, white, black);
Les dégradés CSS3 prennent également en charge l'interpolation chromatique dans l'espace
de couleur alpha, qui fait partie du modèle colorimétrique RVBA (rouge, vert, bleu et canal
alpha), pour produire des transitions colorimétriques plus lisses en dégradés. (Vous avez
probablement déjà vu des dégradés où il est facile de voir la transition d'une nuance à une
autre : elles ressemblent à de fines bandes de couleur. L'interpolation chromatique dans
l'espace de couleur alpha élimine cet aspect de « bande ».) Vous pouvez spécifier plusieurs
délimitations de couleurs, avec une couleur RVBA et une position pour chacune.
Voici un exemple d'utilisation des couleurs RVBA :
linear-gradient(to right, rgba(255,255,255,0)
Un dégradé radial commence à partir d'un point central et rayonne la couleur vers les
bords d'un conteneur. Les valeurs des dégradés radiaux diffèrent légèrement des dégradés
linéaires. La syntaxe générale des dégradés radiaux est :
radial-gradient(position,size and shape,color stops);
Examinons un exemple de dégradé radial qui commence par du bleu clair (indiqué par le
code hexadécimal #99CCFF) au centre et passe à du bleu plus foncé (indiqué par #3D5266)
sur les bords. Le code pourrait ressembler à celui qui suit (qui s'affiche dans un navigateur),
tel qu'illustré dans la figure 7-9.
radial-gradient(50% 50%, 70% 70%, #99CCFF, #3D5266);
Figure 7-9
Dégradé radial
La première série de pourcentages (50 % 50 %) définit les valeurs centrales horizontales
et verticales. Dans ce cas, le dégradé commence dans le centre de l'élément. La deuxième
série de pourcentages (70 % 70 %) spécifie la taille et la forme du dégradé. Un dégradé
radial ressemble à une ellipse, les pourcentages font donc référence aux rayons. Les codes
hexadécimaux dans l'exemple sont les délimitations de couleurs. La première délimitation de
couleur est le point de départ et la deuxième délimitation de couleur est le point d'arrivée.
Vous pouvez voir la propriété background-image dans certaines sources. Elle fonctionne
REMARQUE * comme la propriété background abrégée.
APPLIQUER UN DÉGRADÉ D'ARRIÈRE-PLAN À UNE BOÎTE

PRÉPAREZ-VOUS. Pour appliquer un dégradé d'arrière-plan à une boîte, effectuez les
opérations suivantes :
1. Ouvrez le fichier L7-tranparency-exercise.html dans un outil de développement
d'application ou d'édition, s'il n'est pas déjà ouvert.
2. Ajoutez les lignes suivantes à l'élément de style :
background: linear-gradient(black, white);
background: -ms-linear-gradient(black,white);
background: -moz-linear-gradient(black,white);
background: -o-linear-gradient(black,white);
background: -webkit-linear-gradient(black,white);
166 | leçon 7
Notez l'utilisation de préfixes fournisseurs dans le code. Si vous incluez tous les principaux
préfixes fournisseurs, il y a plus de chance qu'un plus grand nombre d'utilisateurs puissent
afficher correctement votre document HTML. Comme indiqué dans la leçon 5, le fait
d'inclure les quatre préfixes fournisseurs dans votre code ne garantit pas pour autant que la
fonctionnalité CSS3 va fonctionner dans tous les navigateurs. Un navigateur qui ne prend
REMARQUE * pas une fonctionnalité en charge, ne l'affiche pas correctement, même avec un préfixe
fournisseur. Certains navigateurs offrent une prise en charge partielle d'une fonctionnalité, ce
qui peut produire des résultats mitigés. Pendant la phase de transition à CSS3, vous devez
tester votre code dans tous les principaux navigateurs avant d'utiliser une fonctionnalité
dans les documents HTML/CSS qui seront diffusés à un large public.
4. Supprimez la bordure (pas le rayon de la bordure), l'opacité et les lignes des ombres
portées de CSS.
5. Enregistrez le fichier sous le nom L7-gradient-exercise.html et affichez-le dans différents
navigateurs Web. Tous les navigateurs affichent-ils le dégradé ? La boîte doit ressembler
à la figure 7-10 dans n'importe quel navigateur qui prend en charge les dégradés linéaires.
Figure 7-10
Boîte avec un fond dégradé
appliqué
6. Fermez le fichier et les navigateurs Web, mais laissez l'outil d'édition ouvert si vous
envisagez d'effectuer l'exercice suivant au cours de cette session.
La page Web Microsoft « Explorer de nouvelles idées de conception et de mise en forme de sites
Web » à l'adresse http://bit.ly/KtYr1W fournit des liens vers des informations sur la création de
coins arrondis, d'ombres portées et bien plus encore. La page Web W3C « Couleurs CSS, niveau de
module 3 » (en anglais) à l'adresse http://www.w3.org/TR/css3-color/ fournit des spécifications pour
les propriétés de couleur et d'opacité. Vous pouvez également visiter le site Web W3schools.com et
rechercher « CSS3 » et la rubrique de votre choix.
Présentation de la typographie et du format WOFF (Web Open Font Format)
Les développeurs Web commencent à utiliser le Web Open Font Format (WOFF)
pour améliorer les interfaces utilisateur avec à peu près toutes les polices disponibles
ou des polices personnalisées. La possibilité d'utiliser n'importe quelle police est un
grand changement par rapport aux restrictions pré-WOFF quant à l'utilisation des
polices dans les documents HTML.
La typographie est l'art d'assembler différents types de caractères, historiquement à des fins
d'impression, et les polices jouent un rôle très important pour cela. Vous pouvez utiliser
les propriétés liées aux polices CSS telles que font-family, font-size, font-style, font-variant,
et font-weight pour appliquer un style aux documents HTML. Pendant des années, les
X REF développeurs Web et les développeurs d'applications se sont limités à un ensemble de
polices standard, considérées comme adaptées au Web, ce qui signifie qu'elles sont
La leçon 4 aborde généralement installées sur l'ordinateur d'un utilisateur et donc qu'elles s'affichent de
les aspects de la manière uniforme dans la majorité des navigateurs Web.
typographie associés
à CSS, comme les Les polices adaptées au Web ne fonctionnent pas dans toutes les situations. Par exemple,
polices, les familles de beaucoup d'entreprises utilisent des polices particulières pour identifier leur marque, et ces
polices ne font pas souvent partie du jeu de polices Web sécurisé. Les concepteurs et les
polices, le monospace développeurs s'efforcent de rendre les sites intéressants, plus attrayants et uniques, ce qui
et la règle @font-face. ne peut pas toujours être fait avec les polices adaptées au Web.
Pour utiliser une police non standard dans un en-tête, un titre ou un bloc de texte, les
développeurs ont dû créer du contenu dans un programme de mise en page ou de graphiques,
l'enregistrer-sous forme d'image, puis utiliser la balise <img> dans un document HTML. Cette
méthode a plusieurs inconvénients :
• Elle prend beaucoup de temps.
• Elle interfère avec l'accessibilité des lecteurs de page, les images du texte ne pouvant
pas être lues à haute voix.
• Elle réduit l'efficacité d'optimisation du référencement d'un site auprès d'un moteur de
PRÊT POUR LA recherche (SEO), car les moteurs de recherche recherchent du texte, pas des images du texte.
CERTIFICATION
Quel est le but de Les développeurs ont également utilisé des polices incorporées, qui sont des ensembles
WOFF (Web Open Font de polices chargées sur leurs serveurs. Le concepteur insère un lien vers le jeu de polices
Format) ?
dans un document HTML ou un fichier CSS, ce qui aide le navigateur à afficher les polices
correctement. Bien que les polices incorporées soient encore largement utilisées, WOFF
3.4 constitue une nouvelle technique qui est meilleure pour gérer les polices non standard.
Le Web Open Font Format (WOFF) est un moyen d'ajouter une meilleure typographie
au Web. Il permet aux développeurs Web d'utiliser des polices personnalisées (à peu près
n'importe laquelle), sans se limiter aux polices Web standard. Les fichiers WOFF sont
des polices True Type, OpenType ou Open Font Format compressées qui contiennent des
métadonnées supplémentaires.
Pour utiliser le WOFF, vous pouvez héberger des polices sur votre serveur ou utiliser
un service de police du Web. Des polices gratuites sont disponibles à partir de plusieurs
sources, comme fontsquirrel et Open Font Library. Parmi les services de police, on trouve
FontFont et FontShop, entre autres. Ils nécessitent un abonnement payant, qui vous donne
le droit d'utiliser les polices sur votre site Web pendant toute la durée de l'abonnement.
Pour utiliser une police WOFF à partir du site d'un fournisseur de polices, par exemple,
ajoutez la règle @font-face dans le fichier CSS, qui doit ressembler à ce qui suit :
<style>
@font-face {
font-family: "font-family-name";
src: url("http://website/fonts/fontfile")
}
</style>
Certaines polices WOFF fonctionnent mieux que d'autres selon le navigateur dans lequel elles
sont affichées. Par exemple, là où un navigateur Web peut parfaitement rendre une police,
un autre navigateur va afficher des polices bitmap ou avec des caractères gras inappropriés.
Avant d'acheter une police WOFF ou un package de polices, veillez à rechercher la police
sur le Web pour savoir si les autres développeurs ont rencontré des problèmes lors de son
utilisation. Certains fournisseurs de polices permettent d'obtenir un aperçu des polices
dans tous les principaux navigateurs avant de l'acheter.
La spécification WOFF se trouve sur le site Web W3C à l'adresse http://www.w3.org/TR/WOFF/. Pour
mieux comprendre WOFF, consultez la page « Polices sur le Web » (en anglais) à l'adresse http://www.
w3.org/Fonts/ et la page « Forum aux questions WOFF » (en anglais) à l'adresse http://www.w3.org/
Fonts/WOFF-FAQ.html.
Application des transformations 2D et 3D

REMARQUE
*
JavaScript ou une autre La propriété transform de CSS3 traduit, met à l'échelle, fait pivoter, incline et fait
forme de script est même tourner des éléments 2D et 3D.
requis pour afficher
le déroulement d'une En HTML5/CSS3, une propriété transform est un effet qui permet de modifier la taille, la
transformation 2D ou forme et la position d'un élément. Les transformations sont soit en 2D ou en 3D. Il s'agit
notamment de traduire (déplacer), de mettre à l'échelle, de faire pivoter, d'incliner (étirer)
3D. Sans scripts, vous et de faire tourner des éléments.
pouvez uniquement
afficher le résultat final La propriété transform de CSS permet de spécifier les différents types de transformations
d'une transformation. apportées aux éléments HTML. La propriété transform utilise plusieurs méthodes pour les
transformations en 2D et 3D, comme indiqué dans le tableau 7-1.
168 | leçon 7
Tableau 7-1
Méthodes pour la propriété Valeur Description
transform
matrix (n,n,n,n,n,n) Spécifie une transformation 2D à l'aide d'une
matrice à six valeurs
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Spécifie une transformation 3D en utilisant une
matrice 4 x 4 à 16 valeurs
Spécifie une vue en perspective d'un élément
perspective(n)
3D qui a été transformé
rotation (angle) Fait pivoter un élément en 2D
rotate3d (x,y,z,angle) Fait pivoter un élément en 3D
rotateX (angle) Fait pivoter un élément en 3D sur l'axe des abscisses
Fait pivoter un élément en 3D sur l'axe des
rotateY (angle)
ordonnées
rotateZ (angle) Fait pivoter un élément en 3D sur l'axe z
scale (x,y) Met à l'échelle un élément en 2D (largeur et hauteur)
scale3d (x,y,z) Met à l'échelle un élément en 3D (hauteur,
largeur et un vecteur arbitraire dans l'espace 3D)
Met à l'échelle un élément en 3D sur l'axe des
scaleX (x)
abscisses
Met à l'échelle un élément en 3D sur l'axe des
scaleY (y)
ordonnées
scaleZ (z) Met à échelle d'un élément en 3D le long de
l'axe z (un vecteur dans un espace 3D)
skew (x-angle,y-angle) Incline un élément en 2D, le long de l'axe des
abscisses et de l'axe des ordonnées
skewX (angle) Incline un élément en 3D sur l'axe des abscisses
skewY (angle) Incline un élément en 3D sur l'axe des ordonnées
translate (x,y) Traduit (déplace) un élément en 2D
translate3d (x,y,z) Traduit (déplace) un élément en 3D
translateX (x) Se traduit par un élément en 3D à l'aide de l'axe
des abscisses
Traduit un élément en 3D à l'aide de l'axe des
translateY (y)
ordonnées
translateZ (z) Se traduit par un élément en 3D à l'aide de l'axe
des abscisses
PRÊT POUR LA Maintenant que vous comprenez l'essence des transformations en 2D et 3D, regardons
CERTIFICATION quelques exemples précis.
Quelle propriété
CSS transforme les
éléments ?
TRANSLATION 2D
3.4 Appliquer une translation à un élément revient à le déplacer, sans le faire pivoter, l'incliner,
ni faire tourner l'image. Pour déplacer un élément, utilisez la méthode translate() de CSS et
PRÊT POUR LA indiquez les valeurs de l'axe des abscisses et de l'axe des ordonnées pour positionner l'élément
CERTIFICATION par rapport à sa position d'origine ou par défaut. La valeur de l'axe des abscisses définit
Que signifie la traduction la position gauche de l'élément et l'axe des ordonnées spécifie la position supérieure. Par
d'un élément ? exemple, le code suivant déplace l'élément de 100 pixels de la gauche et de 50 pixels du haut :
3.4 transform: translate(100px,50px);
Un exemple d'un élément traduit est illustré dans la figure 7-11.

Figure 7-11
La boîte (déplacée) traduite
apparaît dans le coin
inférieur droit
MISE À L'ÉCHELLE 2D
PRÊT POUR LA
Mettre à l'échelle un élément consiste à augmenter ou à réduire sa taille. Pour augmenter
CERTIFICATION ou réduire un élément dynamiquement, utilisez la méthode scale() dans CSS et spécifiez les
Que signifie la mise valeurs de l'axe des abscisses (largeur) et de l'axe des ordonnées (hauteur). Le code suivant, par
à l'échelle d'un élément ? exemple, permet d'obtenir un accroissement double de la largeur de l'élément par rapport à sa
3.4
taille d'origine et une augmentation quadruple de la hauteur par rapport à sa taille d'origine :
transform: scale(2,4);
La figure 7-12 contient un exemple d'un élément mis à l'échelle.
Figure 7-12
La boîte mise à l'échelle est
deux fois plus large et quatre
fois plus grande que la boîte
d'origine
TRADUIRE ET MET TRE À L'ÉCHELLE UNE FORME 2D

PRÉPAREZ-VOUS. Pour traduire et mettre à l'échelle une forme 2D, effectuez les opérations
suivantes :
<!doctype html>
<html>
<head>
<title></title>
div
{
padding: 20px 20px;
background: tomato;
width: 150px;
height: 75px;
color: #fff;
font-size: x-large;
}
</style>
</head>
170 | leçon 7
<body>
<div>Cet élément peut se déplacer</div>
</body>
2. Enregistrez le fichier sous le nom L7-translate-exercise.html et affichez-le dans au
moins deux navigateurs Web différents. La boîte devrait apparaître dans le coin
supérieur gauche des fenêtres du navigateur.
3. Ajoutez les lignes suivantes à l'élément de style :
transform: translate(200px,100px);
-ms-transform: translate(200px,100px);
-moz-transform: translate(200px,100px);
-o-transform: translate(200px,100px);
-webkit-transform: translate(200px,100px);
4. Enregistrez le fichier et affichez-le dans les mêmes navigateurs Web. La boîte doit
avoir été déplacée du bas vers la droite.
5. Pour redimensionner la boîte afin qu'elle soit deux fois plus large et deux fois aussi
grande que celle d'origine, ajoutez scale(2,2) aux lignes de transformation, comme suit :
transform: translate(200px,100px) scale(2,2);
-ms-transform: translate(200px,100px) scale(2,2);
-moz-transform: translate(200px,100px) scale(2,2);
-o-transform: translate(200px,100px) scale(2,2);
-webkit-transform: translate(200px,100px) scale(2,2);
6. Remplacez le texte div par Cet élément peut être mis à l'échelle.
7. Enregistrez le fichier sous le nom L7-scale-exercise.html et affichez-le dans les navigateurs
Web. L'affichage doit ressembler à la figure 7-13.
Figure 7-13
La boîte a été déplacée et
est deux fois plus grande que
celle d'origine
8. Fermez le fichier, mais laissez l'outil d'édition et les navigateurs Web ouverts si vous
ROTATION 2D ET 3D
La rotation d'un élément consiste à lui appliquer un certain nombre de degrés dans le
sens des aiguilles d'une montre. Pour faire pivoter un élément, utilisez la méthode rotate()
dans CSS et spécifiez les degrés de rotation.
Par exemple, le code suivant fait pivoter un élément de 30 degrés dans le plan 2D :
transform: rotate(30deg);
La figure 7-14 contient un exemple d'un élément 2D pivoté.

Figure 7-14
Image originale et image
2D pivotée
PRÊT POUR LA
CERTIFICATION La rotation 3D utilise les méthodes rotateX() et rotateY() . Avec rotateX(), l'élément pivote
Quelle méthode de autour de l'axe des abscisses et avec rotateY() l'élément pivote autour de l'axe des ordonnées.
transformation fait
pivoter un élément en Le code suivant fait pivoter un élément à 180 degrés. Si l'élément contient du texte, le
3D autour de l'axe des
abscisses ? texte semble à l'envers après la rotation, comme illustré dans la figure 7-15. N'oubliez pas,
pour voir l'effet 3D, JavaScript ou une autre forme de script est requis. Le contenu de la
3.4
figure 7-15 est le résultat final de la rotation.
transform: rotateX(180deg);
Figure 7-15
3D pivotée sur l'axe des
abscisses
L'utilisation de la méthode rotateY(180deg) avec un élément qui affiche du texte fait

apparaître ce texte à l'envers, comme illustré dans la figure 7-16.
Figure 7-16
3D pivotée sur l'axe des
ordonnées
172 | leçon 7
INCLINAISON 2D ET 3D
Incliner un élément consiste à l'étirer dans une ou plusieurs directions. Pour incliner un
élément avec CSS, utilisez la méthode skew() et spécifiez les valeurs de l'axe des abscisses
et de l'axe des ordonnées, en degrés, pour créer une forme angulaire. Par exemple, le code
suivant fait pivoter un élément de 20 degrés autour de l'axe des abscisses et de 30 degrés
autour de l'axe des ordonnées :
transform: skew(20deg,30deg);
La figure 7-17 contient un exemple d'un élément incliné.

Figure 7-17
Élément incliné
PRÊT POUR LA
CERTIFICATION
Quelle méthode de L'inclinaison 3D utilise les méthodes skewX() et skewY() pour incliner un élément le long de
transformation permet l'axe des abscisses et de l'axe des ordonnées, respectivement. À titre d'exemple, le code
d'incliner un élément
en 3D autour de l'axe suivant incline un élément de 45 degrés, comme illustré dans la figure 7-18.
des ordonnées ?
transform: skewX(45deg);
3.4
Figure 7-18
Inclinaison en 3D autour de
l'axe des abscisses
FAIRE PIVOTER ET INCLINER UNE FORME 2D

PRÉPAREZ-VOUS. Pour faire pivoter et incliner une forme 2D, effectuez les opérations
suivantes :
1. Ouvrez le fichier L7-scale-exercise.html dans un outil de développement d'application
ou d'édition, s'il n'est pas déjà ouvert.
2. Modifiez les lignes de transformation afin de remplacer l'échelle par une rotation de
30 degrés, comme suit :
transform: translate(200px,100px) rotate(30deg);
-ms-transform: translate(200px,100px) rotate(30deg);
-moz-transform: translate(200px,100px) rotate(30deg);
-o-transform: translate(200px,100px) rotate(30deg);
-webkit-transform: translate(200px,100px) rotate(30deg);
3. Remplacez le texte div par Cet élément est pivoté.

4. Enregistrez le fichier sous le nom L7-rotate-exercise.html et affichez-le dans les

navigateurs Web. La boîte et le texte ont-ils pivoté comme illustré dans la figure 7-19 ?
Figure 7-19
Boîte pivotée à un angle de
30 degrés
5. Pour incliner la boîte de 45 degrés, remplacez rotate par skew dans les lignes de
transformation, comme suit :
transform: translate(200px,100px) skew(45deg);
-ms-transform: translate(200px,100px) skew(45deg);
-moz-transform: translate(200px,100px) skew(45deg);
-o-transform: translate(200px,100px) skew(45deg);
-webkit-transform: translate(200px,100px) skew(45deg);
6. Remplacez le texte div par Cet élément est incliné.

7. Enregistrez le fichier sous le nom L7-skew-exercise.html et affichez-le dans les navigateurs
Web. L'affichage doit ressembler à la figure 7-20.
Figure 7-20
Boîte inclinée à un angle de
45 degrés
8. Fermez le fichier, mais laissez l'outil d'édition et les navigateurs Web ouverts si vous
PRÉSENTATION DE LA PERSPECTIVE 3D, DES TRANSITIONS ET DES ANIMATIONS

La perspective, en termes de dessins et d'illustrations, est la convergence de lignes qui
PRÊT POUR LA
CERTIFICATION
donne l'illusion de la profondeur. La propriété perspective 3D de CSS3 définit le rendu de
Quel est le but de la la profondeur d'un élément 3D transformé dans un navigateur. des valeurs inférieures (entre
propriété perspective 1 et 1 000) créent un effet plus prononcé qu'avec des valeurs plus élevées. Il est important de
3D de CSS3 ? se rappeler que la perspective s'applique uniquement aux éléments 3D transformés.
3.4 La syntaxe générale pour la perspective est :
perspective: number;
Voici un exemple de perspective avec une rotation 3D appliquée :

perspective: 600; margin: 100px 0 0 50px;
transform: rotate3d(0, 1, 1, 45deg);
Voici un exemple de balisage complet, il est illustré dans la figure 7-21 à l'aide d'un navigateur
pris en charge par webkit.
<!doctype html>
<html>
<head>
div
{
padding: 40px 40px;
background: #B8860B;
width: 150px;
174 | leçon 7
color: #fff;
}
div#div2
{
margin: 100px;
perspective: 600; margin: 100px 0 0 50px;
-ms-perspective: 600; margin: 100px 0 0 50px;
-moz-perspective: 600; margin: 100px 0 0 50px;
-o-perspective: 600; margin: 100px 0 0 50px;
-webkit-perspective: 600; margin: 100px 0 0 50px;
transform: rotate3d(0, 1, 1, 45deg);

-ms-transform: rotate3d(0, 1, 1, 45deg);
-moz-transform: rotate3d(0, 1, 1, 45deg);
-o-transform: rotate3d(0, 1, 1, 45deg);
-webkit-transform: rotate3d(0, 1, 1, 45deg);
}
</style>
</head>
<body>
<div>Élément d'origine</div>
<div id="div2">Élément transformé</div>
</body>
</html>
Figure 7-21
Perspective appliquée avec
une rotation de 45 degrés
Maintenant, concentrons-nous sur les transitions et les animations. Une transition est le
passage d'un état à un autre. Avec CSS, une transition est le changement de style d'un élément.
Un dégradé est comparable à un type de transition, en effet la couleur d'arrière-plan d'un
conteneur passe d'une couleur à une autre. Toutefois, un dégradé est à proprement parler
un élément statique : il est présent ou non. En CSS3, l'action d'une transition est visible.
Les changements s'affichent à l'écran de façon animée comme s'ils étaient alimentés par
un script, mais aucun script n'est impliqué.
La propriété transition vous permet de créer une transition CSS3. Vous devez au minimum
PRÊT POUR LA
CERTIFICATION spécifier que la propriété CSS soit prise en compte pendant la période de transition.
Qu'est-ce qu'une Il peut s'agir de la position, de la taille, de la couleur, de la couleur d'arrière-plan, de
transition ? l'interlettrage, de la rotation, etc. d'un élément. La plupart des transitions spécifient
3.4 également la longueur (durée) de la transition. Si la valeur de durée n'est pas définie,
la valeur par défaut est de 0. Vous devez spécifier des transitions CSS3 en utilisant les
propriétés décrites dans le tableau 7-2.
Tableau 7-2
Propriétés de transition CSS3 Propriété Description
Est la façon abrégée de spécifier des paramètres pour
transition
transition-property, transition-delay, transition-duration et
transition-timing-function à la fois
Spécifie les propriétés CSS qui devront faire l'objet d'une

transition-property
transition
Spécifie la durée qui s'écoule après les changements de
transition-delay
valeur et avant le début de la transition (en secondes ou
millisecondes)
Spécifie la durée de la transition en secondes ou en
transition-duration
millisecondes. Commence après la propriété transition-delay
Spécifie la courbe de vitesse de l'effet de transition. Permet
transition-timing-function
à une transition de modifier la vitesse par rapport à la durée
Valeur par défaut = ease, elle augmente la vitesse de
l'animation, puis la ralentit vers la fin
Voici un exemple d'une transition simple qui affiche du texte dans une boîte. Lorsqu'un
utilisateur passe le pointeur de la souris sur la boîte, le texte est modifié. La figure 7-22
montre la boîte avant et après l'opération.
#wrapper { transition-property: opacity;
transition-duration: 3s;
transition-delay: 1s;
transition-timing-function: linear; }
#wrapper #before, #wrapper:hover #after {
opacité: 1; }
#wrapper:hover #before, #wrapper #after {
opacité: 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="before">Maintenant tu me vois</div>
<div id="after">Maintenant tu ne me vois plus</div>
</div>
</body>
Figure 7-22
Cette transition simple
masque le texte et affiche
le nouveau texte lorsque le
pointeur de la souris passe
dessus
176 | leçon 7
CRÉER UNE TRANSITION À L'AIDE DE CSS

PRÉPAREZ-VOUS. Pour créer une transition à l'aide de CSS, effectuez les opérations suivantes :
<!doctype html>
<html>
<head>
<title>Exemple de transition et d'opacité</title>
#wrapper {
padding: 40px 40px;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
color: #fff;
}
#wrapper #front, #wrapper:hover #back {

opacité:1;
-ms-opacity: 1;
-moz-opacity: 1;
-o-opacity: 1;
-webkit-opacity: 1;
transition-property: opacity;
-ms-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
transition-duration: 1s;
-ms-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-timing-function: linear;
-ms-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
#wrapper:hover #front, #wrapper #back {

opacité: 0;
-ms-opacity: 0;
-moz-opacity: 0;
-o-opacity: 0;
-webkit-opacity: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="front">Knock knock</div>
<div id="back">Qui est là ?</div>
</div>
</body>
</html>
2. Enregistrez le fichier sous le nom L7-transition-exercise.html. Ouvrez le fichier dans

chacun des principaux navigateurs Web. Passez le pointeur de votre souris sur la boîte
dans chaque navigateur. L'affichage doit ressembler à la figure 7-23.
Figure 7-23
Transition simple
3. Pour ajouter un délai supplémentaire, entrez ce qui suit après les lignes de la propriété
transition-duration :
transition-delay: 1s;
-ms-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-webkit-transition-delay: 1s;
4. Enregistrez le fichier sous le nom L7-transition-delay-exercise.html. Ouvrez le fichier

dans chaque navigateur Web et passez le pointeur de votre souris sur la boîte. Avez-vous
remarqué le décalage ?
Une animation représente l'affichage d'une séquence d'images statiques à un rythme

assez rapide pour créer l'illusion d'un mouvement. Comme les transitions, les animations
affectent les transformations et les propriétés CSS, et vous pouvez également spécifier les
minutages. La différence réside dans le fait que les animations utilisent des images clés,
une construction qui vous permet de modifier les valeurs n'importe où dans l'animation.
Vous pouvez également mettre en pause, reprendre et inverser les animations.
Pour créer une animation, commencez par spécifier un style CSS dans la règle @keyframes.
PRÊT POUR LA Par exemple, une règle pour une disparition en fondu pourrait ressembler à ce qui suit :
CERTIFICATION
Qu'est-ce qu'une
image-clé ? @keyframes fadeout {
3.4 from { opacity: 1; }
to { opacity: 0; }
}
Spécifiez ensuite les propriétés de l'animation. Plusieurs des propriétés utilisées dans les
animations sont semblables aux transitions. Les propriétés de l'animation sont décrites
dans le tableau 7-3.
178 | leçon 7
Tableau 7-3
Propriétés d'animation Propriété Valeur par défaut Description
de CSS3
@keyframes Crée l'animation
Est une façon abrégée de spécifier

animation
toutes les propriétés de l'animation
à la fois (diffère de la propriété
animation-play-state)
Spécifie le nom de l'animation
animation-name
@keyframes
Spécifie la durée d'une animation ;

animation-duration 0
en secondes ou en millisecondes
animation-timing-function ease Spécifie la manière dont l'animation
progresse au cours d'un cycle
animation-delay 0 Spécifie le démarrage de l'animation
Spécifie le nombre de cycles d'une
animation-iteration-count 1
animation
Spécifie les valeurs appliquées par
animation-fill-mode none
l'animation en dehors du moment de
son exécution
Spécifie si l'animation repart en arrière
animation-direction normal
sur d'autres cycles
animation-play-state Spécifie l'état de l'animation. Les valeurs
en cours d'exécution
sont en cours d'exécution ou suspendu
Ce qui suit est un extrait de code qui configure les propriétés d'animation pour une
disparition en fondu :
div { animation-duration: 3s;
X REF animation-delay: 0s;
animation-timing-function: ease; }
La leçon 9 vous montre div:hover { animation-name: fadeout; }
comment créer une
animation à l'aide de Cette disparition en fondu commence dès que l'utilisateur place le pointeur de la souris
JavaScript. sur un élément div, elle dure pendant trois secondes et utilise et facilite la fonction de
chronométrage.
CRÉER UNE ANIMATION EN UTILISANT CSS

PRÉPAREZ-VOUS. Pour créer une animation à l'aide de CSS, effectuez les opérations
suivantes :
div { width: 200px;
height: 200px;
background: limegreen;
animation: a1 3s; }
@keyframes a1 { from {background: limegreen;}
to {background: dodgerblue;} }
</style>
</head>
<body>
<div></div>
</body>
2. Enregistrez le fichier sous le nom L7-animation-exercise.html. Ouvrez le fichier dans

chacun des principaux navigateurs Web. L'animation se compose d'une boîte
rectangulaire qui passe du vert au bleu, puis du bleu au vert. L'animation s'est-elle
produite dans l'ensemble des navigateurs Web ? Notez quels navigateurs Web prennent
en charge l'animation.
3. Remplacez la ligne d'animation de la section div de CSS par ce qui suit :
animation-name: a1;
animation-duration: 4s;
animation-delay: 2s;
4. Enregistrez le fichier sous le nom L7-animation-mod-exercise.html. Ouvrez le fichier

dans les navigateurs Web dans lesquels l'animation se trouvait à l'origine. Avez-vous
remarqué le décalage ?
Application d'effets de filtre SVG
Les filtres SVG sont un moyen d'appliquer un style aux graphiques SVG. La longue
liste de filtres va du filtre feBlend, qui combine des images, au filtre feOffset, qui
déplace une image par rapport à sa position actuelle, à plusieurs filtres qui affectent
la façon dont l'éclairage est calculé sur une figure.
La leçon 2 présente le langage SVG (Scalable Vector Graphics) qui permet de décrire des
graphiques 2D en langage XML (Extensible Markup Language). Vous avez vu quelques
exemples de création d'images vectorielles simples à l'aide de SVG et appris qu'elles
s'affichent bien, qu'elles soient visionnées sur de petits ou de grands écrans.
PRÊT POUR LA
CERTIFICATION Cette section examine les effets des filtres que vous pouvez appliquer aux graphiques
Quel est le but d'un SVG. Un filtre SVG est une série d'opérations qui utilisent CSS pour appliquer un style
filtre SVG ?
à un graphique SVG ou le modifier. Le graphique amélioré s'affiche dans un navigateur,
3.4
tandis que le graphique original se retrouve isolé. Les filtres disponibles dans SVG sont :
• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset
180 | leçon 7
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpecularLighting
• feSpotLight
Beaucoup de noms de filtre sont assez intuitifs. Par exemple, le filtre feBlend combine
des images, les filtres feColorMatrix transforment les couleurs, le filtre feOffset déplace une
image par rapport à sa position actuelle, et le dernier filtre de la liste concerne l'éclairage.
Vous devez utiliser l'élément filter pour définir les filtres SVG. Vous devez inclure
l'attribut id pour nommer le filtre. Par exemple, le code suivant est un exemple de filtre
feGaussianBlur, dont les résultats sont présentés dans la figure 7-24 :
Figure 7-24
Effet de flou gaussien appliqué
à un graphique SVG
<body>
<svg>
<defs>
<filter id="a1" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="20" />
</filter>
</defs>
<rect width="150" height="150" stroke="plum"
stroke-width="3" fill="plum" filter="url(#a1)" />
</svg>
</body>
L'attribut id dans l'élément filter spécifie le nom du filtre. L'élément feGaussianBlur spécifie
l'effet de flou. L'attribut in="SourceGraphic "figure dans cet élément, il indique qu'un effet de
flou sera appliqué à l'élément entier et l'attribut stdDeviation spécifie le degré de flou. Le
rectangle qui est créé est lié au filtre via l'attribut filter="url(#a1)" de l'élément rect.
Dans un autre exemple, le filtre suivant feOffset crée une ombre portée sous un rectangle.
Une ombre s'ajuste à « l'action » du filtre décalage car une ombre est simplement une
boîte qui a été déplacée vers le bas, à droite de l'image source. Les attributs dx et dy
spécifient la quantité d'espace pour déplacer l'image le long de l'axe des abscisses et de
l'axe des ordonnées, respectivement. L'image rendue est indiquée dans la figure 7-25.
Figure 7-25
Filtre de décalage appliqué
à un graphique SVG
<body>
<svg>
<defs>
<filter id="i1" x="0" y="0">
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="150" height="150" fill="grey"
filter="url(#i1)" />
<rect width="150" height="150" fill="plum" />
</svg>
</body>
APPLIQUER UN DÉCALAGE ET FLOU GAUSSIEN À UN DESSIN SVG

PRÉPAREZ-VOUS. Pour appliquer un décalage et flou gaussien à un dessin SVG, effectuez
les opérations suivantes :
avec le contenu suivant :
<!doctype html>
<html>
<head>
<title>Exemple de décalage et de flou gaussien dans SVG</title>
</head>
</style>
<body>
<svg>
<defs>
<filter id="i1" x="0" y="0">
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="150" height="150" fill="grey"
filter="url(#i1)" />
<rect width="150" height="150" fill="springgreen"
/>
</svg>
</body>
</html>
182 | leçon 7
2. Enregistrez le fichier sous le nom L7-SVGoffset-exercise.html. Ouvrez le fichier dans

tous les principaux navigateurs Web. Les résultats doivent ressembler à ceux de la
figure 7-26. L'image s'affiche-t-elle avec un décalage dans tous les navigateurs Web ?
Notez les navigateurs Web qui ne prennent pas en charge le décalage.
Figure 7-26
Graphique SVG avec une
ombre portée
3. Ajoutez la ligne suivante dans l'élément filter pour appliquer l'effet de flou gaussien :
<feGaussianBlur stdDeviation="5" />
4. Enregistrez le fichier sous le nom L7-SVGgblur-exercise.html et affichez-le dans les

navigateurs Web qui prennent en charge la fonctionnalité de décalage SVG. Les résultats
doivent se présenter comme ceux de la figure 7-27.
Figure 7-27
Graphique SVG avec une
ombre portée et un flou
gaussien appliqués au
décalage
Utilisation de la zone de dessin pour améliorer l'interface graphique
Vous pouvez utiliser les propriétés CSS pour ajouter de la couleur et des dégradés, pour
appliquer des transformations et des animations et apporter d'autres améliorations
à l'objet canvas.
Dans la leçon 2 vous avez non seulement découvert SVG, mais également l'élément
PRÊT POUR LA canvas. Vous pouvez utiliser cet élément pour tracer des formes composées de pixels. Bien
CERTIFICATION que l'élément canvas accepte uniquement deux attributs : height et width, vous pouvez
Comment pouvez-vous utiliser la plupart des propriétés CSS pour appliquer un style à l'élément canvas, ajouter
utiliser l'élément canvas de la couleur, des dégradés, des motifs de remplissage, une transformation, une animation,
pour améliorer l'interface etc. Cette section vous présente certains des effets stylistiques que vous pouvez appliquer
utilisateur graphique ? à des dessins créés à l'aide de l'élément canvas afin d'améliorer l'interface utilisateur
3.4 graphique (GUI).
Le code suivant permet de créer une zone de dessin basique :

<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(10, 20, 200, 100);
}
</script>
<body onload = "f1();">

<canvas id="smlRectangle" height='300' width='500'>
</canvas>
</body>
Cet exemple utilise déjà l'attribut fillStyle pour l'objet getContext("2d"). Nous allons changer
la couleur et appliquer un dégradé avec du corail comme couleur de départ et du kaki
comme couleur de fin. Remplacez la ligne fillStyle par ce qui suit et vous obtiendrez un
contenu semblable à celui de la figure 7-28 :
var grd=context.createLinearGradient(0,0,150,0);
grd.addColorStop(0.3,"corail");
grd.addColorStop(0.7,"kaki");
context.fillStyle=grd ;
Figure 7-28
Objet canvas avec un
dégradé appliqué
Pour faire pivoter la zone de dessin, utilisez la formule degrees*Math.PI/180. Vous devez
également ajouter la rotation avant que le rectangle soit généré. Donc, pour faire pivoter
notre zone de dessin de 20 degrés, ajoutez la ligne suivante avant la ligne context-fillRect :
context.rotate(20*Math. PI/180);
Le résultat est illustré dans la figure 7-29. Vous pouvez également traduire (déplacer), mettre
à l'échelle et incliner un objet de la même façon que vous apportez des transformations
à des éléments HTML.
Figure 7-29
Objet canvas pivoté
à 20 degrés
Enfin, nous allons voir comment générer du texte à l'aide de la zone de dessin (voir la
figure 7-30). Utilisez les méthodes fillText et font :
<body>
<canvas id="myText" width="400" height="250" style="border:3px solid #0000FF;">
</canvas>
184 | leçon 7
<script type = "text/javascript">

var canvas = document.getElementById("myText");
context.font = "30px Arial";
context.fillText("Texte généré par la zone de dessin", 40, 120);
</script>
</body>
Figure 7-30
Texte généré par l'élément
canvas entouré par une
bordure
La méthode fillText crée un texte de couleur unie (noir par défaut), vous pouvez remplacer
fillText par strokeText pour créer des lettres avec une bordure (lettres sans remplissage).
AMÉLIORER UN OBJET DE ZONE DE DESSIN

PRÉPAREZ-VOUS. Pour améliorer un objet de zone de dessin, effectuez les opérations
suivantes :
<!doctype html>
<html>
<head>
<title>Exercice de zone de dessin</title>
<script>
function f1() {
var canvas =
document.getElementById("smlRectangle");
context.fillStyle = "coral";
context.fillRect(10, 20, 200, 100);
}
</script>
</head>
<body onload = "f1();">
<canvas id="smlRectangle" height='300' width='500'>
</canvas>
</body>
</html>
2. Enregistrez le fichier sous le nom L7-canvas-exercise.html. Ouvrez le fichier dans un

navigateur Web et vérifiez qu'il y a bien un rectangle de couleur corail.
3. Remplacez la couleur unie par un dégradé qui débute par du bleu clair et se termine
par du bleu foncé. Pour ce faire, remplacez la ligne fillStyle par ce qui suit :
var grd = context.createLinearGradient(0, 0, 150, 0);
grd.addColorStop(0.3, "lightblue");
grd.addColorStop(0.7, "darkblue");
context.fillStyle = grd;
4. Mettez le rectangle à l'échelle afin qu'il soit cinq fois plus large et cinq fois plus grand que
le rectangle original. Pour ce faire, ajoutez le code suivant après la nouvelle ligne fillStyle :
context.scale(5,5);
5. Réenregistrez le fichier et affichez-le dans un navigateur Web. Les résultats doivent
ressembler à ceux de la figure 7-31.
Figure 7-31
Rectangle tracé à l'aide de
l'élément canvas avec un
dégradé et redimensionné
pour être cinq fois plus grand
que l'original
6. Fermez tous les fichiers et toutes les applications.

• Parmi les nouveaux effets graphiques que vous pouvez facilement réaliser avec
CSS3, il y a notamment les coins arrondis, les ombres portées, la transparence et les
dégradés d'arrière-plan.
• La propriété border-radius crée des coins arrondis, la propriété box-shadow crée des
ombres portées, la propriété opacity crée des effets de transparence, et la propriété
background (avec l'un des quatre attributs de dégradés) crée des dégradés linéaires
et radiaux.
• Le Web Open Font Format (WOFF) est un moyen d'ajouter une meilleure typographie
au Web. Le WOFF permet aux développeurs Web d'utiliser des polices personnalisées
(à peu près n'importe quelle police), sans se limiter aux polices Web standard.
• Les fichiers WOFF sont des polices True Type, OpenType ou Open Font Format
compressées qui contiennent des métadonnées supplémentaires.
• La propriété transform de CSS3 traduit, met à l'échelle, fait pivoter, incline et fait
même tourner des éléments 2D et 3D.
• La perspective, en termes de dessins et d'illustrations, est la convergence de lignes
qui donne l'illusion de la profondeur.
186 | leçon 7
• Une transition est le passage d'un état à un autre. Avec CSS, une transition est le
changement de style d'un élément.
• Une animation représente l'affichage d'une séquence d'images statiques à un
rythme assez rapide pour créer l'illusion d'un mouvement.
• Un filtre SVG est une série d'opérations qui utilisent CSS pour appliquer un style à un
graphique SVG ou le modifier. Le graphique amélioré s'affiche dans un navigateur,
tandis que le graphique original se retrouve isolé.
• Bien que l'élément canvas accepte uniquement deux attributs : height et width,
vous pouvez utiliser la plupart des propriétés CSS pour appliquer un style à l'élément
canvas, ajouter de la couleur, des dégradés, des motifs de remplissage, une
transformation, une animation, etc.

1. Un est un changement de couleurs en douceur, dans le même ton ou
qui commence par une couleur et se termine par une autre couleur.
2. un élément consiste à augmenter ou à réduire sa taille.
3. Une désigne un effet visuel dans lequel un objet est répété en
arrière-plan et déplacé légèrement au-dessous de lui-même pour créer l'illusion que
l'objet flotte au-dessus de son arrière-plan.
4. Une désigne le passage d'un état à un autre ; avec CSS, une
transition est le changement de style d'un élément.
5. Le permet aux développeurs Web d'utiliser des polices
personnalisées (à peu près n'importe quelle police), sans se limiter aux polices Web standard.
6. La propriété CSS3 permet de créer des coins arrondis autour des
éléments de mise en page, tels que les titres, les pieds de page, les encadrés, les boîtes
graphiques et les contours autour des images.
7. La est l'opacité réduite.
8. Appliquer une à un élément revient à le déplacer, sans le faire pivoter,
l'incliner, ni faire tourner l'image.
9. En HTML5/CSS3, une est un effet qui permet de modifier la taille,
la forme et la position d'un élément.
10. Un SVG est une série d'opérations qui utilisent CSS pour appliquer
un style à un graphique SVG ou le modifier.

1. Parmi les propriétés suivantes, laquelle permet de créer un dégradé de haut en bas, de
gauche à droite ou en diagonale, sans répéter les couleurs ?
a. linear-gradient
b. dégradé radial
c. repeating-linear-gradient
d. repeating-radial-gradient
2. Parmi les propositions suivantes, laquelle n'est pas correcte au sujet de la propriété
border-radius ?
a. Elle crée des angles arrondis autour des éléments de mise en page.
b. Elle peut être exprimée en pixels.
c. Elle peut être exprimée en pourcentage.
d. Elle peut animer un objet.
3. Pour appliquer une transparence de 60 % à un élément ou à une image, quelle propriété
devez-vous utiliser ?
a. opacité: 40
b. opacité: 0.4
c. transparence: 40
d. transparence: 0.4
4. Parmi les propositions suivantes, laquelle présente des inconvénients pour les polices
Web ? (Choisissez toutes les réponses applicables.)
a. Elles doivent être chargées sur un serveur Web.
b. Elles sont limitées en nombre et en variété.
c. Elles rendent plus difficile la reconnaissance de la marque sur le Web.
d. Elles sont chères.
5. Parmi les propositions suivantes, laquelle est associée aux images clés ?
a. Angles arrondis
b. Transitions
c. Animations
6. Que devez-vous spécifier pour créer une transition ?
a. Un départ différé
b. La propriété CSS à appliquer au cours de la transition
c. La fonction de minutage de la transition
d. L'image clé
7. Quel est l'avantage principal lié à l'utilisation de l'interpolation chromatique dans
l'espace de couleur alpha ?
a. Elle produit des transitions colorimétriques plus lisses en dégradés.
b. Elle permet d'ajouter de la couleur aux dessins SVG.
c. a et b
d. Ni a ni b
8. Parmi les propriétés suivantes, laquelle devez-vous utiliser pour ajouter de la couleur
au texte de l'élément canvas ?
a. fillStyle
b. strokeStyle
c. textColor
d. strokeColor
9. Quels sont les deux états de lecture d'une animation ?
a. démarré
b. en cours d'exécution
c. suspendu
d. reprise
10. Parmi les lignes de code suivantes, laquelle contrôle le degré de flou ?
<defs>
<filter id="a1" x="0" y="0">
<feGaussianBlur in="SourceGraphic"
stdDeviation="20" />
</filter>
</defs>
a. FeGaussianBlur
b. SourceGraphic
c. StdDeviation
188 | leçon 7
Vrai/Faux
V F 1. Un élément opaque ne laisse pas passer la lumière, tandis que vous pouvez voir
à travers un élément transparent.
V F 2. Avec CSS, pour faire pivoter un élément, appliquez-lui un certain nombre de
degrés dans le sens contraire des aiguilles d'une montre.
V F 3. Une animation représente l'affichage d'une séquence d'images statiques à un
rythme assez rapide pour créer l'illusion d'un mouvement.
V F 4. Un dégradé radial commence à partir d'un point central et rayonne la couleur
vers les bords d'un conteneur.
V F 5. La perspective, en termes de dessins et d'illustrations, est la convergence de
lignes qui donne l'illusion de la profondeur.

Scénario 7-1 : Dépannage du code CSS3
Ali est passionné par les voitures anciennes et restaure de vieilles voitures pour les
revendre et réaliser un profit. Il publie des photos et des descriptions sur son site Web
qu'il gère lui-même. Ali a recours autant que possible à HTML5 et CSS3. Il a essayé
d'appliquer les transformations de translation et de mise à l'échelle à une image 2D sur son
site, mais aucune transformation ne fonctionne. Voici le code qu'il utilise :
<style>
img { transform: translate(100px,50px);
transform: scale(2,4); }
</style>
Quel conseil pouvez-vous donner à Ali ?
Scénario 7-2 : Affichage d'images avant et après traitement

Linda, l'épouse d'Ali, trouve que son site Web présentant sa voiture ancienne pourrait être
amélioré pour attirer davantage de visiteurs. Elle suggère entre autres de montrer les photos des
voitures avant et après la restauration. Ils vous demandent quelles options sont à leur disposition
avec CSS3 pour faciliter l'affichage des photos pour les utilisateurs. Que leur dites-vous ?

Scénario 7-3 : Création de boutons avec des améliorations
Edward crée un ensemble de boutons pour une application Web et souhaite arrondir les
angles des boutons et leur appliquer une ombre portée légèrement floue. Il vous demande
quelles propriétés CSS3 il doit utiliser. Que pouvez-vous lui dire ?
Scénario 7-4 : Présentation de la propriété Flex

Meghan est une étudiante aux beaux-arts. Elle a un cours sur les images numériques et
un camarade lui dit que la perspective 3D de CSS3 l'intéresse. Elle n'en a jamais entendu
parler auparavant et vous demande de lui expliquer brièvement ce dont il s'agit. Que
pouvez-vous lui dire ?

Initiation html5 Css3partie3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Initiation html5 Css3partie3

Transféré par

Droits d'auteur :

Formats disponibles

Présentation des

Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif

■ Organisation du contenu d’une interface utilisateur avec CSS

Utilisation de la boîte flexible pour des dispositions simples et utilisation de

Le groupe W3C a créé, il y plusieurs années, des spécifications pour le modèle de boîte

Le site Web du New York Times (www.nytimes.com) constitue un exemple de présentation

■ Utilisationde la boîte flexible (Flexbox) pour appliquer au contenu un

Utiliser les éléments Flexboxes et Flexbox

MISE À L'ÉCHELLE PROPORTIONNELLE DANS UNE BOÎTE FLEXIBLE

Quelques explications supplémentaires peuvent être nécessaires pour la valeur de la

La figure 5-7 montre le résultat avant et après le redimensionnement de la fenêtre du navigateur.

CRÉER UNE BOÎTE FLEXIBLE AVEC DES ÉLÉMENTS FLEXBOX

2. Enregistrez le fichier sous le nom L5-flexbox-exercise.html et ouvrez-le dans un

3. Redimensionnez la fenêtre du navigateur, rétrécissez-la et élargissez-la, en faisant

CRÉER DES ÉLÉMENTS FLEXBOX AVEC LA FONCTION FLEX

3. Réduisez la largeur de la fenêtre du navigateur en faisant glisser le bord droit de la

4. Réduisez la taille de la fenêtre jusqu'à ce que les éléments flexbox s’agencent

MODIFICATION DE L'ORIENTATION DES ÉLÉMENTS ENFANTS DANS UNE BOÎTE

INVERSER L'ORDRE DES ÉLÉMENTS FLEXBOX

2. Enregistrez le fichier sous le nom L5-reverseorder-exercise.html et ouvrez-le dans le

5. Réenregistrez le fichier et ouvrez-le dans le navigateur Web. L'affichage doit ressembler

TRI ET RÉORGANISATION DU CONTENU

■ Utilisationdes dispositions en grille pour appliquer au contenu un alignement,

Les propriétés CSS display:grid (ou display:inline-grid), grid-columns et grid-rows sont

CRÉER UNE DISPOSITION EN GRILLE SIMPLE

7. Fermez l'outil d'édition et le navigateur Web.

Présentation des modèles de grille

Un modèle de grille utilise des caractères alphabétiques pour représenter la position

Le module des modèles de disposition en grille CSS du groupe W3C présente une autre

RÉSUMÉ DES COMPÉTENCES

Dans cette leçon, vous avez appris ce qui suit :

■ Évaluation des connaissances

3. Dans le modèle de boîte CSS de W3C, un élément de niveau

Questions à choix multiples

■ Évaluation des compétences

Scénario 5-2 : Présentation des boîtes flexibles et des éléments flexbox

■ Évaluation de la maîtrise des concepts

Scénario 5-4 : Présentation de la propriété Flex

Compétences/Concepts Objectif de l'examen MTA Numéro de l'objectif

Stacey, gestionnaire du site Web de Media Malted Milk, a pu se familiariser avec HTML5

■ Gestion de l'enchaînement du texte avec CSS

Historiquement, la gestion du flux de contenu était une procédure effectuée manuellement

Illustration: © Megan Tamaccio/iStockphoto

■ Présentation et utilisation des régions pour contrôler l'enchaînement du

Enchaînement dynamique du contenu à travers les conteneurs

Une source de contenu représente un ou plusieurs blocs de texte dans un

Dans ce même exemple, la propriété CSS flow-from crée le conteneur de contenu, qui

L'affectation de la valeur break à la propriété region-overflow empêche le contenu de

IMPLÉMENTATION MICROSOFT DES RÉGIONS CSS

<iframe id="main-data-source" src="source.html" />

#main-data-source { -ms-flow-into: main; }

Créez ensuite un sélecteur CSS qui spécifie la source de données permettant d'accepter le

.region { -ms-flow-from: main; }

• msRegionUpdate : permet de manipuler de manière dynamique les régions

CRÉER DES RÉGIONS CSS

body, html { height:100%; width:100%; }

8. Réduisez la taille de la fenêtre du navigateur pour voir l'effet du débordement du contenu.

Utilisation des colonnes et de la césure pour optimiser la lisibilité du texte

Voyons maintenant comment fonctionne le code CSS. Le code suivant utilise la propriété

Dans la mesure où les colonnes CSS3 sont encore en cours de création, il conviendra

CRÉER UNE DISPOSITION MULTICOLONNE

5. Redimensionnez la fenêtre du navigateur pour voir l'effet sur les colonnes.

Microsoft fournit d'autres propriétés de césure spécifiques aux environnements Microsoft,

■ Utilisationde la boîte flexible (Flexbox) pour appliquer au contenu un

■ Utilisationdes dispositions en grille pour appliquer au contenu un alignement,

■ Présentation et utilisation des régions pour contrôler l'enchaînement du