Émulez différentes fonctionnalités multimédias CSS à l'aide des options d'émulation de l'onglet Rendering (Rendu).
Émuler la caractéristique média CSS prefers-color-scheme
La fonctionnalité multimédia CSS prefers-color-scheme indique si l'utilisateur préfère le jeu de couleurs claires ou sombres.
Pour émuler cette condition :
- Sur la page prefers-color-scheme, ouvrez l'onglet Rendu.
Sous Émuler la fonctionnalité multimédia CSS
prefers-color-scheme, sélectionnez l'une des options suivantes dans le menu déroulant :- Aucune émulation
prefers-color-scheme:lightprefers-color-scheme:dark
Actualisez la page. Exemple :
Émuler le type de média CSS (activer l'aperçu avant impression)
La requête multimédia d'impression contrôle l'apparence de votre page lors de l'impression.
Pour forcer votre page à passer en mode Aperçu avant impression:
Ouvrez l'onglet Rendu et sous Émuler le type de média CSS, sélectionnez print.
Sur cette page, vous pouvez afficher et modifier votre code CSS, comme n'importe quelle autre page Web. Consultez la page Premiers pas avec l'affichage et la modification des fichiers CSS.
Émuler la caractéristique média CSS forced-colors
La fonctionnalité média CSS forced-colors indique si l'agent utilisateur a activé un mode de couleurs forcées. Le mode Contraste élevé de Windows est un exemple de mode de couleurs forcées.
Pour émuler cette condition :
- Ouvrez l'onglet Rendu.
Sous Émuler la fonctionnalité multimédia CSS
forced-colors, sélectionnez l'une des options suivantes dans la liste déroulante:- Aucune émulation
forced-colors:activeforced-colors:none
Avec forced-colors:active émulé :
Émuler la caractéristique média CSS prefers-contrast
La fonctionnalité multimédia CSS prefers-contrast indique si l'utilisateur a demandé que le contenu Web présente une valeur de contraste plus élevée, plus faible ou spécifique.
Pour émuler cette condition:
- Ouvrez l'onglet Rendu.
Sous Émuler la fonctionnalité multimédia CSS
prefers-contrast, sélectionnez l'une des options suivantes dans le menu déroulant :- Aucune émulation
prefers-contrast:moreprefers-contrast:lessprefers-contrast:custom
Émuler la caractéristique média CSS prefers-reduced-motion
La fonctionnalité multimédia CSS prefers-reduced-motion indique si l'utilisateur a demandé à réduire la quantité de mouvement sur une page.
Pour émuler cette condition :
- Ouvrez l'onglet Rendering (Rendu) de cette démonstration et essayez de faire défiler l'écran pour voir différentes animations.
- Sous Émuler la fonctionnalité multimédia CSS
prefers-reduced-motion, sélectionnezprefers-reduced-motion:reduce. - Essayez de faire défiler la page à nouveau.
Émuler la caractéristique média CSS prefers-reduced-transparency
La fonctionnalité multimédia CSS prefers-reduced-transparency indique si l'utilisateur a demandé à réduire les effets de calque transparent ou translucide utilisés sur l'appareil.
La fonctionnalité prefers-reduced-transparency est disponible à partir de Chrome 118. Elle vous permet d'adapter le contenu Web aux préférences de l'utilisateur en réduisant la transparence dans l'OS, comme le paramètre Réduire la transparence sur macOS.
Pour émuler cette condition :
- Ouvrez l'onglet Rendu.
- Sous Émuler la fonctionnalité multimédia CSS
prefers-reduced-transparency, sélectionnezprefers-reduced-transparency: reduce. - Vérifiez que votre page s'affiche correctement.
Émuler la caractéristique média CSS color-gamut
La fonctionnalité multimédia CSS color-gamut indique la plage de couleurs compatible avec l'user-agent et l'appareil de sortie.
Pour émuler cette condition:
- Ouvrez l'onglet Rendu.
Sous Émuler la fonctionnalité multimédia CSS
color-gamut, sélectionnez l'une des options suivantes dans le menu déroulant :- Aucune émulation
color-gamut:srgb: environ sRVB ou pluscolor-gamut:p3: environ la gamme spécifiée dans Espace colorimétrique Display P3 ou pluscolor-gamut:rec2020: environ la gamme spécifiée dans la Recommandation 2020 ou plus