Requêtes de média

Les documents Web ont vocation à être consultés sur différents types de médias : écran, impression papier, lecteur d'écran pour les personnes malvoyantes, ... Il est maintenant possible de définir une feuille de style CSS en fonction du type et des caractéristiques du média utilisé pour la consultation du document Web.

Types de médias

Le tableau ci-dessous récapitule l'ensemble des types de médias utilisables pour consulter un document Web.

Type Description
all Tous les types de médias
braille Appareils de lecture tactile en braille
embossed Impression relief en braille
handheld petits écrans d'appareils portables.
La plupart des mobiles actuels sont considérés comme des médias de type screen et non handheld.
print Impression sur papier
projection vidéo-projection sur écran
screen Écran
speech Synthétiseur vocal
tty Écran de type télétexte (terminal)
tv Écran de téléviseur

Il existe deux manières de spécifier le type de média associé à un style CSS :

En HTML, à l'aide de l'attribut media de l'élément link. 

<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">
/* screen.css: style for screen */

body {
  background-color: black;
}
/* print.css: style for print */

body {
  background-color: white;
}

En CSS, à l'aide de la règle @media 

<link rel="stylesheet" href="css/style.css">
/* style.css: styles for different media */

/* Style for screen */            
@media screen {
  body {
    background-color: black;
  }	
}

/* Style for print */            
@media print {
  body {
    background-color: white;
  }	
}

Propriétés des medias logo CSS3

Depuis CSS3, il est maintenant possible d'affecter un style CSS en fonction du type de média et de ses caractéristiques. Le tableau ci-dessous recense les propriétés principales des médias.

Propriété Description
width Largeur du viewport (fenêtre du navigateur)
height Hauteur du viewport
device-width Largeur de l'écran
device-height Hauteur de l'écran
orientation Orientation du périphérique. Les seules valeurs autorisées sont landscape et portrait.

Chacune de ces propriétés, hormis orientation, peut être préfixée par min- ou max-.

Par exemple, la requête de média ci-dessous concerne les médias de type screen et dont la largeur minimale du viewport est de 960 pixels. 

@media screen and (min-width: 960px) {
  body {
    width: 800px;
    margin: auto;
  }
}

Exercice

Ajoutez des règles CSS @media au fichier theawesomecompany.html afin de proposer une mise en page pour l'impression papier respectant les contraintes suivantes :

  • Document monochrome noir sur fond blanc
  • Largeur du texte égale à 16cm
  • Police de caractères avec empattement
Correction 
@media print {
  body {
    font-family: Georgia, Times, serif;
    font-size: 12pt;
    color: black;
    width: 16cm;
    margin: auto;
    text-align: justify;
  }
}

Exercice Responsive Web Design

Ajoutez des règles CSS @media au fichier theawesomecompany.html afin de proposer une mise en page réactive en fonction de la largeur de la fenêtre du navigateur :

  • En dessous de 480 pixels, le menu de navigation s'affiche à la verticale
  • En dessous de 720 pixels, les sections occupent toute la largeur et s'enchaînent les unes après les autres
Correction 
@media screen and (min-width: 480px) {
  nav ul {
    text-align: center;
  }

  nav li {
    list-style-type: none;
    list-style-position: inside;
    display: inline-block;
    margin-right: 20px;
  }

  nav li:last-child {
    margin-right: 0;
  }
}

@media screen and (max-width: 479px) {
  nav li {
    list-style-type: none;
    list-style-position: inside;
    display: block;
    text-align: center;
  }
}

@media screen and (min-width: 720px) {
  section {
    float: left;
    width: 30%;
    margin-right: 5%;
    text-align: justify;
  }

  section:last-of-type {
    margin-right: 0;
  }
}

@media screen and (max-width: 719px) {
  section {
    display: block;
    width: 100%;
    text-align: justify;
  }
}