Requêtes média

Les concepteurs peuvent adapter leurs conceptions pour répondre aux besoins des utilisateurs. L'exemple le plus clair est le facteur de forme de l'appareil d'un utilisateur : sa largeur, le format de l'appareil et d'autres aspects. Les requêtes média permettent aux concepteurs de s'adapter à ces différents facteurs de forme.

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

Cibler différents types de résultats

Les sites Web sont souvent affichés sur des écrans, mais le CSS peut également être utilisé pour styliser les sites Web pour d'autres sorties. Vous pouvez souhaiter que vos pages Web s'affichent d'une certaine manière à l'écran, mais différemment une fois imprimées. Pour ce faire, il est possible d'interroger les types de contenus.

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

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

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

Vous pouvez utiliser la règle @@media dans votre feuille de style comme ceci : ou vous pouvez 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 support pour votre CSS, la valeur all lui sera automatiquement attribuée. Ces deux blocs de code 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 supports. Il s'agit de requêtes média. La feuille CSS n'est appliquée que si le type de média correspond et que la condition est également définie sur "true". Ces conditions sont appelées fonctionnalités média.

Voici la syntaxe des requêtes média :

@media type and (feature)

Vous pouvez utiliser des requêtes média 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 des styles différents selon que la fenêtre du navigateur est en mode paysage (la largeur de la fenêtre d'affichage est supérieure à sa hauteur) ou en mode portrait (la hauteur de la fenêtre d'affichage est supérieure à sa largeur). Il existe une fonctionnalité média appelée orientation que vous pouvez utiliser pour tester cela :

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

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

Ou 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. Comme 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. */
}

Ou en utilisant des feuilles de style distinctes :

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

Bien qu'il puisse être acceptable d'utiliser des feuilles de style distinctes pour différents types de supports (comme print), il n'est probablement pas judicieux d'utiliser une feuille de style distincte pour chaque requête média. Utilisez plutôt les règles @@media.

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

Pour la conception responsive, l'une des fonctionnalités média les plus utiles concerne les dimensions de la fenêtre d'affichage du navigateur. Pour appliquer des styles lorsque la fenêtre du navigateur est plus large qu'une certaine largeur, utilisez min-width.

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

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

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

Cette requête média peut également être écrite à l'aide de la fonctionnalité média width et de l'opérateur inférieur ou égal à.

@media (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 peuvent être plus adaptés. Si votre contenu est principalement basé sur du texte, 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 média :

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

Vous pouvez également l'écrire à l'aide de la syntaxe de plage.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

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

Le point auquel une condition de fonctionnalité média devient vraie est appelé "point d'arrêt". Il est préférable de choisir vos points d'arrêt en fonction de votre contenu plutôt que des tailles d'écran populaires, car celles-ci sont susceptibles de changer à chaque cycle de publication de nouvelles technologies.

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

@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 "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, ils doivent faire défiler la page vers le bas d'une colonne, puis vers le haut pour atteindre le haut de la deuxième colonne. Il serait plus sûr 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 pour que les styles ne s'appliquent que lorsque toutes les conditions sont remplies. Dans cet exemple, la fenêtre d'affichage doit avoir une largeur d'au moins 50em et une hauteur d'au moins 30em pour que les styles de colonne 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: 30em) {
  article {
    column-count: 2;
  }
}

Vous pouvez également utiliser les mots clés or et not pour exprimer des situations plus complexes lorsque vous souhaitez appliquer des styles. Il peut être difficile de raisonner logiquement sur ces éléments. Assurez-vous donc de tester leur fonctionnement et leur interaction comme prévu.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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 ils ne font qu'effleurer les possibilités. Les requêtes média peuvent aller bien au-delà de la largeur et de la hauteur, en accédant aux préférences de l'utilisateur pour les fonctionnalités d'accessibilité et les couleurs du thème. L'utilisation de requêtes média pour ajuster la mise en page est un bon point de départ pour un design responsif, qui s'appuie sur ces fonctionnalités et d'autres.

Vérifier que vous avez bien compris

Testez vos connaissances sur les requêtes média responsives.