Fonctionnalités multimédias

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

Le responsive design ne serait pas possible sans les requêtes multimédias. Avant les requêtes multimédias, il n'était pas possible de savoir quel type d'appareil les utilisateurs utilisaient pour accéder à votre site Web. Les concepteurs ont dû faire des suppositions. 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 multimédias. Pour la première fois, les concepteurs pouvaient trouver un compromis. Les concepteurs peuvent ajuster leurs mises en page en fonction des appareils des utilisateurs.

N'oubliez pas qu'une requête multimédia comprend un type de contenu multimédia facultatif et une fonctionnalité multimédia obligatoire. Les types de médias 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 multimédias ont beaucoup évolué. Les concepteurs peuvent désormais aller plus loin que la moitié de la route, en adaptant les conceptions à bien plus que la taille de l'écran.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Dimensions de la fenêtre d'affichage

Les requêtes multimédias les plus populaires sur le Web sont celles qui concernent la largeur de la fenêtre d'affichage. Mais même là, 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 des styles de mise en page de manière additive. J'ajoute 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 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 préférez. Ici, l'en-tête est ancré par défaut, mais la persistance est supprimée 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é 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 ratio exact de largeur sur 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 incontrôlable. Si vous n'avez pas besoin d'un tel niveau de contrôle, la fonctionnalité multimédia orientation peut mieux répondre à vos besoins. Il accepte 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.
}

Même si les termes "portrait" et "paysage" sont le plus souvent utilisés pour désigner 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 aura une valeur orientation de landscape.

Écrans

Les écrans ont des densités de pixels différentes, mesurées 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 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 multimédias 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.

En revanche, c'est dans le CSS que vous définissez vos animations et vos transitions. Vous pouvez ajuster ces animations et ces transitions pour qu'elles répondent à différents taux de rafraîchissement à l'aide de la fonctionnalité multimédia update. Cette fonctionnalité multimédia indique 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, vous ne pouvez pas mettre à jour une page imprimée.

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

Une valeur update de fast signifie que l'écran s'actualise suffisamment 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 fonctionnalités matérielles. Dans le module sur la thématisation, vous avez vu comment définir des propriétés dans un fichier 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é multimédia display-mode correspondante vous permet d'adapter vos styles à ces différentes options.

Imaginons 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 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 fonctionnalités de couleur d'un appareil. Si vous souhaitez ajuster vos styles pour tout écran qui n'affiche que des nuances de gris, vous pouvez utiliser la fonctionnalité multimédia monochrome sans 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 avec les fonctionnalités multimédias color-gamut, color-index ou dynamic-range. Ils fournissent tous 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é multimédia dynamic-range, qui indique la combinaison de luminosité maximale, de profondeur de couleur et 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 se voit attribuer un espace colorimétrique 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

De nombreux requêtes multimédias 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 multimédia. Vous pouvez définir la portée de vos styles d'animation afin qu'ils ne soient appliqués que si l'appareil dispose d'une fréquence d'actualisation élevée et que l'utilisateur n'a pas exprimé de préférence pour une réduction du mouvement.

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

Autres fonctionnalités multimédias

D'autres fonctionnalités multimédias seront disponibles prochainement.

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 permet aux utilisateurs de spécifier qu'ils utilisent une connexion limitée afin que vous puissiez envoyer des composants plus petits ou moins nombreux.

D'autres propositions sont 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.

Vérifier vos connaissances

Tester vos connaissances sur les fonctionnalités multimédias

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

Vrai
Pour obtenir une largeur spécifique, vous devez vérifier simultanément si la largeur est supérieure à 1023px et inférieure à 1025px.
Faux
min-width et max-width sont disponibles.

Une requête multimédia peut-elle rechercher un appareil à un aspect-ratio spécifique, comme @media (aspect-ratio: 4/3) ?

Vrai
Contrairement aux autres formats, un seul format peut être associé.
Faux
Cette option existe pour aspect-ratio.

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

@media (color)
S'adapte à n'importe quel appareil de couleur.
@media (monochrome)
Correspond à tous les appareils sans fonctionnalité 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.

Quelles requêtes multimédias basées sur les préférences utilisateur sont valides ?

@media (prefers-color-scheme: dark)
Correspond à la situation où le système d'exploitation de l'utilisateur est défini sur le mode sombre.
@media (prefers-colors: high-definition)
Ce n'est pas vrai.
@media (prefers-reduced-motion: reduce)
Correspond à la situation où le système d'exploitation de l'utilisateur est configuré pour réduire les mouvements.
@media (prefers-contrast: more)
Correspond à la configuration du système d'exploitation de l'utilisateur, qui est définie sur des contrastes plus élevés.
@media (prefers-site-speed: fast)
Ce n'est pas vrai.