Émulez diverses fonctionnalités multimédias CSS à l'aide de cette référence des options d'émulation de l'onglet 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 un jeu de couleurs clair ou sombre.
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 la liste déroulante:- 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 sur le média papier permet de contrôler l'apparence de votre page lorsqu'elle est imprimée.
Pour forcer l'affichage d'une page en mode Aperçu avant impression:
Ouvrez l'onglet Rendu, puis sélectionnez Imprimer sous Émuler le type de média CSS.
Vous pouvez alors consulter et modifier votre CSS, comme n'importe quelle autre page Web. Consultez Premiers pas avec l'affichage et la modification des fichiers CSS.
Émuler la caractéristique média CSS forced-colors
La fonctionnalité multimédia CSS forced-colors indique si le user-agent a activé un mode Couleurs forcées. Le contraste élevé de Windows est un exemple de mode de couleurs forcé.
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 l'émulation de forced-colors:active:
É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 supérieure, inférieure 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 la liste déroulante:- Aucune émulation
prefers-contrast:moreprefers-contrast:lessprefers-contrast:custom
Émuler la caractéristique média CSS prefers-reduced-motion
La fonctionnalité mé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) dans cette démonstration et essayez de faire défiler la page pour voir les différentes animations.
- Sous Émuler la fonctionnalité multimédia CSS
prefers-reduced-motion, sélectionnezprefers-reduced-motion:reduce. - Réessayez de faire défiler l'écran.
É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 transparents ou translucides utilisés sur l'appareil.
La fonctionnalité prefers-reduced-transparency est disponible à partir de Chrome 118 et vous permet d'adapter le contenu Web aux préférences sélectionnées par l'utilisateur pour réduire la transparence dans l'OS, comme le paramètre Réduire la transparence sous 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 gamme de couleurs prise en charge par le user-agent et le périphérique 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 la liste déroulante:- Aucune émulation
color-gamut:srgb: gamme d'environ sRGB ou pluscolor-gamut:p3: à peu près la gamme spécifiée dans l'espace colorimétrique pour les écrans P3 ou dans un autre formatcolor-gamut:rec2020: la gamme spécifiée dans le document Rec. 2020 ou plus