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:
- En la página prefers-color-scheme, abre la pestaña Renderización.
En Emular CSS media feature
prefers-color-scheme, selecciona una de las siguientes opciones de la lista desplegable:- Sin emulación
prefers-color-scheme:lightprefers-color-scheme:dark
Vuelve a cargar la página. Por ejemplo:
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:
Abre la pestaña Renderización y, en Emular tipo de medio CSS, selecciona Imprimir.
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:
- Abre la pestaña Renderización.
En Emular CSS media feature
forced-colors, selecciona una de las siguientes opciones de la lista desplegable:- Sin emulación
forced-colors:activeforced-colors:none
Con forced-colors:active emulado:
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:
- Abre la pestaña Renderización.
En Emular CSS media feature
prefers-contrast, selecciona una de las siguientes opciones de la lista desplegable:- Sin emulación
prefers-contrast:moreprefers-contrast:lessprefers-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:
- Abre la pestaña Renderización en esta demostración y desplázate para ver varias animaciones.
- En Emular la función de medios de CSS
prefers-reduced-motion, seleccionaprefers-reduced-motion:reduce. - 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:
- Abre la pestaña Renderización.
- En Emular la función de medios de CSS
prefers-reduced-transparency, seleccionaprefers-reduced-transparency: reduce. - 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:
- Abre la pestaña Renderización.
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áscolor-gamut:p3: Aproximadamente el gamut especificado en Espacio de color de Display P3 o máscolor-gamut:rec2020: Aproximadamente la gama especificada en Rec. 2020 o más