Fonctionnalités multimédias

Un récapitulatif de toutes les façons dont les fonctionnalités multimédias vous permettent de répondre aux appareils et préférences.

Le responsive design ne serait pas possible sans les requêtes média. Avant les requêtes média, il n'existait aucun moyen de savoir quel type d'appareil les internautes utilisaient pour consulter votre site Web. Les concepteurs devaient faire des suppositions. Ces hypothèses ont été encodées sous forme de conceptions à largeur fixe ou de mises en page liquides.

Tout cela a changé avec l'introduction des requêtes média. Pour la première fois, les concepteurs pouvaient rencontrer les gens à mi-chemin. Les concepteurs pouvaient ajuster leurs mises en page pour répondre aux appareils des gens.

N'oubliez pas qu'une requête média comprend un type de média facultatif et une fonctionnalité média obligatoire. Les types de médias n'ont pas beaucoup évolué au fil des ans. Il n'y a toujours que quatre valeurs possibles:

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

Les fonctionnalités multimédias, en revanche, se sont considérablement développées. Les concepteurs peuvent désormais rencontrer les utilisateurs au-delà de la moitié, en adaptant les conceptions à bien plus que la simple taille de l'écran.

Navigateurs pris en charge

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 3. <ph type="x-smartling-placeholder">

Source

Dimensions de la fenêtre d'affichage

Les requêtes média les plus populaires sur le Web sont de loin celles qui concernent 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. Vous pouvez également utiliser la fonctionnalité multimédia min-width pour appliquer des styles au-delà 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 des styles de mise en page de façon 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. Avec min-height, vous pouvez introduire d'autres 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 si l'espace vertical est suffisant.

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

Toutefois, vous pouvez utiliser la fonctionnalité multimédia max-height si vous préférez. Ici, l'en-tête est ancré par défaut, mais l'persistance est supprimée si l'espace vertical est insuffisant.

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

Le choix des préfixes min- et max- ne s'applique pas uniquement à width et height. La fonctionnalité multimédia aspect-ratio offre le même choix. Il propose également une version sans préfixe si vous souhaitez appliquer des styles avec 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 pourrait rapidement devenir incontournable. Si vous n'avez pas besoin d'un contrôle aussi précis, la fonctionnalité multimédia orientation est peut-être mieux adaptée à vos besoins. Deux valeurs sont possibles: portrait ou landscape.

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

Même si le terme "portrait" et "paysage" servent le plus souvent à faire référence à l'orientation des appareils mobiles. La fonctionnalité multimédia orientation n'est pas spécifique à l'appareil. Une fenêtre de navigateur en plein écran sur un ordinateur portable standard présente une valeur orientation de landscape.

Écrans

Les densités de pixels sont différentes selon les écrans. Elles se mesurent en dpi (points par pouce). Vous pouvez ajuster vos styles pour différentes densités de pixels à l'aide de la fonctionnalité multimédia resolution. Comme aspect-ratio, resolution se décline en trois types: 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 n'est généralement un problème que pour les images, et les images responsives permettent de la gérer directement en HTML.

D'autre part, CSS vous permet de définir vos animations et vos transitions. Vous pouvez ajuster ces animations et transitions pour qu'elles réagissent aux différentes fréquences d'actualisation à l'aide de la fonctionnalité multimédia update. Cette fonctionnalité multimédia signale 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. Une page imprimée, par exemple, ne peut pas être mise à jour.

Une valeur update définie sur slow signifie que l'écran ne peut pas s'actualiser rapidement. Un écran e-Ink est un exemple d'écran dont la fréquence d'actualisation est lente.

Si la valeur update est fast, l'affichage 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'écran ne sont pas liés aux capacités matérielles. Dans le module sur la thématisation, vous avez appris à définir des propriétés dans un fichier manifeste d'application Web. L'une de ces propriétés s'appelle display, et vous pouvez lui attribuer la valeur fullscreen, standalone, minimum-ui ou browser. La fonctionnalité multimédia display-mode correspondante vous permet d'adapter vos styles à ces différentes options.

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

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

Couleur

De nombreuses fonctionnalités multimédias permettent d'interroger les capacités de couleur d'un appareil. Si vous souhaitez ajuster vos styles pour un écran qui ne génère que des nuances de gris, vous pouvez utiliser la fonctionnalité multimédia monochrome sans aucune valeur.

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

Il existe une fonctionnalité multimédia color correspondante.

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

Pour les écrans couleur, vous pouvez écrire des requêtes à l'aide des fonctionnalités multimédias color-gamut, color-index ou dynamic-range. Ils fournissent tous des détails 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é multimédia dynamic-range, qui indique la combinaison de la luminosité maximale, de la profondeur des couleurs et du rapport de contraste de l'écran. Les valeurs possibles sont standard ou high. Un écran haute définition qui indique une valeur dynamic-range de high reçoit un espace de couleurs différent à 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.

Préférences

Il existe différentes requêtes média qui vous permettent de répondre aux préférences des utilisateurs: prefers-color-scheme, prefers-contrast et prefers-reduced-motion. Pour en savoir plus, consultez les modules sur la thématisation et l'accessibilité.

Vous pouvez combiner des fonctionnalités multimédias dans une même requête média. Vous pouvez définir la portée de vos styles d'animation afin qu'ils ne soient appliqués que si l'appareil présente une fréquence d'actualisation rapide et que l'utilisateur n'a pas exprimé de préférence pour la réduction des mouvements.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Plus de fonctionnalités multimédias

D'autres fonctionnalités multimédias seront bientôt disponibles.

Les fonctionnalités multimédias forced-colors et inverted-colors indiquent si un appareil utilise une palette de couleurs restreinte ou inversée.

Une fonctionnalité multimédia scripting vous permet d'ajuster votre CSS en fonction de la disponibilité de JavaScript.

Une fonctionnalité multimédia appelée prefers-reduced-data permettra aux utilisateurs d'indiquer qu'ils utilisent une connexion limitée afin que vous puissiez envoyer des éléments plus petits ou plus petits.

D'autres propositions sont toujours en cours de formulation. Dans le prochain et dernier module, vous découvrirez une proposition de fonctionnalité multimédia qui gère différentes configurations d'écran.

Testez vos connaissances

Tester vos connaissances sur les fonctionnalités multimédias

Une requête média peut rechercher un appareil à une largeur spécifique, comme @media (width: 1024px) ?

Vrai
Vous ne pouvez obtenir une largeur spécifique qu'en vérifiant simultanément la largeur supérieure à 1023px et inférieure à 1025px.
Faux
min-width et max-width sont les éléments disponibles.

Une requête média peut rechercher un appareil à un niveau aspect-ratio spécifique, par exemple @media (aspect-ratio: 4/3) ?

Vrai
Un seul format peut être mis en correspondance.
Faux
Cette option existe pour aspect-ratio.

Quelles sont les requêtes média en couleur valides ?

@media (color)
Correspond à n'importe quel appareil de couleur.
@media (monochrome)
Correspond à n'importe quel appareil sans capacité de couleur.
@media (color-gamut: srgb)
Correspond aux appareils compatibles avec les couleurs sRVB.
@media (min-color-index: 15000)
Correspond aux appareils avec au moins 15 000 couleurs disponibles.
@media (dynamic-range: high)
Correspond aux appareils compatibles avec les plages de couleurs HD.

Parmi les requêtes média de préférence utilisateur suivantes, lesquelles sont valides ?

@media (prefers-color-scheme: dark)
Correspond lorsque le système d'exploitation d'un utilisateur est défini en mode sombre.
@media (prefers-colors: high-definition)
Pas vrai.
@media (prefers-reduced-motion: reduce)
Correspondance lorsque le système d'exploitation d'un utilisateur est configuré pour réduire les mouvements.
@media (prefers-contrast: more)
Correspond lorsque le système d'exploitation d'un utilisateur est configuré sur des contrastes plus élevés.
@media (prefers-site-speed: fast)
Pas vrai.