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 requêtes média. Avant les requêtes média, il n'était pas possible de savoir quel type d'appareil les internautes utilisaient pour visiter votre site Web. Les concepteurs devaient faire des suppositions. Ces hypothèses ont été encodées dans des conceptions à largeur fixe ou des 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 des gens à mi-chemin. Les concepteurs pouvaient ajuster leurs mises en page pour répondre aux appareils des gens.
Pour rappel, une requête média comprend un type de support facultatif et une fonctionnalité média obligatoire. Les types de médias n'ont pas beaucoup changé au fil des ans. Il ne reste 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 pour qu’elles s’adaptent bien plus que la taille de l’écran.
Dimensions de la fenêtre d'affichage
Les requêtes média les plus populaires sur le Web sont de loin 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 inférieurs à une certaine largeur, ou utiliser 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. Au lieu d'annuler les règles précédentes, j'ajoute de nouvelles règles de mise en page à chaque point d'arrêt.
Cette approche cumulative fonctionne également pour la hauteur. Avec min-height, vous pouvez introduire davantage de 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;
}
}
Si vous préférez, vous pouvez toutefois utiliser la fonctionnalité multimédia max-height. Ici, l'en-tête est ancré par défaut. Toutefois, si l'espace vertical est insuffisant, vous ne pouvez plus le coller.
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. Elle propose également une version sans préfixe si vous souhaitez appliquer des styles à un rapport largeur/hauteur exact.
@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 pourrait mieux répondre à vos besoins. Il a deux valeurs possibles: 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é multimédia orientation n'est pas spécifique à l'appareil. Sur un ordinateur portable standard, la valeur du paramètre orientation d'une fenêtre de navigateur en plein écran est landscape.
Écrans
La densité de pixels varie selon les écrans, 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 est disponible en trois types: minimal, maximal 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 concerne généralement que les images, et 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 transitions pour qu'elles s'adaptent à différentes fréquences d'actualisation à 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, 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 dont la fréquence d'actualisation est lente.
Une valeur update de fast signifie que l'affichage 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'écran ne sont pas liés aux capacités matérielles. Dans le module sur la thématisation, 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é 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 quelqu'un ajoute votre site à son écran d'accueil, il s'ouvrira 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
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 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 avec les fonctionnalités multimédias color-gamut, color-index ou dynamic-range. Tous ces éléments fournissent 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 signale une valeur dynamic-range de high se voit attribuer un espace de couleur 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
Différentes requêtes média 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 limiter la portée de vos styles d'animation afin qu'ils ne soient appliqués que si l'appareil a une fréquence d'actualisation rapide et que l'utilisateur n'a pas exprimé de préférence pour les mouvements réduits.
@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 limitée ou inversée.
Une fonctionnalité multimédia scripting vous permettra 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 assets plus petits ou moins.
D'autres propositions sont encore 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 permet de rechercher un appareil à une largeur spécifique, comme @media (width: 1024px).
1023px et inférieure à 1025px.min-width et max-width sont les éléments disponibles.Une requête média permet de rechercher un appareil à un aspect-ratio spécifique, comme @media (aspect-ratio: 4/3) ?
aspect-ratio.Quelles sont les requêtes média de couleur valides ?
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)Parmi les requêtes média suivantes, lesquelles sont valides ?
@media (prefers-color-scheme: dark)@media (prefers-colors: high-definition)@media (prefers-reduced-motion: reduce)@media (prefers-contrast: more)@media (prefers-site-speed: fast)