Catégories
Astuces et Design

Un guide complet des requêtes multimédias CSS

Les requêtes multimédias sont un moyen de cibler le navigateur en fonction de certaines caractéristiques, fonctionnalités et préférences de l'utilisateur, puis d'appliquer des styles ou d'exécuter d'autres codes basés sur ces éléments. Les requêtes multimédias les plus courantes dans le monde sont peut-être celles qui ciblent des plages de fenêtres particulières et appliquent des styles personnalisés, ce qui a donné naissance à l'idée même de la conception réactive.

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

Il y a beaucoup d'autres choses que nous pouvons cibler à côté de la largeur de la fenêtre. Cela peut être la résolution de l'écran, l'orientation de l'appareil, les préférences du système d'exploitation ou encore plus parmi une multitude de choses que nous pouvons interroger et utiliser pour styliser le contenu.

Vous recherchez une liste rapide des requêtes multimédias basées sur les fenêtres des appareils standard, tels que les téléphones, les tablettes et les ordinateurs portables? Découvrez notre collection d'extraits.

Utilisation des requêtes multimédias

Les requêtes multimédias sont généralement associées au CSS, mais elles peuvent également être utilisées en HTML et JavaScript.

HTML

Il existe plusieurs façons d'utiliser les requêtes multimédias directement en HTML.

Il y a le élément qui va directement dans le document . Dans cet exemple. nous indiquons au navigateur que nous voulons utiliser différentes feuilles de style à différentes tailles de fenêtre:


  
    
    
    
    
    
    
    
    
    
    
    
    
  
  

Pourquoi voudriez-vous faire ça? Cela peut être un bon moyen d'ajuster les performances de votre site en divisant les styles de manière à ce qu'ils soient téléchargés et diffusés par les appareils qui en ont besoin.

Mais juste pour être clair, ce n'est pas toujours empêcher le téléchargement des feuilles de style qui ne correspondent pas à ces requêtes multimédias, il leur attribue simplement un faible niveau de priorité de chargement. Ainsi, si un appareil à petit écran comme un téléphone visite le site, il téléchargera uniquement les feuilles de style dans les requêtes multimédias qui correspondent à sa taille de fenêtre. Mais si un écran de bureau plus grand apparaît, il téléchargera le groupe entier car il correspond à toutes ces requêtes (enfin, moins la requête d'impression dans cet exemple spécifique).

C'est juste le élément. Comme l'explique notre guide des images réactives, nous pouvons utiliser des requêtes multimédias sur élément, qui informe le élément quelle version d'une image le navigateur doit utiliser à partir d'un ensemble d'options d'image.


  
  
  
  

  
  Un chat calicot avec des lunettes de soleil aviateur sombres.

Encore une fois, cela peut être une belle performance car nous pouvons servir des images plus petites à des appareils plus petits – qui seront vraisemblablement (mais pas toujours) des appareils de faible puissance qui pourraient être limités à un plan de données.

Et n'oublions pas que nous pouvons utiliser les requêtes multimédias directement sur le

CSS

Encore une fois, CSS est l'endroit le plus courant pour repérer une requête multimédia dans la nature. Ils vont directement dans la feuille de style dans un @media règle qui encapsule les éléments avec des conditions pour savoir quand et où appliquer un ensemble de styles lorsqu'un navigateur remplit ces conditions.

/* Viewports between 320px and 480px wide */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  .card {
    background: #bada55;
  }
}

Il est également possible de définir la portée de la feuille de style importée, mais en règle générale, évitez d'utiliser @import car il fonctionne mal.

/* Avoid using @import if possible! */

/* Base styles for all screens */
@import url("style.css") screen;
/* Styles for screens in a portrait (narrow) orientation */
@import url('landscape.css') screen and (orientation: portrait);
/* Print styles */
@import url("print.css") print;

JavaScript

Nous pouvons également utiliser des requêtes multimédias en JavaScript! Et devine quoi? Ils fonctionnent beaucoup comme ils le font en CSS. La différence? Nous commençons par utiliser le window.matchMedia() méthode pour définir les conditions en premier.

Donc, disons que nous voulons enregistrer un message sur la console lorsque le navigateur mesure au moins 768 pixels de large. Nous pouvons créer une constante qui appelle matchMedia() et définit cette largeur d'écran:

// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia( '( min-width: 768px )' )

Ensuite, nous pouvons tirer le journal sur la console lorsque cette condition est remplie:

// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia( '( min-width: 768px )' )


// Check if the media query is true
if ( mediaQuery ) {
  // Then log the following message to the console
  console.log('Media Query Matched!')
}

Malheureusement, cela ne se déclenche qu'une seule fois, donc si l'alerte est rejetée, elle ne se déclenchera pas à nouveau si nous modifions la largeur de l'écran et réessayons sans actualiser. C'est pourquoi il est judicieux d'utiliser un auditeur qui recherche les mises à jour.

// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')


function handleTabletChange(e) {
  // Check if the media query is true
  if (e) {
    // Then log the following message to the console
    console.log('Media Query Matched!')
  }
}


// Register event listener
mediaQuery.addListener(handleTabletChange)

// Initial check
handleTabletChange(mediaQuery)

Consultez l'article complet de Marko Ilic sur "Travailler avec les requêtes multimédias JavaScript" pour en savoir plus sur ce sujet, y compris une comparaison de l'utilisation des requêtes multimédias avec une approche JavaScript plus ancienne qui lie un resize écouteur d'événement qui vérifie window.innerWidth ou window.innerHeight pour déclencher des changements.


Anatomie d'une requête multimédia

Maintenant que nous avons vu plusieurs exemples de les requêtes multimédias peuvent être utilisées, distinguons-les et voyons ce qu'elles font réellement.

@médias

@media (media-type) ((media-feature)) {
  /* Styles! */
}

Le premier ingrédient d'une recette de requête multimédia est le @media règle elle-même, qui est l'une des nombreuses règles du CSS. Pourquoi @media attirer toute l'attention? Parce qu'il est adapté à la type des médias avec lesquels un site est consulté, Caractéristiques ce type de support prend en charge, et les opérateurs qui peuvent être combinés pour mélanger et assortir des conditions simples et complexes.

Types de médias

@media screen {
  /* Styles! */
}

Quel type de média essayons-nous de cibler? Dans de nombreux cas (sinon la plupart), vous verrez un screen valeur utilisée ici, ce qui est logique car de nombreux types de supports que nous essayons de faire correspondre sont des appareils auxquels des écrans sont attachés.

Mais les écrans ne sont pas le seul type de média que nous pouvons cibler, bien sûr. Nous en avons quelques-uns, notamment:

  • all: Correspond à tous les appareils
  • print: Correspond aux documents affichés dans un aperçu avant impression ou à tout support qui divise le contenu en pages destinées à être imprimées.
  • screen: Associe les appareils avec un écran
  • speech: Correspond aux appareils qui lisent le contenu de manière audible, comme un lecteur d'écran. Cela remplace le désormais obsolète aural tapez depuis le niveau 4 des requêtes multimédias.

Pour prévisualiser les styles d'impression dans un écran, tous les principaux navigateurs peuvent émuler la sortie d'une feuille de style d'impression à l'aide de DevTools. Autres types de supports tels que tty, tv, projection, handheld, braille, embossed et aural ont été obsolètes et, bien que la spécification continue de conseiller aux navigateurs de les reconnaître, ils doivent s'évaluer à rien. Si vous utilisez l'un de ceux-ci, envisagez de le changer pour une approche moderne.

Fonctionnalités multimédias

Une fois que nous avons défini le type de média que nous essayons de faire correspondre, nous pouvons commencer à définir les fonctionnalités auxquelles nous essayons de le faire correspondre. Nous avons examiné de nombreux exemples qui correspondent à la largeur des écrans, où screen est le type et les deux min-width et max-width sont Caractéristiques avec des valeurs spécifiques.

Mais il y a beaucoup, beaucoup (beaucoup!) Plus de «fonctionnalités» que nous pouvons égaler. Media Queries Level 4 regroupe 18 fonctionnalités multimédias en 5 catégories.

Caractéristiques de la fenêtre / page

Fonctionnalité Résumé Valeurs Ajoutée
width Définit les largeurs de la fenêtre. Cela peut être un nombre spécifique (par ex. 400px) ou une plage (en utilisant min-width et max-width).
height Définit la hauteur de la fenêtre. Cela peut être un nombre spécifique (par ex. 400px) ou une plage (en utilisant min-height et max-height).
aspect-ratio Définit le rapport hauteur / largeur de la fenêtre
orientation La façon dont l'écran est orienté, comme la hauteur (portrait) ou large (landscape) en fonction de la rotation de l'appareil. portrait

landscape

overflow-block Vérifie comment l'appareil traite le contenu qui déborde de la fenêtre dans la direction du bloc, ce qui peut être scroll (permet le défilement), optional-paged (permet le défilement et les sauts de page manuels), paged (divisé en pages), et none (Pas affichée). scroll

optional-paged

paged

Requêtes média niveau 4
overflow-inline Vérifie si le contenu qui déborde de la fenêtre le long de l'axe en ligne peut faire défiler, ce qui est soit none (pas de défilement) ou scroll (permet le défilement). scroll

none

Requêtes média niveau 4

Qualité d'affichage

Fonctionnalité Résumé Valeurs Ajoutée
resolution Définit la densité de pixels cible de l'appareil

infinite

scan Définit le processus de numérisation de l'appareil, c'est-à-dire la façon dont l'appareil peint une image sur l'écran (où interlace dessine des lignes paires et impaires en alternance, et progressive les dessine tous en séquence). interlace

progressive

grid Détermine si l'appareil utilise une grille (1) ou bitmap (0) écran 0 = Bitmap
1 = Grille
Requêtes média niveau 5
update Vérifie la fréquence à laquelle l'appareil peut modifier l'apparence du contenu (s'il le peut), avec des valeurs comprenant none, slow et fast. slow

fast

none

Requêtes média niveau 4
environment-blending L'invention concerne un procédé pour déterminer l'environnement externe d'un appareil, tel que des endroits sombres ou excessivement lumineux. opaque

additive

subtractive

display-mode Teste le mode d'affichage d'un appareil, y compris fullscreen(pas de navigateur chrome), standalone (une application autonome), minimal-ui (une application autonome, mais avec une certaine navigation), et browser (une fenêtre de navigateur plus traditionnelle) fullscreen

standalone

minimal-ui

browser

Manifeste d'application Web

Couleur

Fonctionnalité Résumé Valeurs Ajoutée
color Définit la prise en charge des couleurs d'un périphérique, exprimée numériquement en bits. Donc, une valeur de 12 serait l'équivalent d'un périphérique prenant en charge la couleur 12 bits, et une valeur de zéro indique qu'il n'y a pas de prise en charge de la couleur.
color-index Définit le nombre de valeurs prises en charge par l'appareil. Cela peut être un nombre spécifique (par ex. 10000) ou une plage (par ex. min-color-index: 10000, max-color-index: 15000), juste comme width.
monochrome Nombre de bits par pixel pris en charge par le monochrome d’un périphérique, où zéro n’est pas une prise en charge monochrome.
color-gamut Définit la gamme de couleurs prise en charge par le navigateur et l'appareil, qui peut être srgb, p3 ou rec2020 srgb

p3

rec2020

Requêtes média niveau 4
dynamic-range Combinaison de la luminosité, de la profondeur de couleur et du rapport de contraste pris en charge par le plan vidéo du navigateur et de la machine utilisateur. standard

high

inverted-colors Vérifie si le navigateur ou le système d'exploitation est configuré pour inverser les couleurs (ce qui peut être utile pour optimiser l'accessibilité pour les malvoyants impliquant la couleur) inverted

none

Requêtes média niveau 5

Interaction

Fonctionnalité Résumé Valeurs Ajoutée
pointer Un peu comme any-pointer mais vérifie si le primaire mécanisme d'entrée est un pointeur et, si tel est le cas, sa précision (où coarse est moins précis, fine est plus précis, et none n'est pas un pointeur). coarse

fine

none

Requêtes média niveau 4
hover Un peu comme any-hover mais vérifie si le primaire mécanisme d'entrée (par exemple, souris tactile) permet à l'utilisateur de survoler les éléments hover

none

Requêtes média niveau 4
any-pointer Vérifie si l'appareil utilise un pointeur, tel qu'une souris ou des styles, ainsi que sa précision (où coarse est moins précis et fine est plus précis) coarse

fine

none

Requêtes média niveau 4
any-hover Vérifie si l'appareil est capable de survoler des éléments, comme avec une souris ou un stylet. Dans certains cas rares, les appareils tactiles sont capables de survoler. hover

none

Requêtes média niveau 4

Préfixe vidéo

La spécification fait référence aux agents utilisateurs, y compris les téléviseurs, qui rendent la vidéo et les graphiques dans deux plans distincts ayant chacun leurs propres caractéristiques. Les caractéristiques suivantes décrivent ces avions.

Fonctionnalité Résumé Valeurs Ajoutée
video-color-gamut Décrit la gamme approximative de couleurs prise en charge par le plan vidéo du navigateur et de la machine utilisateur srgb

p3

rec2020

Requêtes média niveau 5
video-dynamic-range Combinaison de la luminosité, de la profondeur de couleur et du rapport de contraste pris en charge par le plan vidéo du navigateur et de la machine utilisateur. standard

high

Requêtes média niveau 5
video-width¹ La largeur de la zone du plan vidéo de l'affichage ciblé Requêtes média niveau 5
video-height¹ La hauteur de la zone du plan vidéo de l'affichage ciblé Requêtes média niveau 5
video-resolution¹ La résolution de la zone du plan vidéo de l'affichage ciblé

inifinite

Requêtes média niveau 5
¹ En discussion (Issue # 5044)

Scripting

Fonctionnalité Résumé Valeurs Ajoutée
scripting Vérifie si l'appareil autorise les scripts (c'est-à-dire JavaScript) où enabled permet la création de scripts, iniital-only enabled

initial-only

Requêtes média niveau 5

Préférence de l'utilisateur

Fonctionnalité Résumé Valeurs Ajoutée
prefers-reduced-motion Détecte si les paramètres système de l'utilisateur sont définis pour réduire le mouvement sur la page, ce qui constitue un excellent contrôle d'accessibilité. no-preference

reduce

Requêtes média niveau 5
prefers-reduced-transparency Détecte si les paramètres système de l'utilisateur empêchent la transparence entre les éléments. no-preference

reduce

Requêtes média niveau 5
prefers-contrast Détecte si les paramètres système de l’utilisateur sont définis pour augmenter ou diminuer le contraste entre les couleurs. no-preference

high

low

forced

Requêtes média niveau 5
prefers-color-scheme Détecte si l'utilisateur préfère un jeu de couleurs clair ou foncé, qui est une façon de plus en plus rapide de créer des interfaces en «mode sombre». light

dark

Requêtes média niveau 5
forced-colors Teste si le navigateur limite les couleurs disponibles à utiliser (ce qui est none ou active) active

none

Requêtes média niveau 5
prefers-reduced-data Détecte si l'utilisateur préfère utiliser moins de données pour la page à rendre. no-preference

reduce

Requêtes média niveau 5

Obsolète

Nom Résumé Supprimé
device-aspect-ratio Le rapport hauteur / largeur du périphérique de sortie Requêtes média niveau 4
device-height La hauteur de la surface de l'appareil qui affiche les éléments rendus Requêtes média niveau 4
device-width La largeur de la surface de l'appareil qui affiche les éléments rendus Requêtes média niveau 4

Les opérateurs

Les requêtes multimédias prennent en charge les opérateurs logiques comme de nombreux langages de programmation afin que nous puissions faire correspondre les types de médias en fonction de certaines conditions. le @media rule est lui-même un opérateur logique qui déclare essentiellement que «si» les types et fonctionnalités suivants correspondent, alors faites des choses.

and

Mais nous pouvons utiliser le and opérateur si nous voulons cibler les écrans dans une plage de largeurs:

/* Matches screen between 320px AND 768px */
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* Styles! */
  }
}

or (ou séparés par des virgules)

Nous pouvons également utiliser des fonctionnalités séparées par des virgules pour utiliser un or opérateur pour faire correspondre les différents:

/* 
  Matches screens where either the user prefers dark mode or the screen is at least 1200px wide */
@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* Styles! */
  }
}

not

Peut-être voulons-nous cibler les appareils par ce qu'ils font ne pas soutien ou match. Cette déclaration supprime la couleur d'arrière-plan du corps lorsque le périphérique est une imprimante et ne peut afficher qu'une seule couleur.

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}

Avez-vous vraiment besoin de requêtes média?

Media Queries est un outil puissant dans votre boîte à outils CSS avec des joyaux cachés passionnants. Mais si vous adaptez votre conception à toutes les situations possibles, vous vous retrouverez avec une base de code trop complexe à maintenir et, comme nous le savons tous, CSS est comme un ourson: mignon et inoffensif, mais quand il grandira, il vous dévorera vivant.

C’est pourquoi je recommande de suivre le concept de conception universelle de Ranald Mace qui est "la conception de produits utilisables par tous, dans la mesure du possible, sans adaptation ni conception spécialisée. »

À propos de l'accessibilité pour tous Laura Kalbag explique que la différence entre la conception accessible et universelle est subtile mais importante. Un concepteur accessible créerait une grande porte pour que les personnes en chaise roulante puissent entrer, tandis qu'un concepteur universel produirait une entrée que tout le monde conviendrait sans tenir compte de leurs capacités.

Je sais que parler de conception universelle sur le Web est difficile et presque utopique, mais pensez-y, il existe environ 150 navigateurs différents, environ 50 combinaisons différentes de préférences utilisateur, et comme nous l'avons déjà mentionné, plus de 24000 appareils Android différents et uniques seul. Cela signifie qu'il existe au moins 18 millions de cas possibles dans lesquels votre contenu peut être affiché. Dans les mots du fantastique Miriam Suzanne «CSS ici essayant de faire de la conception graphique de contenu inconnu sur un canevas infini et inconnu, à travers les systèmes d'exploitation, les interfaces et les langues. Il n’ya aucun moyen pour aucun d’entre nous de savoir ce que nous faisons. »

C’est pourquoi il est vraiment dangereux de supposer. Ainsi, lorsque vous concevez, développez et réfléchissez à vos produits, laissez les hypothèses derrière vous et utilisez des requêtes multimédias pour vous assurer que votre contenu s’affiche correctement dans tous les contacts et avant tout utilisateur.


En utilisant min- et max- pour correspondre aux plages de valeurs

De nombreuses fonctionnalités multimédias décrites dans la section précédente, notamment width, height, color et color-index - peut être préfixé par min- ou max- pour exprimer des contraintes minimales ou maximales. Nous les avons déjà vus dans de nombreux exemples, mais le fait est que nous pouvons créer une plage de valeurs à faire correspondre au lieu d'avoir à déclarer des valeurs spécifiques.

Dans l'extrait de code suivant, nous peignons l'arrière-plan du corps en violet lorsque la largeur de la fenêtre est plus large que 30em et plus étroite que 80em. Si la largeur de la fenêtre ne correspond pas à cette plage de valeurs, elle reviendra au blanc.

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

Media Queries Level 4 spécifie une nouvelle syntaxe plus simple utilisant less then (>), plus grand que (<) Et égale (=) les opérateurs. Malheureusement, au moment de la rédaction de cet article, il n'est pris en charge par aucun navigateur majeur.


Nesting et prise de décision complexe

CSS vous permet d'imbriquer des règles at ou des instructions de groupe en utilisant des parenthèses, ce qui permet d'aller aussi loin que nous le souhaitons pour évaluer des opérations complexes.

@media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... }
}

Faites attention! même s'il est possible de créer des expressions puissantes et complexes, vous pourriez vous retrouver avec une requête très opiniâtre et difficile à gérer. Comme le dit Brad Frost: «Plus nos interfaces sont complexes, plus nous devons réfléchir pour les maintenir correctement.»


Accessibilité

La plupart des fonctionnalités ajoutées dans Media Queries Level 4 sont centrées sur l'accessibilité.

prefers-reduced-motion

prefers-reduced-motion détecte si l'utilisateur a activé la préférence de mouvement réduit pour minimiser la quantité de mouvements et d'animations. Il prend deux valeurs:

  • no-preference: Indique que l'utilisateur n'a fait connaître aucune préférence au système.
  • reduce: Indique que l'utilisateur a notifié au système qu'il préférait une interface qui minimise la quantité de mouvement ou d'animation, de préférence au point où tout mouvement non essentiel est supprimé.

Cette préférence est généralement utilisée par les personnes qui souffrent de troubles vestibulaires ou de vertiges, où différents mouvements entraînent une perte d'équilibre, une migraine, des nausées ou une perte auditive. Si vous avez déjà essayé de tourner rapidement et que vous avez le vertige, vous savez ce que cela fait.

Dans un article fantastique d'Eric Bailey, il suggère d'arrêter toutes les animations avec ce code:

@media screen and (prefers-reduced-motion: reduce) {  
  * {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

Les frameworks populaires tels que Bootstrap ont cette fonctionnalité activée par défaut. À mon avis, il n'y a aucune excuse pour ne pas utiliser prefers-reduced-motion - utilisez-le simplement.

prefers-contrast

le prefers-contrast La fonction indique si l'utilisateur a choisi d'augmenter ou de réduire le contraste dans ses préférences système ou dans les paramètres du navigateur. Il prend trois valeurs:

  • no-preference: Lorsqu'un utilisateur n'a fait connaître aucune préférence au système. Si vous l'utilisez comme valeur booléenne, la valeur est false.
  • high: Lorsqu'un utilisateur a sélectionné l'option pour afficher un niveau de contraste plus élevé.
  • low: Lorsqu'un utilisateur a sélectionné l'option pour afficher un niveau de contraste inférieur.

Au moment de l'écriture, cette fonctionnalité n'est prise en charge par aucun navigateur. Microsoft a réalisé une implémentation antérieure non standard avec le -ms-high-contrast fonctionnalité qui fonctionne uniquement sur Microsoft Edge v18 ou version antérieure (mais pas sur les versions basées sur Chromium).

.button {
  background-color: #0958d8;
  color: #fff;
}

@media (prefers-contrast: high) {
  .button {
    background-color: #0a0db7;
  }
}

Cet exemple augmente le contraste d'un bouton de classe de AA à AAA lorsque l'utilisateur a un contraste élevé.

inverted-colors

le inverted-colors La fonction indique si l'utilisateur a choisi d'inverser les couleurs sur ses préférences système ou les paramètres du navigateur. Parfois, cette option est utilisée comme alternative au contraste élevé. Il prend trois valeurs:

  • none: Lorsque les couleurs sont affichées normalement
  • inverted: Lorsqu'un utilisateur a sélectionné l'option d'inverser les couleurs

Le problème avec les couleurs investies est qu'elles inverseront également les couleurs des images et des vidéos, les faisant ressembler à des images radiographiques. En utilisant un filtre d'inversion CSS, vous pouvez sélectionner toutes les images et vidéos et les inverser.

@media (inverted-colors) {
  img, video { 
    filter: invert(100%);
  }
}

Au moment de la rédaction de cet article, cette fonctionnalité n'est prise en charge que par Safari.

prefers-color-scheme

Avoir une palette de couleurs "mode sombre" est quelque chose que nous voyons beaucoup plus de ces jours, et grâce à la prefers-color-scheme , nous pouvons puiser dans les préférences du système ou du navigateur d’un utilisateur pour déterminer si nous servons un thème «sombre» ou «clair» en fonction des préférences ir.

Il prend deux valeurs:

  • light: Lorsqu'un utilisateur a choisi de préférer un thème clair ou n'a pas de préférences actives
  • dark: Lorsqu'un utilisateur a sélectionné un affichage sombre dans ses paramètres
body {
  --bg-color: white; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: light) {
  body {
    --bg-color: black;
    --text-color:white;
  }
}

Comme l'explique Adhuham dans le guide complet du mode sombre, il y a bien plus que simplement changer la couleur de l'arrière-plan. Avant de passer au mode sombre, souvenez-vous que si vous n’avez pas de stratégie d’implémentation très intelligente, vous risquez de vous retrouver avec une base de code très difficile à maintenir. Les variables CSS peuvent faire des merveilles pour cela, mais c'est un sujet pour un autre article.


Ce qui nous attend?

Media Queries Level 5 est actuellement en état de brouillon de travail, ce qui signifie que beaucoup de choses peuvent changer entre maintenant et quand cela devient une recommandation. Mais il comprend des fonctionnalités intéressantes qui méritent d'être mentionnées car elles ouvrent de nouvelles façons de cibler les écrans et d'adapter les conceptions à des conditions très spécifiques.

Fonctionnalités multimédias de préférence utilisateur

Hé, nous venons de les couvrir dans la dernière section! Tant pis. Ces fonctionnalités sont intéressantes car elles sont informées par les paramètres réels d'un utilisateur, qu'ils proviennent de l'agent utilisateur ou même au niveau du système d'exploitation.

Détection d'une palette de couleurs forcée

C'est chouette. Certains navigateurs limiteront le nombre de couleurs disponibles pouvant être utilisées pour rendre les styles. C'est ce qu'on appelle le «mode couleurs forcées» et, s'il est activé dans les paramètres du navigateur, l'utilisateur peut choisir un ensemble limité de couleurs à utiliser sur une page. En conséquence, l'utilisateur est en mesure de définir des combinaisons de couleurs et des contrastes qui rendent le contenu plus confortable à lire.

le forced-colors La fonction nous permet de détecter si une palette de couleurs forcée est utilisée avec le active valeur. En cas de correspondance, le navigateur doit fournir la palette de couleurs requise via les couleurs du système CSS. Le navigateur dispose également d'une marge de manœuvre pour déterminer si la couleur d'arrière-plan de la page est claire ou foncée et, le cas échéant, déclencher les prefers-color-scheme valeur afin que nous puissions ajuster la page.

Détection de la luminosité maximale, de la profondeur de couleur et du rapport de contraste

Certains appareils (et navigateurs) sont capables d'afficher des écrans très lumineux, de restituer une large gamme de couleurs et de rapports de contraste élevés entre les couleurs. Nous pouvons détecter ces appareils en utilisant le dynamic-range fonction, où le high le mot clé correspond à ces appareils et standard correspond à tout le reste.

Nous verrons probablement des changements à ce sujet car, pour le moment, il existe encore des incertitudes sur les mesures qui constituent des niveaux de luminosité et de contraste «élevés». Le navigateur peut arriver à faire cette détermination.

Fonctionnalités avec préfixe vidéo

La spécification parle de certains écrans, comme les téléviseurs, qui sont capables d'afficher la vidéo et les graphiques sur des «plans» séparés, ce qui pourrait être un moyen de distinguer l'image vidéo des autres éléments de l'écran. En tant que tel, Media Queries Level 5 propose un nouvel ensemble de fonctionnalités multimédias visant à détecter les caractéristiques vidéo, y compris la gamme de couleurs et la plage dynamique.

Il existe également des propositions pour détecter la hauteur, la largeur et la résolution de la vidéo, mais le jury ne sait toujours pas si ce sont les bonnes façons d'aborder la vidéo.


Prise en charge du navigateur

Les navigateurs continuent d'évoluer et comme au moment où vous lirez ce message, il est probable que la prise en charge de cette fonctionnalité par le navigateur puisse changer, veuillez consulter le tableau de compatibilité des navigateurs mis à jour par MDN.


Une note sur les requêtes de conteneur

Ne serait pas cool si les composants pouvaient s’adapter à leur propre taille au lieu de celle du navigateur? C’est ce que le concept de requêtes de conteneur est tout au sujet. Nous n'avons actuellement que l'écran du navigateur pour effectuer ces modifications via des requêtes multimédias. C'est malheureux, car la fenêtre d'affichage n'est pas toujours une relation directe avec la taille de l'élément lui-même. Imaginez un widget qui rend dans de nombreux contextes différents sur un site: parfois dans une barre latérale, parfois dans un pied de page pleine largeur, parfois dans une grille avec des colonnes inconnues.

C'est le problème que l'idée insaisissable des requêtes de conteneur tente de résoudre. Idéalement, nous pourrions adapter les styles d'un élément en fonction de sa taille plutôt que de la taille de la fenêtre. Mais les requêtes de conteneur n'existent pas encore. Le WICG recherche des cas d'utilisation et c'est une fonctionnalité très demandée. Nous voyons des mouvements occasionnels, mais nous ne savons pas si nous y parviendrons un jour. Mais quand nous le faisons, vous pouvez parier que cela aura également un impact sur la façon dont nous abordons les requêtes des médias.

En attendant, vous pouvez rattraper l'histoire d'origine des requêtes de conteneur pour plus de contexte.


Exemples

Examinons quelques exemples de requêtes multimédias. Il y a tellement de combinaisons de types de médias, de fonctionnalités et d'opérateurs que le nombre de possibilités que nous pourrions montrer serait exhaustif. Au lieu de cela, nous en mettrons en évidence une poignée en fonction de fonctionnalités multimédias spécifiques.

Ajuster la mise en page à différentes largeurs de fenêtre

Plus d'informations

C'est probablement la fonction multimédia la plus utilisée. Il indique la largeur de la fenêtre du navigateur, y compris la barre de défilement. Il a déverrouillé l'implémentation CSS de ce qu'Ethan Marcotte a inventé design réactif: un processus par lequel une conception répond à la taille de la fenêtre en utilisant une combinaison d'une grille fluide, d'images flexibles et d'une composition réactive.

Plus tard, Luke Wroblewski a fait évoluer le concept de design réactif en introduisant le terme mobile d'abord, en encourageant les concepteurs et les développeurs à commencer par l'expérience du petit écran, puis à améliorer progressivement l'expérience à mesure que la largeur de l'écran et les capacités de l'appareil augmentent. Un mobile-first peut généralement être repéré grâce à l'utilisation de min-width au lieu de max-width. Si nous commençons par min-width, nous disons essentiellement, "Hé, navigateur, commencez ici et travaillez." D'un autre côté, max-width c'est un peu comme donner la priorité aux écrans plus grands.

Une approche pour définir les points d'arrêt par largeur consiste à utiliser les dimensions des appareils standard, comme le exact largeur de pixel d'un iPhone. Mais il y a beaucoup, beaucoup (beaucoup), beaucoup de téléphones, de tables, d'ordinateurs portables et d'ordinateurs de bureau différents. En regardant uniquement Android, il existe plus de 24 000 variantes de tailles de fenêtres, de résolutions, de systèmes d'exploitation et de navigateurs, en août 2015. Ainsi, tout en ciblant la largeur précise d'un appareil spécifique peut être utile pour le dépannage ou des correctifs ponctuels, ce n'est probablement pas la solution la plus robuste pour maintenir une architecture réactive. Ce n’est pas du tout une idée nouvelle. Brad Frost prêchait déjà les vertus de laisser le contenu - et non les appareils - déterminer les points d'arrêt dans son article «7 habitudes de requêtes médiatiques très efficaces» publié en 2013.

Et même si les requêtes multimédias restent un outil valable pour créer des interfaces réactives, il existe de nombreuses situations dans lesquelles il est possible d'éviter du tout d'utiliser la largeur. Le CSS moderne nous permet de créer des mises en page flexibles avec une grille CSS et un flex qui adapte notre contenu à la taille de la fenêtre sans avoir besoin d'ajouter des points d'arrêt. Par exemple, voici une disposition en grille qui adapte le nombre de colonnes qu'elle aura sans aucune requête multimédia.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Il existe de nombreux articles sur la réflexion au-delà de la largeur, j'en ai écrit il y a quelques années et je recommande de consulter les dix mises en page modernes d'Una Kravet dans une seule ligne de CSS.


Mode sombre

Plus d'informations

Cet exemple est tiré directement de notre Guide du mode sombre sur le Web. L’idée est que nous pouvons détecter si les paramètres système d’un utilisateur sont configurés en mode clair ou sombre à l’aide du prefers-color-scheme et définissez un autre jeu de couleurs pour l'interface utilisateur rendue.

La combinaison de cette technique avec des propriétés personnalisées CSS rend les choses encore plus faciles car elles agissent comme des variables que nous ne devons définir qu'une seule fois, puis utiliser tout au long du code. Besoin d'échanger les couleurs? Modifiez la valeur de la propriété personnalisée et elle se met à jour partout. C’est exactement ce que prefers-color-scheme Est-ce que. Nous définissons un ensemble de couleurs en tant que propriétés personnalisées, puis nous les redéfinissons dans une requête multimédia à l'aide du prefer-color-scheme fonction pour changer les couleurs en fonction des paramètres de l'utilisateur.


Détection de l'orientation, du survol et du mouvement sur une galerie de cartes réactive

Plus d'informations

Cette galerie est responsive sans utiliser le width fonctionnalité.

Il détecte le orientation de la fenêtre. Si c'est un portrait fenêtre, la barre latérale deviendra un en-tête; si c'est landscape il reste sur le côté.

En utilisant le pointer fonction multimédia, il décide si le périphérique d'entrée principal est coarse - comme un doigt - ou fine - comme un curseur de souris - pour définir la taille des zones cliquables des cases à cocher.

Ensuite, en utilisant le hover fonction multimédia, l'exemple vérifie si l'appareil est capable de survoler (comme un curseur de souris) et affiche une case à cocher dans chaque carte.

Les animations sont supprimées lorsque prefers-reduced-motion est réglé sur reduce.

Et avez-vous remarqué quelque chose? Nous sommes en fait ne pas en utilisant des requêtes multimédias pour la mise en page et le dimensionnement réels des cartes! Cela est géré à l'aide de minmax() fonction sur le .container élément pour montrer à quel point la conception réactive ne signifie pas toujours utiliser des requêtes multimédias.

En bref, c'est une application entièrement réactive sans jamais mesurer width ou faire des hypothèses.

Cibler un iPhone en mode paysage

/* iPhone X Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  /* Styles! */
}

Plus d'informations

le orientation La fonction multimédia teste si un périphérique est tourné dans le sens large (paysage) ou dans le sens vertical (portrait).

Bien que les requêtes multimédias ne puissent pas savoir exactement quel appareil est utilisé, nous pouvons utiliser les dimensions exactes d'un appareil spécifique. L'extrait ci-dessus cible l'iPhone X.

Appliquer un en-tête collant pour les grandes fenêtres

Plus d'informations

Dans l'exemple ci-dessus, nous utilisons height pour détacher les éléments fixes et éviter de prendre trop de place sur l'écran lorsque l'écran est trop court. Une barre de navigation horizontale est dans une position fixe lorsque l'écran est grand, mais se détache sur les écrans plus courts.

Comme le width fonctionnalité, height détecte la hauteur de la fenêtre, y compris la barre de défilement. Beaucoup d'entre nous naviguent sur le Web sur de petits appareils avec des fenêtres étroites, ce qui rend la conception pour différentes hauteurs plus pertinente que jamais. Anthony Colangelo décrit comment Apple utilise le height fonction multimédia de manière significative pour gérer la taille de l'image du héros lorsque la hauteur de la fenêtre change.


Typographie responsive (fluide)

Plus d'informations

Une police peut paraître trop grande ou trop petite, selon la taille de l'écran qui l'affiche. Si nous travaillons sur un petit écran, il est probable que nous souhaitons utiliser un texte plus petit que celui que nous utiliserions sur un écran beaucoup plus grand.

L'idée ici est que nous utilisons la largeur du navigateur pour redimensionner la taille de la police. Nous définissons une taille de police par défaut sur le qui agit comme la taille de police «petite», puis définissez une autre taille de police à l'aide d'une requête multimédia qui agit comme la taille de police «grande». Au milieu? Nous définissons à nouveau la taille de la police, mais dans une autre requête multimédia qui calcule une taille en fonction de la largeur du navigateur.

La beauté de ceci est que cela permet à la taille de la police de s'ajuster en fonction de la largeur du navigateur, mais ne dépasse jamais ou ne dépasse jamais certaines tailles. Cependant, il existe un moyen beaucoup plus simple de procéder qui ne nécessite aucune requête multimédia, grâce aux nouvelles fonctionnalités CSS, telles que min(), max(), et clamp().


Fournissez des cibles tactiles plus grandes lorsque les appareils course aiguille

Plus d'informations

Avez-vous déjà visité un site qui avait super petits boutons? Certains d'entre nous ont de gros doigts, ce qui rend difficile de taper sur un objet avec précision sans taper par inadvertance sur autre chose.

Bien sûr, nous pouvons compter sur le width pour savoir si nous avons affaire à un petit écran, mais nous pouvons également détecter si l'appareil est capable de survoler des éléments. Si ce n'est pas le cas, il s'agit probablement d'un appareil tactile, ou peut-être d'un appareil prenant en charge les deux, comme le Microsoft Surface.

La démo ci-dessus utilise des cases à cocher comme exemple. Les cases à cocher peuvent être difficiles à cocher lorsque vous les visualisez sur un petit écran, nous augmentons donc la taille et ne nécessitent pas de survol si l'appareil est incapable de hover événements.

Encore une fois, cette approche n’est pas toujours exacte. Consultez l'article détaillé de Patrick Lauke qui détaille les problèmes potentiels avec hover, pointer, any-hover et any-pointer.

Caractéristiques


Un merci spécial à Sarah Rambacher qui a aidé à réviser ce guide.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *