Émuler les fonctionnalités multimédias CSS

Sofia Emelianova
Sofia Emelianova

Émulez diverses fonctionnalités multimédias CSS à l'aide de cette référence des options d'émulation dans l'onglet Affichage.

Émuler la caractéristique média CSS prefers-color-scheme

La fonctionnalité média CSS prefers-color-scheme indique si l'utilisateur préfère un jeu de couleurs clair ou sombre.

Pour émuler cette condition:

  1. Sur la page prefers-color-scheme, ouvrez l'onglet Rendering (Rendu).
  2. 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:light
    • prefers-color-scheme:dark
  3. Actualisez la page. Exemple :

Émulé prefers-color-scheme:dark

É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 en mode Aperçu avant impression:

  1. Ouvrez l'onglet Rendering (Affichage), puis sous Emulate CSS media type (Émuler le type de média CSS), sélectionnez print (Impression).

    Mode Aperçu avant impression

  2. Vous pouvez ensuite afficher et modifier votre CSS, comme n'importe quelle autre page Web. Consultez Afficher et modifier le 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é.

Pour émuler cette condition:

  1. Ouvrez l'onglet Rendu.
  2. Sous Émuler la fonctionnalité multimédia CSS forced-colors, sélectionnez l'une des options suivantes dans le menu déroulant:

    • Aucune émulation
    • forced-colors:active
    • forced-colors:none

Avec forced-colors:active émulé:

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 soit présenté avec une valeur de contraste plus élevée, plus faible ou spécifique.

Pour émuler cette condition:

  1. Ouvrez l'onglet Rendu.
  2. 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:more
    • prefers-contrast:less
    • prefers-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:

  1. Ouvrez l'onglet Rendering (Rendu) de cette démonstration et faites défiler la page pour voir différentes animations.
  2. Sous Émuler la caractéristique média CSS prefers-reduced-motion, sélectionnez prefers-reduced-motion:reduce.
  3. 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:

  1. Ouvrez l'onglet Rendu.
  2. Sous Émuler la caractéristique média CSS prefers-reduced-transparency, sélectionnez prefers-reduced-transparency: reduce.
  3. Vérifiez si votre page s'affiche correctement.

Émuler la caractéristique média CSS color-gamut

La fonctionnalité média CSS color-gamut indique la plage de couleurs compatible avec l'user-agent et l'appareil de sortie.

Pour émuler cette condition:

  1. Ouvrez l'onglet Rendu.
  2. Sous Émuler la fonctionnalité multimédia CSS color-gamut, sélectionnez l'une des options suivantes dans le menu déroulant: