Aplica otros efectos: habilita el tema oscuro automático, emula el enfoque y mucho más

Sofia Emelianova

Descubre efectos útiles para aplicar a tu página con esta referencia de las opciones de la pestaña Renderización.

Destacar marcos de anuncios

Para comprobar si los marcos están etiquetados como anuncios, haz lo siguiente:

1. Abre la pestaña Renderización en esta demostración y marca la opción Destacar marcos de anuncios.
2. Observa el marco del anuncio destacado en rojo.

Emular una página enfocada

Si cambias el enfoque de la página a Herramientas para desarrolladores, algunos elementos de superposición se ocultan automáticamente si se activan por el foco. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción check_box Emulate a focused page te permite depurar un elemento como si estuviera enfocado.

Para emular una página enfocada, haz lo siguiente:

1. Abre una página con el elemento que deseas depurar, por ejemplo, el sitio web de YouTube con su barra de búsqueda.

2. En la página, abre la pestaña Renderización y, luego, marca y desmarca la opción Emular una página enfocada.

   

También puedes encontrar la misma opción en el botón :hov de la barra de acciones en Elementos > Estilos.

Para descubrir más formas de inmovilizar un elemento, consulta Cómo inmovilizar la pantalla e inspeccionar elementos que desaparecen.

Inhabilita las fuentes locales

Para verificar si las alternativas de fuentes locales funcionan como se espera, inhabilita las fuentes local() en las reglas @font-face.

A menudo, los desarrolladores y diseñadores usan dos copias diferentes de la misma fuente durante el desarrollo:

• Una fuente local para tus herramientas de diseño
• Una fuente web para tu código

Si inhabilitas las fuentes locales, podrás hacer lo siguiente con mayor facilidad:

• Depurar y medir el rendimiento y la optimización de la carga de fuentes web
• Verifica la exactitud de tus reglas @font-face de CSS
• Descubre las diferencias entre las fuentes web y sus versiones locales

Emula las fuentes de local() faltantes en las reglas @font-face:

1. Inspecciona la oración anterior, abre Elementos > Computed, desplázate hacia abajo y, en Rendered Fonts, descubre que Chrome encontró Courier New en archivos locales.

   

2. Abre la pestaña Renderización, marca Inhabilitar las fuentes locales y refresh vuelve a cargar la página.

3. Observa la oración en Roboto que se encuentra en la Web.

   

Habilita el modo oscuro automático

Descubre cómo se vería tu sitio en modo oscuro incluso si no lo implementaste.

Chrome 96 introdujo una prueba de origen para el Tema oscuro automático en Android. Con esta función, el navegador aplica un tema oscuro generado automáticamente a los sitios con temas claros si el usuario habilitó los temas oscuros en el sistema operativo.

Para habilitar el modo oscuro automático, haz lo siguiente:

1. En esta página, abre la pestaña Renderización y marca la opción Habilitar el modo oscuro automático.
2. Observa esta página en modo oscuro.

Emular deficiencias de visión

Todos deberían poder acceder a la Web y disfrutarla. Google se compromete a hacerlo realidad.

Con las Herramientas para desarrolladores de Chrome, puedes ver cómo las personas con deficiencias visuales ven tu sitio para mejorarlo. Para obtener más información, consulta Cómo simular deficiencias de visión en colores.

Para emular deficiencias de visión, haz lo siguiente:

1. Abre la pestaña Renderización.

2. En Emulate vision deficiencias, selecciona una de las siguientes opciones de la lista desplegable:

   • Sin emulación.
   • Visión borrosa.
   • Contraste reducido.
   • Protanopia (sin rojo). Baja percepción del rojo; confusión entre los colores verde, rojo y amarillo.
   • Deuteranopia (sin verde): Baja percepción del verde; confusión de verdes, rojos y amarillos.
   • Tritanopia (sin azul): Baja percepción del azul; confusión de verdes y azules.
   • Acromatopsia (sin color). Ausencia parcial o total de la visión de color.

Inhabilita los formatos de imagen AVIF y WebP

Estas emulaciones permiten que los desarrolladores prueben diferentes situaciones de carga de imágenes sin tener que cambiar de navegador.

Supongamos que tienes el siguiente código HTML para entregar una imagen en los formatos AVIF y WebP para navegadores más nuevos, con una imagen PNG de resguardo para navegadores más antiguos.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Para inhabilitar todas las imágenes AVIF en una página (o, de manera similar, las imágenes WebP), haz lo siguiente:

1. Abre la pestaña Renderización y marca Inhabilitar el formato de imagen AVIF.
2. refresh Vuelve a cargar la página y coloca el cursor sobre el img src El src de la imagen actual (currentSrc) ahora es la imagen WebP de resguardo.

Del mismo modo, puedes inhabilitar las imágenes WebP.