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.
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)
?
1023px
et inférieure à 1025px
.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)
?
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)
Quelles requêtes multimédias basées sur les préférences utilisateur 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)