Requêtes média

Les concepteurs peuvent ajuster leurs conceptions pour s'adapter aux utilisateurs. Le facteur de forme de l'appareil de l'utilisateur (sa largeur, son format, etc.) en est l'exemple le plus clair. À l'aide de requêtes média, les concepteurs peuvent répondre à ces différents facteurs de forme.

Les requêtes média sont lancées avec le mot clé @media (un CSS en règle) et peuvent être utilisées pour différents cas d'utilisation.

Cibler différents types de sorties

Les sites Web sont souvent affichés sur des écrans, mais CSS peut également être utilisé pour styliser les sites web pour d'autres sorties également. Vous souhaitez peut-être que vos pages Web s'affichent dans un seul sens à l'écran, mais différemment lorsqu'elles sont imprimées. C'est possible en interrogeant les types de support.

Dans cet exemple, la couleur d'arrière-plan est définie sur gris. En revanche, si la page est imprimée, la couleur d'arrière-plan doit être transparente. Cela permet d'économiser l'encre de l'imprimante de l'utilisateur.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Vous pouvez utiliser la règle d'instruction @media dans votre feuille de style de cette manière, ou créer une feuille de style distincte et utiliser l'attribut media sur un élément link :

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Si vous ne spécifiez aucun type de média pour votre CSS, la valeur du type de média est automatiquement all. Ces deux blocs de CSS sont équivalents :

body {
  color: black;
  background-color: white;
}
@media all {
   body {
     color: black;
     background-color: white;
   }
}

Ces deux lignes de code HTML sont également équivalentes:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">

Conditions de la requête

Vous pouvez ajouter des conditions aux types de contenus. Il s'agit de requêtes multimédias. Le CSS n'est appliqué que si le type de contenu multimédia correspond et que la condition est également vraie. Ces conditions sont appelées fonctionnalités multimédias.

Voici la syntaxe des requêtes multimédias :

@media type and (feature)

Vous pouvez utiliser des requêtes multimédias sur un élément link si vos styles se trouvent dans une feuille de style distincte :

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Imaginons que vous souhaitiez appliquer différents styles en fonction de l'orientation de la fenêtre du navigateur (mode paysage, où la largeur de la fenêtre d'affichage est supérieure à sa hauteur, ou mode portrait, où la hauteur de la fenêtre d'affichage est supérieure à sa largeur). Il existe une fonctionnalité multimédia appelée orientation que vous pouvez utiliser pour vérifier que:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Si vous préférez avoir des feuilles de style distinctes :

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

Dans ce cas, le type de contenu multimédia est all. Étant donné qu'il s'agit de la valeur par défaut, vous pouvez l'omettre si vous le souhaitez :

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Vous pouvez également utiliser des feuilles de style distinctes :

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Bien que l'utilisation de feuilles de style distinctes pour différents types de médias (comme print) soit acceptable, il n'est probablement pas judicieux d'utiliser une feuille de style distincte pour chaque requête multimédia. Utilisez plutôt @media at-rules.

Ajuster les styles en fonction de la taille de la fenêtre d'affichage

Pour le responsive design, l'une des fonctionnalités multimédias les plus utiles concerne les dimensions de la fenêtre d'affichage du navigateur. Pour appliquer des styles lorsque la fenêtre du navigateur dépasse une certaine largeur, utilisez min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Utilisez la fonctionnalité multimédia max-width pour appliquer des styles en dessous d'une certaine largeur :

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Vous pouvez utiliser n'importe quelle unité de longueur CSS dans vos requêtes média. Si votre contenu est principalement basé sur des images, les pixels sont probablement les plus adaptés. Si votre contenu est principalement textuel, il est probablement plus judicieux d'utiliser une unité relative basée sur la taille du texte, comme em ou ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Vous pouvez également combiner des requêtes média pour appliquer plusieurs conditions. Utilisez le mot and pour combiner vos requêtes multimédias :

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Choisir des points d'arrêt en fonction du contenu

Le point à partir duquel une condition de caractéristique multimédia devient vraie est appelé "point d'arrêt". Il est préférable de choisir vos points de rupture en fonction de votre contenu plutôt que des tailles d'appareils populaires, car elles sont susceptibles de changer à chaque cycle de lancement de technologie.

Dans cet exemple, 50em est le point à partir duquel les lignes de texte deviennent trop longues. Un point d'arrêt est donc créé pour rendre l'interface plus lisible. À partir de ce point, le texte est divisé en deux colonnes à l'aide de la propriété column-count.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Combinaisons

Vous pouvez utiliser des requêtes média basées sur la hauteur de la fenêtre d'affichage, et pas seulement sur la largeur. Cela peut être utile pour optimiser le contenu de l'interface dans la partie au-dessus de la ligne de flottaison. Dans l'exemple précédent, si les lecteurs utilisent une fenêtre de navigateur large mais courte, il doit faire défiler une colonne vers le bas, puis reculer vers le haut pour atteindre le haut de la deuxième colonne. Il est préférable de n'appliquer les colonnes que lorsque la fenêtre d'affichage est suffisamment large et haute.

Vous pouvez combiner des requêtes média afin que les styles ne s'appliquent que lorsque toutes les conditions sont remplies. Dans cet exemple, le viewport doit avoir au moins 50em de large et 60em de haut pour que les styles de colonnes soient appliqués. Ces points d'arrêt ont été choisis en fonction de la quantité de contenu.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Ces exemples montrent comment les requêtes média peuvent être utilisées pour adapter les conceptions au facteur de forme de l'appareil d'un utilisateur, mais celles-ci ne font qu’effleurer la surface des possibilités. Les requêtes média peuvent aller bien au-delà de la largeur et de la hauteur, accéder aux préférences des utilisateurs pour les fonctionnalités d'accessibilité et les couleurs de thème. L'utilisation de requêtes média pour effectuer des ajustements de mise en page est un excellent début vers un design réactif, qui s'appuie sur ces fonctionnalités et plus encore.

Vérifier vos connaissances

Testez vos connaissances sur les requêtes multimédias responsives.

Les requêtes média existent uniquement pour la taille de l'écran ?

true
Essayez encore. Requêtes multimédias pour l'impression, les préférences système sombre et claire, et bien plus encore
faux
🎉

Les écrans sont le seul endroit où le contenu Web est consommé ou affiché ?

true
Essayez encore. Un site Web peut être imprimé sur papier, exploré par les robots des moteurs de recherche, lu à voix haute par des lecteurs d'écran ou même lu aux utilisateurs par des robots à l'aide d'un assistant.
faux
🎉

Le type de support par défaut est-il ?

screen
Essayez encore. screen n'est pas le type par défaut.
none
Essayez encore. none n'est pas un type de support valide.
all
🎉
some
Essayez encore. some n'est pas un type de contenu multimédia valide.
landscape
Essayez encore. landscape n'est pas un type de contenu multimédia valide.

Que pouvez-vous utiliser pour empêcher le navigateur de mettre à l'échelle une conception sur mobile ?

width: 100%
Essayez encore.
font-size: 200%
Essayez encore.
<meta name="viewport" content="width=device-width, initial-scale=1">
🎉
Requêtes média
Essayez encore.
HTML5
Essayez encore.

Quelle requête média s'applique lorsque la fenêtre du navigateur est supérieure à 720px.

@media (width: 720px)
Essayez encore. Cette requête média ne s'applique que lorsque la fenêtre du navigateur est égale à 720px.
@media (max-width: 720px)
Essayez encore. Cette requête multimédia s'applique lorsque la fenêtre du navigateur est inférieure à 720px.
@media (min-width: 720px)
🎉 Vous pouvez lire cette valeur comme suit : la fenêtre du navigateur mesure au moins 720px.
@media (clamp-width: 720px)
Essayez encore. clamp-width n'est pas une condition de fonctionnalité de requête multimédia valide.