Fonctionnalités multimédias

Le responsive design ne serait pas possible sans les requêtes média. Avant les requêtes média, il était impossible de savoir quel type d'appareil les utilisateurs utilisaient pour visiter votre site Web. Les concepteurs ont dû faire des hypothèses. Ces hypothèses ont été encodées dans des conceptions à largeur fixe ou des mises en page fluides.

Tout cela a changé avec l'introduction des requêtes média. Pour la première fois, les concepteurs pouvaient faire un pas vers les utilisateurs. Les concepteurs pouvaient ajuster leurs mises en page pour s'adapter aux appareils des utilisateurs.

Pour rappel, une requête média comprend un type de média facultatif et une fonctionnalité média obligatoire. Les types de supports n'ont pas beaucoup changé au fil des ans. Il n'y a toujours que quatre valeurs possibles :

@media all
@media screen
@media print
@media speech

En revanche, les fonctionnalités média se sont considérablement développées. Les concepteurs peuvent désormais répondre aux besoins des utilisateurs au-delà de la moitié du chemin, en adaptant les conceptions pour qu'elles s'adaptent à bien plus que la taille de l'écran.

Dimensions de la fenêtre d'affichage

De loin, les requêtes média les plus populaires sur le Web sont celles qui traitent de la largeur de la fenêtre d'affichage. Mais même ici, vous avez le choix. Vous pouvez utiliser la fonctionnalité multimédia max-width pour appliquer des styles en dessous d'une certaine largeur ou la fonctionnalité multimédia min-width pour appliquer des styles au-dessus d'une certaine largeur.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Personnellement, j'aime utiliser min-width. J'applique les styles de mise en page de manière additive. J'introduis de nouvelles règles de mise en page à chaque point d'arrêt au lieu d'annuler les règles précédentes.

Cette approche additive fonctionne également pour la hauteur. min-height vous permet d'ajouter des règles à mesure que la hauteur de la fenêtre d'affichage augmente. Par exemple, vous pouvez avoir un élément d'en-tête que vous souhaitez ancrer en haut de la fenêtre du navigateur s'il y a suffisamment d'espace vertical.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Vous pouvez toutefois utiliser la fonctionnalité multimédia max-height si vous le souhaitez. Ici, l'en-tête est ancré par défaut, mais l'effet collant est supprimé s'il n'y a pas assez d'espace vertical.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Le choix entre les préfixes min- et max- ne s'applique pas uniquement à width et height. La fonctionnalité média aspect-ratio offre le même choix. Il propose également une version sans préfixe si vous souhaitez appliquer des styles à un rapport exact entre la largeur et la hauteur.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Fournir différents styles pour différents formats peut rapidement devenir ingérable. Si vous n'avez pas besoin d'un contrôle aussi précis, la fonctionnalité multimédia orientation pourrait mieux répondre à vos besoins. Il peut prendre deux valeurs : portrait ou landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Bien que les termes "portrait" et "paysage" soient le plus souvent utilisés pour désigner l'orientation des appareils mobiles, la fonctionnalité média orientation n'est pas spécifique à un appareil. Une fenêtre de navigateur en plein écran sur un ordinateur portable standard aura une valeur orientation de landscape.

Écrans

La densité de pixels des écrans varie. Elle est mesurée en dpi (points par pouce). Vous pouvez ajuster vos styles pour différentes densités de pixels à l'aide de la fonctionnalité média resolution. Comme aspect-ratio, resolution est disponible en trois variantes : minimum, maximum et exact.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Vous n'aurez peut-être jamais besoin d'utiliser de requêtes média resolution. La densité de pixels ne pose généralement problème que pour les images. Les images responsives permettent de gérer la densité de pixels directement en HTML.

Le CSS, quant à lui, vous permet de définir vos animations et transitions. Vous pouvez ajuster ces animations et transitions pour qu'elles répondent à différents taux d'actualisation à l'aide de la fonctionnalité média update. Cette fonctionnalité média renvoie l'une des trois valeurs suivantes : none, slow et fast.

Une valeur update de none signifie qu'il n'y a pas de fréquence d'actualisation. Par exemple, une page imprimée ne peut pas être mise à jour.

Une valeur update de slow signifie que l'écran ne peut pas s'actualiser rapidement. Un écran e-ink est un exemple d'écran avec une fréquence d'actualisation lente.

Une valeur update de fast signifie que l'écran s'actualise assez rapidement pour gérer les animations et les transitions.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Tous les aspects de l'affichage ne sont pas liés aux capacités matérielles. Dans le module sur les thèmes, vous avez vu comment définir des propriétés dans un fichier manifeste d'application Web. L'une de ces propriétés s'appelle display. Vous pouvez lui attribuer la valeur fullscreen, standalone, minimum-ui ou browser. La fonctionnalité média display-mode correspondante vous permet d'adapter vos styles à ces différentes options.

Supposons que vous ayez fourni une valeur display de standalone dans le fichier manifeste de votre application Web. Si un utilisateur ajoute votre site à son écran d'accueil, il se lancera sans interface de navigateur. Vous pouvez choisir d'afficher un bouton "Retour" pour ces utilisateurs.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Couleur

Il existe de nombreuses fonctionnalités multimédias permettant d'interroger les capacités de couleur d'un appareil. Si vous souhaitez ajuster vos styles pour un écran qui n'affiche que des nuances de gris, vous pouvez utiliser la fonctionnalité média monochrome sans aucune valeur.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Il existe une fonctionnalité média color correspondante.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Pour les écrans couleur, vous pouvez écrire des requêtes avec les fonctionnalités média color-gamut, color-index ou dynamic-range. Elles fournissent toutes des informations spécifiques sur les capacités de couleur de l'écran.

Dans cet exemple, les valeurs de couleur sont mises à jour en réponse à la fonctionnalité média dynamic-range, qui indique la combinaison de la luminosité maximale, de la profondeur de couleur et du taux de contraste de l'écran. Les valeurs possibles sont standard ou high. Un espace colorimétrique différent est attribué à un écran haute définition qui indique une valeur dynamic-range de high à l'aide de la nouvelle fonction CSS color().

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Interaction

Les fonctionnalités multimédias peuvent également indiquer le type de mécanisme d'entrée utilisé pour interagir avec votre site : hover, any-hover, pointer et any-pointer. Pour en savoir plus, consultez le module sur l'interaction.

Requêtes sur les préférences utilisateur

Grâce à CSS, vous pouvez collaborer avec vos utilisateurs pour vous assurer qu'ils peuvent accéder à votre contenu de la manière qui leur convient. Dans cette leçon, vous avez appris à appliquer différents styles CSS en fonction des dimensions et des caractéristiques de l'appareil de l'utilisateur. Toutefois, vous pouvez également appliquer différents CSS en fonction des paramètres de l'utilisateur.

Mode sombre et mode clair

Vous pouvez répondre à la préférence de votre utilisateur pour un thème clair ou sombre. De nombreux utilisateurs définissent cette option comme préférence système.

Définir le jeu de couleurs pour les éléments de l'interface utilisateur

Le navigateur fournit des couleurs par défaut pour des éléments tels que les barres de défilement et les éléments de formulaire. Vous pouvez spécifier si vous souhaitez utiliser un thème clair pour les utilisateurs de color-scheme: light ou un thème sombre pour ceux de color-scheme: dark. Vous pouvez également spécifier que la page est compatible avec les deux, avec color-scheme: light dark. Vous pouvez définir cet attribut dans l'élément :root ou html pour définir le schéma pour l'ensemble de la page, ou vous pouvez le remplacer pour des éléments spécifiques.

Vous pouvez également définir une balise meta pour color-scheme afin de définir le schéma d'une page avant le chargement de vos styles. Si vous définissez color-scheme: normal sur un élément de la page, il utilisera la valeur color-scheme que vous avez définie dans cette balise Meta.

<meta name="color-scheme" content="dark light">

prefers-color-scheme fonctionnalité multimédia

Vous pouvez également définir des styles personnalisés en réponse au thème de couleur préféré d'un utilisateur avec une requête média pour prefers-color-scheme.

light-dark

Si vous offrez à vos utilisateurs le choix entre un thème clair et un thème sombre, vous pouvez trouver fastidieux de définir chaque couleur dans une requête média. light-dark() vous permet de spécifier les deux dans une seule propriété.

Pour ce faire, vous devez définir color-scheme: light dark sur l'élément ou l'un de ses ancêtres. Vous devez d'abord définir une couleur à utiliser en mode clair, puis une couleur à utiliser en mode sombre.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Si un utilisateur a défini la préférence système sur le mode clair, l'en-tête sera noir. Si l'utilisateur préfère le mode sombre, le titre sera blanc.

Préférences de contraste

Vos utilisateurs peuvent trouver plus facile de lire du contenu avec un contraste élevé ou faible, et peuvent configurer leur système pour remplacer votre thème par celui qui leur convient le mieux. Votre rôle est de vous assurer que votre site fonctionne toujours bien avec leurs préférences.

Vous vous souvenez peut-être que dans le module Cascade, les styles utilisateur locaux !important peuvent remplacer les styles d'auteur fournis par une page Web. Les utilisateurs peuvent ainsi utiliser les styles qui leur conviennent le mieux.

Couleurs forcées

Windows propose des "thèmes à contraste élevé" que les utilisateurs peuvent sélectionner pour remplacer les thèmes d'un site Web. Il s'agit souvent de thèmes à contraste élevé, qui peuvent être en mode clair ou sombre. Dans CSS, cela s'appelle les couleurs forcées. Dans la plupart des cas, votre site se comportera comme prévu dans ce mode. Les boutons, les liens, les entrées et les autres contenus utiliseront les couleurs du thème.

Il peut arriver que vous deviez ajuster vos styles, par exemple si vous utilisez des éléments de manière non standard. Vous pouvez utiliser la requête média @media (forced-colors: active) pour appliquer des styles lorsqu'un utilisateur a activé les couleurs forcées.

Dans certains cas, les styles d'un site sont essentiels pour comprendre le contenu lui-même, par exemple avec un sélecteur de couleur ou un graphique avec une légende de couleur. Vous pouvez définir forced-color-adjust: none; sur un élément pour désactiver le mode de couleurs forcées. Veillez à ne désactiver que des éléments spécifiques et à vérifier que le contenu reste accessible en mode Couleurs forcées.

Contraste élevé

Certains utilisateurs peuvent également configurer leur système pour demander un contraste plus élevé. Vous pouvez ajuster vos styles en réponse à la requête média prefers-contrast: more.

Mouvements réduits

Vous pouvez répondre à la préférence d'un utilisateur pour la réduction des mouvements avec la requête média prefers-reduced-motion. Cette fonctionnalité est souvent utilisée pour proposer d'autres animations qui évitent les mouvements amples pouvant déclencher des crises chez les personnes souffrant d'épilepsie, de troubles vestibulaires ou de sensibilité aux migraines. Pour en savoir plus, consultez Points à prendre en compte lorsque vous travaillez avec des animations.

Script

Vos utilisateurs peuvent visiter votre site avec JavaScript désactivé. Vous pouvez ajuster votre CSS pour qu'ils puissent toujours accéder à votre contenu à l'aide de la requête média scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Vérifier que vous avez bien compris

Tester vos connaissances sur les fonctionnalités multimédias