CSS avancées Vers HTML 5 et CSS 3 - Raphaël Goetter
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
CSS avancées
Vers HTML 5 et CSS 3
Raphaël Goetter
Préface de Daniel Glazman
© Groupe Eyrolles, 2011,
ISBN : 978-2-212-12826-0HTML 5 et CSS 3 : l'innovation en marche
252 DeuxièMepartie
A ller plus loin Cibler et styler des colonnes de tableau
Assez mal connu, l’élément HTML 4 (pourtant reconnu par tous les navigateurs) a pour fonction de
désigner l’ensemble d’une colonne de tableau et offre ainsi une souplesse étendue en termes de mise en
forme. Ainsi, il suffit de spécifier autant de en début de tableau que de colonnes présentes, puis de
cibler en CSS l’élément comme le montre l’exemple suivant.
Partie HTML :
cellule 1cellule 2cellule 3
cellule 4cellule 5cellule 6
Partie CSS :
col:first-child {background: #ddd;}
col:nth-child(odd) {background: #eee;}
col:nth-child(even) {background: #ccc;}
Cette situation est également consultable à l’adresse :
▸ http://www.ie7nomore.com/fun/tablepimp/
Media Queries : requêtes de média CSS
CSS 3 améliore la gestion des styles en fonction des périphériques de sortie et de leurs particu-
larités en introduisant la notion de « requête de média » ou Media Query. Il devient possible de
limiter la portée de styles CSS selon un environnement maîtrisé, par exemple uniquement sur
les écrans dont la résolution est inférieure à 800 pixels.
Cette fonctionnalité, reconnue partout et prévue sur IE9, est particulièrement précieuse pour
l’adaptation de son site au Web mobile.
Syntaxe
Une Media Query se présente sous la forme d’une requête entre parenthèses, avec ou sans opé-
rateurs logiques, associée au type de terminal.
Par exemple, screen and (width:800px) s’appliquera uniquement aux écrans dont la largeur
occupe exactement 800 pixels.
La requête peut s’effectuer au sein du classique élément :
Elle peut également prendre place dans une règle @ (vue en début d’ouvrage au sein du cha-
pitre 2) présente dans une feuille de styles :
@media screen and (width:800px) { … }
Goetter Livre.indb 252 16/02/11 12:07En route vers CSS 3
CHapitre8
253
Opérateurs logiques
Divers opérateurs logiques combinent les requêtes : and (et), only (uniquement) et not (non).
L’opérateur « ou » n’existe pas, mais il est possible de le représenter à l’aide du signe virgule (,)
entre deux requêtes, un peu comme le sélecteur de groupe en CSS.
@media screen and (width:800px) { … } /* écrans de 800px exactement */
@media screen and (not width:800px) { … } /* tous les écrans sauf ceux de 800px
➥ exactement */
@media screen and (width:800px) and (color) { … } /* écrans de 800px exactement
➥ et en couleur */
@media screen and (width:800px), screen and (color) { … } /* écrans de 800px
➥ exactement ou écrans couleurs */
Dans la pratique, l’opérateur only est principalement employé pour masquer les requêtes aux
anciens navigateurs qui ne reconnaissent pas les Media Queries. Il s’agit simplement d’une
précaution :
@media only screen and (width:800px) { … } /* styles masqués sur les anciens
➥ navigateurs */
Requêtes et préfixes
Couleurs, dimensions et orientation comptent parmi les critères de requêtes généralement défi-
nis au sein d’une requête de média. Ajoutons à ces requêtes deux préfixes facultatifs min et max
faisant office de « plus petit ou égal à » ou « plus grand ou égal à ».
Tableau 8-15 Critères utilisés dans les Media Queries
Critère Description Exemples
color Sans valeur associée, cette requête (min-color: 4)
filtre les périphériques en couleur.
Associée à une valeur, elle indique le
nombre de bits de couleurs du périphérique.
width Largeur de la surface de rendu du (min-width: 800px) désigne les
périphérique de sortie terminaux dont la largeur est au moins
de 800 pixels.
height Hauteur de la surface de rendu du (max-height: 800px) désigne les
périphérique de sortie terminaux dont la hauteur est inférieure
ou égale à 800 pixels.
device-width Largeur physique du périphérique de sortie (max-device-width: 320px) désigne
un terminal mobile dont la largeur est
inférieure ou égale à 320 pixels, tel
l’iPhone 3.
device-height Hauteur physique du périphérique de sortie
Goetter Livre.indb 253 16/02/11 12:07HTML 5 et CSS 3 : l'innovation en marche
254 DeuxièMepartie
Critère Description Exemples
orientation Choisit un périphérique tourné dans le
sens vertical (portrait) ou horizontal
(landscape).
aspect-ratio Format d’image du périphérique de sortie (aspect-ratio: 16/9)
resolution Résolution du périphérique de sortie @media print and
(min-resolution: 300dpi)
device-pixel-ratio Densité de pixels du périphérique de sortie (min-device-pixel-ratio: 2)
désigne un terminal dont la densité
de pixels est au moins égale à 2, tel
l’iPhone 4.
Exercice pratique : s’adapter à la taille de l’écran
Mettons en pratique les bienfaits des Media Queries au sein d’un exercice consistant à adapter
une mise en page à la largeur de l’écran. L’objectif à atteindre est de varier d’un affichage en
trois colonnes à un affichage sur une seule colonne si l’écran est réduit ou si le visiteur navigue
à l’aide d’un téléphone mobile.
La structure HTML se compose d’un trio de paragraphes enfants d’un conteneur identifié
"main" :
Partie HTML
Premier paragraphe
Deuxième paragraphe
Troisième paragraphe
Nous allons entamer l’exercice par l’agencement des paragraphes. Pour les disposer côte à côte,
plusieurs schémas de positionnement sont envisageables. Pour des raisons de facilité, j’ai opté
pour le modèle de rendu tabulaire (non reconnu par IE6 et IE7), mais rien ne vous empêche
d’user de flottants :
Partie CSS
#main {
display: table;
table-layout: fixed;
width: 100%;
}
#main p {
display: table-cell;
padding: 5px;
margin: 0;
background: #6B9A49;
}
Goetter Livre.indb 254 16/02/11 12:07En route vers CSS 3
CHapitre8
255
Pour appliquer une couleur de fond différente à chacun des paragraphes, il nous suffit de manier
à bon escient le sélecteur CSS 2.1 d’adjacence (figure 8-36) :
#main p + p {
background: #E69B00;
}
#main p + p + p {
background: #333;
}
Figure 8-36
Aperçu visuel en grande
taille d’écran
Arrive enfin le moment où l’on va tenir compte de la résolution de l’écran du visiteur. À la suite
des règles précédentes, ajoutons simplement une Media Query ciblant les écrans dont la largeur
est inférieure ou égale à 600 pixels de large. Au sein de cette fonction, nous allons nous conten-
ter d’afficher les paragraphes sous forme de blocs et non plus de cellules (figure 8-37) :
@media only screen and (max-width: 600px) {
#main p {display: block;}
}
Le test est concluant : tant que l’écran est plus large que 600 pixels, les trois paragraphes s’af-
fichent les uns à côté des autres, mais dès que l’écran se restreint, ils s’empilent les uns sur les
autres en bloc.
Figure 8-37
Affichage sous forme
de blocs sur petits écrans
Il ne reste plus qu’à faire fonctionner le principe sur Internet Explorer 6, 7 et 8, incapables
de prendre en charge les Media Queries. Pour cela, un outil JavaScript est téléchargeable à
l’adresse :
▸ https://github.com/scottjehl/respond
Pour ne pas pénaliser les autres navigateurs, la mise en application de ce script passera par un
commentaire conditionnel.
Goetter Livre.indb 255 16/02/11 12:07HTML 5 et CSS 3 : l'innovation en marche
256 DeuxièMepartie
Partie HTML
Il est également nécessaire d’ajouter un commentaire CSS à la fin des déclarations de Media
Queries (sans ajouter d’espace après l’accolade fermante) :
Partie CSS
@media only screen and (max-width:600px) {
#main p {display:block}
}/*mediaquery*/
Et le tour est joué !
Visualiser le résultat en ligne
N’hésitez pas à décortiquer le code source du résultat observable en ligne à :
▸ http://www.ie7nomore.com/fun/media-queries/
Et découvrez une superbe application réelle de cette méthode sur le site vainqueur de notre concours
Cascading Style Summer Refresh 2010 sur Alsacréations :
▸ http://juslisen.com
CSS Transformations
La propriété CSS 3 transform permet d’appliquer des transformations en deux dimensions sur
un élément : rotation, décalage, zoom, déformation et perspective.
Là encore, les préfixes propriétaires sont de mise : pour toutes les fonctionnalités de ce module,
il est nécessaire d’écrire les propriétés en débutant par -moz-, -o- et -webkit-. Je n’évoque Inter-
net Explorer que pour vous confirmer que les transformations ne sont opérationnelles qu’à partir
d’IE9.
scale : fonction de zoom
Cette fonction agrandit ou réduit les dimensions d’un élément selon un ratio : une valeur infé-
rieure à 1 aura pour conséquence de rapetisser l’élément, un chiffre supérieur à 1 va l’agrandir.
La place occupée dans le flux demeure identique : si l’élément est agrandi, ses frères ne seront
pas poussés en conséquence.
Voici comment réduire de moitié les éléments de classe minify (figure 8-38) :
.minify {
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
Goetter Livre.indb 256 16/02/11 12:07Vous pouvez aussi lire
