Emular las funciones de medios de CSS

Sofia Emelianova
Sofia Emelianova

Emula varias funciones multimedia de CSS con esta referencia de opciones de emulación en la pestaña Renderización.

Emular la función multimedia de CSS prefers-color-scheme

La función de medios del CSS prefers-color-scheme indica si el usuario prefiere el esquema de colores claro u oscuro.

Para emular esta condición, haz lo siguiente:

  1. En la página prefers-color-scheme, abre la pestaña Renderización.
  2. En Emular CSS media feature prefers-color-scheme, selecciona una de las siguientes opciones de la lista desplegable:

    • Sin emulación
    • prefers-color-scheme:light
    • prefers-color-scheme:dark
  3. Vuelve a cargar la página. Por ejemplo:

Emulado prefers-color-scheme:dark

Emular el tipo de medio de CSS (habilitar la vista previa de impresión)

La consulta de medios impresos controla el aspecto que tendrá tu página cuando se imprima.

Para forzar el modo de vista previa de impresión de tu página, haz lo siguiente:

  1. Abre la pestaña Renderización y, en Emular tipo de medio CSS, selecciona Imprimir.

    Modo de vista previa de impresión

  2. Desde aquí, puedes ver y cambiar tu CSS, como cualquier otra página web. Consulta el artículo Cómo comenzar a visualizar y cambiar CSS.

Emular la función multimedia de CSS forced-colors

La función de medios de CSS forced-colors indica si el usuario-agente habilitó un modo de colores forzados. Un ejemplo de un modo de colores forzados es el de Contraste alto de Windows.

Para emular esta condición, haz lo siguiente:

  1. Abre la pestaña Renderización.
  2. En Emular CSS media feature forced-colors, selecciona una de las siguientes opciones de la lista desplegable:

    • Sin emulación
    • forced-colors:active
    • forced-colors:none

Con forced-colors:active emulado:

colores-forzados:activo

Emular la función multimedia de CSS prefers-contrast

La función de medios del CSS prefers-contrast indica si el usuario solicitó que el contenido web se presentara con un valor de contraste más alto, más bajo o específico.

Para emular esta condición, haz lo siguiente:

  1. Abre la pestaña Renderización.
  2. En Emular CSS media feature prefers-contrast, selecciona una de las siguientes opciones de la lista desplegable:

    • Sin emulación
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

Emular la función multimedia de CSS prefers-reduced-motion

La función multimedia de CSS prefers-reduced-motion indica si el usuario solicitó minimizar la cantidad de movimiento en una página.

Para emular esta condición, haz lo siguiente:

  1. Abre la pestaña Renderización en esta demostración y desplázate para ver varias animaciones.
  2. En Emular la función de medios de CSS prefers-reduced-motion, selecciona prefers-reduced-motion:reduce.
  3. Intenta desplazarte nuevamente.

Emular la función multimedia de CSS prefers-reduced-transparency

La función multimedia de CSS prefers-reduced-transparency indica si el usuario solicitó reducir los efectos de capas transparentes o translúcidos utilizados en el dispositivo.

La función prefers-reduced-transparency está disponible a partir de Chrome 118 y te permite adaptar contenido web a las preferencias que seleccione el usuario para reducir la transparencia en el SO, como el parámetro de configuración Reducir transparencia en macOS.

Para emular esta condición, haz lo siguiente:

  1. Abre la pestaña Renderización.
  2. En Emular la función de medios de CSS prefers-reduced-transparency, selecciona prefers-reduced-transparency: reduce.
  3. Verifica que tu página se muestre correctamente.

Emular la función multimedia de CSS color-gamut

La función multimedia de CSS color-gamut indica qué rango de colores admiten el usuario-agente y el dispositivo de salida.

Para emular esta condición, haz lo siguiente:

  1. Abre la pestaña Renderización.
  2. En Emular CSS media feature color-gamut, selecciona una de las siguientes opciones de la lista desplegable:

    • Sin emulación
    • color-gamut:srgb: aproximadamente sRGB gamut o más
    • color-gamut:p3: Aproximadamente el gamut especificado en Espacio de color de Display P3 o más
    • color-gamut:rec2020: Aproximadamente la gama especificada en Rec. 2020 o más