Requêtes média

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

Les requêtes média sont déclenchées avec le mot clé @media (règle CSS) et peuvent être utilisées dans divers cas d'utilisation.

Cibler différents types de résultats

Les sites Web sont souvent affichés à l'écran, mais le CSS peut également être utilisé pour styliser les sites web pour d'autres sorties. Vous pouvez souhaiter que vos pages Web aient un seul aspect à l'écran, mais qu'elles soient différentes une fois imprimées. C'est possible grâce à l'interrogation des types de médias.

Dans cet exemple, l'arrière-plan est gris. Toutefois, si la page est imprimée, l'arrière-plan doit être transparent. 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 at @media comme ceci dans votre feuille de style, 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, sa valeur est automatiquement définie sur all. Ces deux blocs de CSS sont équivalents:

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

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

Les deux lignes de code HTML suivantes sont également équivalentes:

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

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

Conditions de requête

Vous pouvez ajouter des conditions aux types de médias. C'est ce qu'on appelle les requêtes média. Le CSS n'est appliqué que si le type de support correspond et si la condition est également vraie. Ces conditions sont appelées fonctionnalités multimédias.

Voici la syntaxe pour les 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 différents styles 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 Portrait (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 utiliser 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 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 utiliser des feuilles de style distinctes:

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

Même s'il peut être acceptable d'utiliser des feuilles de style distinctes pour les différents types de supports (comme print), il n'est probablement pas conseillé d'utiliser une feuille de style distincte pour chaque requête de mé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 caractéristiques 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 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 média:

@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 d'arrêt d'une condition de caractéristique multimédia s'appelle un point d'arrêt. Il est préférable de choisir vos points d'arrêt en fonction de votre contenu plutôt que de la taille des appareils populaires, car ils sont susceptibles de changer à chaque cycle de sortie d'une technologie.

Dans cet exemple, 50em est le point où les lignes de texte deviennent trop longues. Un point d'arrêt est donc créé pour rendre l'interface plus lisible. Avec 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 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, ils doivent faire défiler une colonne vers le bas, puis remonter pour atteindre le haut de la deuxième colonne. Il est préférable d'appliquer les colonnes uniquement 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, la fenêtre d'affichage doit avoir une largeur d'au moins 50em et une hauteur de 60em 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: 60em) {
  article {
    column-count: 2;
  }
}

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

Testez vos connaissances

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