CSS§

IUT Lyon 1)

Creative Commons License

Ce travail est sous licence Creative Commons Attribution-ShareAlike 3.0 France.

1

Feuille de style§

2

Rappels§

3

Avantages§

4

Déclarer une feuille de style§

Pour attacher une feuille de style à un document HTML, on ajoute dans l'élément <head> une balise <link>

<head>
  <link rel="stylesheet" type="text/css"
        href="mystyle.css" />
</head>
5

Déclarer une feuille de style (2)§

<head>
  <style type="text/css">
    /* your CSS here */
  </style>
</head>

Indication

Cela peut malgré tout être utile en phase de test, ou si on souhaite minimiser le nombre de requêtes HTTP.

6

Outils§

7

Valideur§

Comme pour le HTML, le W3C fournit un service en ligne de validation de CSS :

http://jigsaw.w3.org/css-validator/

Son utilisation vous est vivement recommandée.

8

Inspecteur§

Certains navigateurs (notamment Firefox et Chrome) offrent des outils puissants pour les développeurs web.

Dans le menu contextuel (clic droit) sur n'importe quel élément, Inspect Element ouvre une interface d'inspection qui permet :

9

Liens utiles§

Référence et apprentissage :

Démonstrations :

Indication

Le site de démonstration ci-dessus est construit sur le principe suivant : la page HTML est toujours la même, seule la feuille de style change.

10

Règle§

11

Principe§

Exemple :

em { font-weight: bold }
/* le contenu des balises <em> devrait être en gras */
12

Combinaison de règles§

Plusieurs règles similaires peuvent coexister :

em   { font-weight: bold }
em   { color: blue }
cite { font-weight: bold }
cite { color: blue }
13

Regroupement par sélecteur§

On peut regrouper les règles ayant le même sélecteur, en séparant les couples propriété-valeur par un point-virgule (« ; »).

em   { font-weight: bold ; color: blue }
cite { font-weight: bold ; color: blue }
14

Regroupement par contenu§

On peut regrouper des règles ayant le même contenu, en séparant les sélecteurs par une virgule (« , »).

em, cite { font-weight: bold ; color: blue }
15

Sensibilité aux espaces§

CSS est insensible aux espaces et aux sauts de ligne. On peut donc en ajouter autant que nécessaire pour faciliter la mise en page.

em,
cite
{
    font-weight : bold ;
    color       : blue   ;
}

NB : on peut également rajouter un point-virgule après le dernier couple propriété-valeur, ce qui favorise l'évolutivité de la feuille de style.

16

Propriétés du texte§

17

Propriétés sur la police§

18

Police avec font-family§

Lorsqu'on publie sur le Web, on ne peut pas faire l'hypothèse que tous les clients auront les mêmes polices installées sur leur système.

Si on veut utiliser une police spécifique, il faut donc indiquer au navigateur comment la charger :

@font-face
{
  font-family: MyNiftyFont;
  src: url('http://example.org/nifty-font.ttf'),
       url('http://example.org/nifty-font.eot');
}
19

Police avec font-family§

Indication

Comme le montre l'exemple, il peut être nécessaire de fournir la police dans plusieurs formats, afin de maximiser les chances de compatibilité avec différents navigateurs.

20

Polices génériques§

CSS définit des polices génériques :

Inconvénient : leur apparence varie d'un système à l'autre (et d'un navigateur à l'autre).

Avantage : elles garantissent un affichage pas trop différent des intentions de l'auteur.

21

Bonne pratique§

@font-face { font-family: MyNiftyFont; src: /*...*/ }

em {
  font-family: MyNiftyFont, "Times New Roman", serif;
}
22

Taille du texte avec font-size§

La taille de police est généralement exprimée en points pica :

body {  font-size: 12pt ; }

ou relativement à la taille de la police dans l'élément englobant.

strong {  font-size: 150% ; }

ou relativement à la taille de la police de l'élément racine (<html>).

h1 {  font-size: 2rem ; }

Mais toutes les unités de mesures reconnues par CSS sont en théorie utilisables.

23

Autres propriétés§

Indication

Notez que text-transform: uppercase n'a pas exactement le même effet que font-variant: small-caps.

24

Alignement du texte§

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte aligné à gauche.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte centré.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte aligné à droite.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ceci est un exemple de texte justifié.

25

Couleurs en CSS : RGB§

_images/RGB_illumination.jpg

Source image Wiki commons

em { color: #f00 }                 /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
26

Couleurs en CSS : autres moyens§

27

Sélecteurs complexes§

28

Principe§

On a souvent besoin d'appliquer des règles de présentations différentes à la même balise en fonction de son contexte.

Ceci peut s'exprimer en combinant plusieurs sélecteurs :

X Y { /* s'applique à tout élément Y situé
         à l'intérieur d'un X — même indirectement */ }

X > Y { /* s'applique à tout élément Y situé
           directement à l'intérieur d'un X */ }

X + Y { /* s'applique à tout élément Y situé
           immédiatement après un X */ }
29

Principe§

Indication

En considérant la Structure en arbre vue dans la section sur HTML, on peut reformuler les connecteurs ainsi :

  • X Y : déplacement quelconque vers le bas
  • X > Y : déplacement d'un cran vers le bas
  • X + Y : déplacement d'un cran vers la droite (sous le même parent)

Notons qu'il existe un quatrième connecteur :

  • X ~ Y : déplacement vers la droite (sous le même parent)
30

Principe (suite)§

31

Exemples§

q        { font-style: italic; }
q em     { font-weight: bold; }
q strong { text-decoration: underline; }

body>h1  { text-align: center; }

h1+* { font-variant: small-caps; }

ul ul li { font-size: 80%; }
32

Exercice§

Soit l'arborescence:

graph { node [ shape=elipse, style=filled ] body -- h1 -- "Ma dissertation" body -- sec1 sec1 -- h2_1 -- "Thèse" sec1 -- p_1 -- "...1" sec1 -- sec2 sec2 -- h3_1 -- "Argument 1" sec2 -- p_2 -- "...2" sec2 -- p_3 -- "...3" sec1 -- sec3 sec3 -- h3_2 -- "Argument 2" sec3 -- p_4 -- "...4" sec3 -- p_5 -- "...5" body -- sec4 sec4 -- h2_2 -- "Anti-thèse" sec4 -- sec5 sec5 -- h3_3 -- "Contre-argument 1" sec5 -- p_6 -- "...6" sec5 -- p_7 -- "...7" sec4 -- sec6 sec6 -- h3_4 -- "Contre-argument 2" sec6 -- p_8 -- "...8" sec6 -- p_9 -- "...9" body -- sec7 sec7 -- h2_3 -- "Synthèse" sec7 -- p_10 -- "...10" body [ label="<body>", shape=box, style=rounded ] h1 [ label="<h1>", shape=box, style=rounded ] sec1 [ label="<section>", shape=box, style=rounded ] sec2 [ label="<section>", shape=box, style=rounded ] sec3 [ label="<section>", shape=box, style=rounded ] sec4 [ label="<section>", shape=box, style=rounded ] sec5 [ label="<section>", shape=box, style=rounded ] sec6 [ label="<section>", shape=box, style=rounded ] sec7 [ label="<section>", shape=box, style=rounded ] h2_1 [ label="<h2>", shape=box, style=rounded ] h2_2 [ label="<h2>", shape=box, style=rounded ] h2_3 [ label="<h2>", shape=box, style=rounded ] h3_1 [ label="<h3>", shape=box, style=rounded ] h3_2 [ label="<h3>", shape=box, style=rounded ] h3_3 [ label="<h3>", shape=box, style=rounded ] h3_4 [ label="<h3>", shape=box, style=rounded ] p_1 [ label="<p>", shape=box, style=rounded ] p_2 [ label="<p>", shape=box, style=rounded ] p_3 [ label="<p>", shape=box, style=rounded ] p_4 [ label="<p>", shape=box, style=rounded ] p_5 [ label="<p>", shape=box, style=rounded ] p_6 [ label="<p>", shape=box, style=rounded ] p_7 [ label="<p>", shape=box, style=rounded ] p_8 [ label="<p>", shape=box, style=rounded ] p_9 [ label="<p>", shape=box, style=rounded ] p_10 [ label="<p>", shape=box, style=rounded ] "...1" [ label="..." ] "...2" [ label="..." ] "...3" [ label="..." ] "...4" [ label="..." ] "...5" [ label="..." ] "...6" [ label="..." ] "...7" [ label="..." ] "...8" [ label="..." ] "...9" [ label="..." ] "...10" [ label="..." ] }

Quels contenus seront affectés par les styles associés aux sélecteurs suivants :

body section p
body > section > p
h3 + p
h3 ~ p
h3, p
33

Entrainement§

CSS Diner (jusqu'au niveau 14)

34

Exercice§

Reprenez le code HTML que vous avez écrit pour cet exercice, et attachez le à une nouvelle feuille de style.

Sans toucher au code HTML, ajoutez à votre feuille de style les règles qui permettront d'obtenir le résultat disponible ici.

35

Classes et identifiants§

HTML autorise les attributs suivant dans n'importe quelle balise :

<ol id="contents">...</ol>

<article class="post funny">...</article>
36

Sélecteurs associés§

CSS permet de sélectionner un élément par son identifiant ou sa classe, en spécifiant ou non le type de la balise.

article.post { /* tout <article> de la classe 'post' */ }

.funny       { /* tout élément de la classe 'funny' */ }

ol#contents  { /* toute <ol> avec l'id 'contents' */ }

#contents    { /* tout élément avec l'id 'contents' */ }

On peut bien sûr utiliser ces sélecteurs dans des sélecteurs complexes.

37

Bonne utilisation des identifiants§

38

Bonne utilisation des classes§

39

Priorité§

Considérons :

em { font-style: italic;
     color: red }

.summary em { font-style: normal;
              font-weight: bold }

Quelle serait la mise en forme du HTML suivant ?

<p class="summary">This summary
is <em>short</em>.</p>
40

Réponse§

This summary is short.

Indication

Lorsqu'on utilie des sélecteurs complexes, la spécificité relative des différentes règles n'est pas toujours très intuitives. Attention donc à rester aussi simple que possible (KISS).

Pour plus d'info: https://css-tricks.com/specifics-on-css-specificity/

41

Entrainement§

Avertissement

Les coloriages magiques utilisent des sélecteurs non vus en cours.

Pour une liste exhaustive, consultez http://www.w3.org/TR/css3-selectors/ .

42

Position et espacement§

43

Marge§

La marge d'un élément est l'espace libre minimum qui doit être laissé autour de cet élément.

L'espace effectif entre deux éléments voisins est déterminé en prenant la plus grande des deux marges.

44

Propriétés margin§

On peut aussi utiliser la version synthétique, qui accepte 1 à 4 valeurs :

45

Propriétés margin§

Avertissement

  • Lorsqu'une propriété CSS prend plusieurs valeurs, elles sont généralement séparées par des espaces.
  • Ce principe d'héritage est utilisé par d'autres propriétés (par exemple padding).
46

Longueurs en CSS§

CSS reconnaît les unités de longueur suivantes :

ch largeur du caractère 0 dans la police courante
cm centimètre
mm millimètre
in pouce (inch)
pt point pica (1/72 in)
em taille de la police courante
ex hauteur du caractère x dans la police courante
px « pixel CSS » (varie avec le niveau de zoom)
rem taille de la police de l'élément racine
vw 1% de la largeur de la fenêtre
vh 1% de la hauteur de la fenêtre

Pour en savoir plus, voir ici.

47

Taille§

La taille d'un élément peut être fixée grâce aux propriétés width et height.

Ces propriétés acceptent des longueurs

Par exemple, ce paragraphe a la propriété width: 50%, il occupe donc la moitié de la largeur de la page.

48

Taille§

Astuce

Pour fixer la taille d'un élément, bordure comprise, changer la valeur de sa propriété box-sizing à border-box. Par défaut, les propriétés width et height s'appliquent au contenu de l'élément (content-box).

Avertissement

Certains éléments ignorent les propriétés width et height, typiquement ceux représentant un mot ou un groupe de mot à l'intérieur d'une phrase (par exemple <em> ou <a>).

On peut cependant les forcer à en tenir compte, en fixant leur propriété display à inline-block.

49

Calculs de taille§

On peut utiliser des fonctions CSS pour calculer une longueur :

Par exemple, ce paragraphe a la propriété width: calc(200%/3), il occupe donc deux tiers de la largeur de la page.

p { width: calc(200%/3); }
50

Intervalles de taille§

On peut également contraindre un élément de manière plus souple avec les propriétés min-width, max-width, min-height et max-height.

C'est utile lorsqu'on ne connaît pas à l'avance le contenu des éléments concernés :

51

Débordement§

Lorsqu'on contraint la taille d'un élément (par exemple un paragraphe), il est possible que cette taille ne suffise plus pour afficher le contenu de cet élément.

La propriété overflow permet de paramétrer le comportement de l'élément dans cette circonstance. Elle peut prendre les valeurs suivantes.

52
Exemples d'utilisation de overflow§
visible
visible
visible
visible
hidden
hidden
hidden
hidden
scroll
scroll
scroll
scroll
auto
auto
auto
auto
53

Mode d'affichage§

Il existe deux grands types d'éléments :

54

Les éléments inline§

55

Les éléments block§

56

Changer le mode d'affichage§

57

Positionnement flottant§

Par défaut, les images appartiennent au flux de texte. Ainsi :

La Joconde <img src="_static/monalisa.jpg"
                alt="Portrait de Mona Lisa">
est probablement le tableau le plus connu au monde.

sera affiché comme suit :

La Joconde Portrait de Mona Lisa est probablement le tableau le plus connu au monde.

58

Positionnement flottant (2)§

La propriété float, qui peut prendre comme valeur left ou right, fait « flotter » un élément au bord de la page.

Ainsi, avec le CSS suivant :

img { float: right; }

le HTML précédent s'affichera ainsi :

La Joconde Portrait de Mona Lisa est probablement le tableau le plus connu au monde.

Indication

Surtout utilisée pour les images, cette propriété peut également être utilisée pour tout type de figure (tableaux, notamment) ou certains contenus textuels (<aside>).

59

Personnalisation des boîtes§

60

Boîtes CSS§

_images/box.png

Source image W3C

61

Cadre§

On peut souhaiter tracer un cadre autour de certains éléments.

62

Propriétés border§

On peut aussi séparer ces 3 propriétés :

63
Propriétés border (suite)§

Il est aussi possible de donner des propriétés différentes aux quatre cotés du bord :

De la même manière, chacune de ces propriétés peut se décliner en sous-propriétés, par exemple :

64
Propriétés border (exemples)§

Bord en haut et en bas.

Bord à gauche et à droite.

Bord uniquement à droite.

Quatre bords différents

65

Padding§

Le padding est l'espace entre le contenu et le bord extérieur de l'élément.

En général, on utilise un padding > 0 uniquement lorsque le bord de l'élément est visible (border, background-color).

66
Propriétés padding§

Comme pour la marge, on peut spécifier le padding par quatre propriétés (une par coté) :

ou par une propriété synthétique acceptant 1 à 4 valeurs :

67
Propriétés padding (exemples)§

Padding nul.

Padding de 0.5em.

Padding de 0.5em vertical et 1em horizontal.

Padding de 0.5 em en haut, 1em à droite, 1.5em en bas et 2em à gauche.

68

Coins arrondis§

Il est possible d'arrondir les coins du bord grâce aux propriétés suivante :

ou par une propriété synthétique acceptant 1 à 4 valeurs :

69

Coins arrondis (exemples)§

Pas d'arrondi (avec un padding de 0.5em).

Arrondi de 0.5em.

Arrondi de 1em.

Arrondis différents

70

Remarques§

71

Images de fond§

Plutôt qu'une couleur de fond (background-color), on peut spécifier une image de fond pour certains éléments.

Par exemple :

background-image: url("_static/trefle.png")

Élément avec une image de fond.

72

Paramétrage de l'image de fond§

73

Propriété synthétique background§

74

Exemple§

body {
   background :
     url("sun.png") no-repeat fixed top right,
     url("moon.png") repeat-y top left,
     blue ;
}
h1 {
   text-align : center ;
}

Source images: johnny_automatic

75

Discussion§

Il convient de distinguer

76

Pseudo-classes et pseudo-éléments§

77

Pseudo-classes§

Les pseudo-classes sont similaires aux classes HTML, mais elles sont attachées automatiquement aux éléments qui correspondent à leur définition.

Avertissement

Comme les pseudo-classes ont toute la même priorité, il faut être attentif à l'ordre dans lequel les règles sont déclarée. Par exemple :

a:visited { color: purple }
a:focus { color: green } /* even if :visited */
a:hover { color: red } /* even if :visited or :focus */
a:active { color: yellow } /* even if :visited, :focus or :hover */
78

Ordre des éléments§

L'argument de :nth-child(i) accepte comme argument le rang de l'élément concerné (en commençant à 1), mais peut être une expression simple utilisant la variable n, par exemple :

79

Pseudo-éléments§

Les pseudo-éléments sont des éléments virtuels contenant un sous-ensemble d'un élément existant.

Les pseudo-éléments ::before et ::after sont vides par défaut, mais on peut leur ajouter du contenu grâce à la propriété :content.

80

Contenu généré§

La propriété content accepte une ou plusieurs valeurs séparées par des espaces. Ces valeurs peuvent notamment être de la forme :

81

Exercices§

Reprenez l'exercice du livre dont vous êtes le héros, dans sa version en un seul fichier (avec des liens internes), mais faîtes en sorte que

82

Positionnement avancé§

83

Motivation§

Les techniques de positionnement vues jusqu'ici (marges, flottants) sont bien adaptées à du texte simple, mais limitées pour

  • des mises en pages plus complexes,
  • des interfaces plus interactives,
  • le responsive design.

Indication

Grid Layout et Flexbox sont plutôt bien reconnus par les différents navigateurs mais l'utilisation d'Autoprefixer (https://autoprefixer.github.io) peut s'avérer utile pour ajouter d'éventuels préfixes propriétaires.

84

Positionnement Grid Layout§

Ce modèle de grille de positionnement se compose :

85

Positionnement Grid Layout§

_images/grid.svg
86

grid-template : propriété du conteneur§

Elle définit la grille (rows / columns). Cette propriété est un raccourci pour grid-template-rows + grid-template-columns. La largeur d'une colonne ou la hauteur d'une ligne accepte les unités classiques de taille (%, px, ...), ainsi que fr (fraction) et auto (adapté au contenu).

87
Exemple d'utilisation de grid-template§
100px 50px / 10% 2fr 1fr 2fr
item1
item2
item3
item4
item5
88

grid-area : propriété des items§

Par défaut, les items se placent dans le prochain espace vide. grid-area permet de définir la position précise de l'item (grid-row-start / grid-column-start / grid-row-end / grid-column-end). Cette propriété est un raccourci pour grid-row + grid-column. Le repère utilisé est celui des grid lines. Le mot clé span permet à l'item de couvrir plusieurs lignes et/ou colonnes.

89
Exemples d'utilisation de grid-area§
.item5 {grid-area: 2 / 3} // équivaut à 2 / -3
item1
item2
item3
item4
item5
.item5 {grid-area: 2 / 1 / 3 / 5} // équivaut à 2 / 1 / 3 / span 4
item1
item2
item3
item4
item5
90

grid-template-areas : propriété du conteneur§

Il est possible de nommer des zones, constituées d'une ou plusieurs grid cells, dans lesquelles on placera les grid items. Cela rend très lisible le gabarit de la page si on affecte aux zones le nom des éléments qui les occuperont.

#container {
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
}
header {
  grid-area: header;
}
91

grid-template-areas : propriété du conteneur§

header
main
footer
92

gap : propriété du conteneur§

Par défaut, il n'y a pas de gouttière entre les lignes et les colonnes. Cette propriété est un raccourci pour row-gap + column-gap. C'est le standard qui remplace grid-gap.

93
Exemple d'utilisation de gap§
gap: 2% 4%
item1
item2
item3
item4
item5
94

Exercice§

Reproduisez le modèle ci-dessous représentant une calculatrice.

calculette
95

Se documenter§

Tutoriels :

Livre :

96

Positionnement Flexbox§

Ce modèle de boîtes flexibles se compose :

97

Positionnement Flexbox§

_images/flex.svg
98

flex-direction : propriété du conteneur§

Elle donne la direction et le sens de l'axe principal

99
Exemples d'utilisation de flex-direction§
row
item1
item2
item3
row-reverse
item1
item2
item3
column
item1
item2
item3
column-reverse
item1
item2
item3
100

flex-wrap : propriétés du conteneur§

Elle définit si les items peuvent passer à la ligne

101
Exemples d'utilisation de flex-wrap§
nowrap
item1
item2
item3
item4
item5
item6
item7
item8
wrap
item1
item2
item3
item4
item5
item6
item7
item8
wrap-reverse
item1
item2
item3
item4
item5
item6
item7
item8
102

flex : propriété d'item§

Elle permet de définir simplement si un item doit être flexible (1) ou non (0).

103
Exemples d'utilisation de flex§
item1
item2 (flex:1)
item3
104

Se documenter§

Tutoriels :

Livre :

105

Propriétés communes à Grid Layout et Flexbox§

106

justify-content : propriété du conteneur§

Elle gère la répartition des colonnes sur la grille lorsqu'elles n'occupent pas tout l'espace disponible, ainsi que les items Flexbox sur l'axe principal.

107
Exemples d'utilisation de justify-content§
flex-start
item1
item2
item3
flex-end
item1
item2
item3
center
item1
item2
item3
space-around
item1
item2
item3
space-between
item1
item2
item3
108

align-content : propriété du conteneur§

Elle ne s'applique qu'aux conteneurs Flexbox qui autorisent le retour à la ligne, ainsi qu'aux grilles où les lignes n'occupent pas tout l'espace disponible. Elle gère la répartition des lignes.

109
Exemples d'utilisation de align-content§
flex-start
item1
item2
item3
item4
item5
item6
item7
flex-end
item1
item2
item3
item4
item5
item6
item7
center
item1
item2
item3
item4
item5
item6
item7
stretch
item1
item2
item3
item4
item5
item6
item7
space-between
item1
item2
item3
item4
item5
item6
item7
space-around
item1
item2
item3
item4
item5
item6
item7
110

align-items : propriété du conteneur§

Elle gère l’alignement des items sur l’axe secondaire des conteneurs Flexbox et sur les lignes des grilles. Cela revient à définir la même valeur align-self pour chacun des items.

111
Exemples d'utilisation de align-items§
stretch
item1
item2
item3
flex-start
item1
item2
item3
flex-end
item1
item2
item3
center
item1
item2
item3
baseline
item1
item2
item3
112

align-self : propriété d'item§

Elle permet de modifier l'alignement de l'item sur l'axe secondaire d'un conteneur Flexbox ou sur la ligne d'une grille. Les valeurs possibles sont les mêmes que pour la propriété align-items.

113
Exemples d'utilisation de align-self§
flex-start / flex-end
item1
item2
item3
item4
flex-end / flex-start
item1
item2
item3
item4
center / flex-start
item1
item2
item3
item4
stretch / flex-start
item1
item2
item3
item4
baseline / flex-start
item1
item2
item3
item4
114

order : propriété d'item§

Elle permet de réorganiser les items

  • order : valeur (valeur par défaut 0)
115
Exemples d'utilisation de order§
.item2 {order: -1;}
item1
item2
item3
item4
116

Positionnement fin§

_images/position.svg

Indication

Les propriétés top et bottom sont redondantes, de même que left et right.

117

Positionnement static§

118

Positionnement relative§

Positionnement relatif d'un texte.

119

Positionnement absolute§

Positionnement absolu d'un texte.

120

Positionnement fixed§

121

Adaptation au média§

122

Adaptation au média§

Des feuilles de style différentes peuvent être appliquées selon le média :

<link rel="stylesheet" type="text/css"
      media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css"
      media="print" href="serif.css">

NB : ceci peut également être spécifié dans un unique fichier CSS :

@media screen {
   * { font-family: sans-serif }
}
123

Types de média§

all
print
screen

Indication

Cette liste est celle du futur standard Media Queries Level 4. D'autres types de média étaient définis dans d'anciennes versions, par exemple speech, mais sont aujourd'hui considérées comme obsolètes. A la place, on peut utiliser les caractéristiques du média (media features).

124

Adaptation aux caractéristiques du média§

La directive @media permet également de n'appliquer des règles CSS que lorsque les dimensions de l'affichage respectent certaines conditions, par exemple :

@media (max-width:320px) { ... }
@media (min-width:321px) and (max-width:640px) { ... }
@media (min-aspect-ratio:16/9) { ... }

Indication

On peut bien sûr (et on doit) garder des règles hors de toute section @media, qui s'appliquent à toutes les situations. Les sections @media ne sont là que pour ajuster la présentation générale à un contexte particulier.

125

Appareils mobiles§

Les appareils mobiles (smartphones notament) "trichent" en simulant un écran plus grand que la réalité, afin d'afficher sans (trop de) problème les pages non responsive.

Il est possible (et souhaitable) de désactiver ce comportement, lorsqu'on souhaite avoir un meilleur contrôle de l'affichage sur ces appareils.

126

La balise <meta name="viewport">§

La balise suivante (dans le <head>) force le navigateur à utiliser la largeur réelle de l'appareil.

<meta name="viewport" content="width=device-width">
127

Pour en savoir plus...§

128