Identificar posibles mejoras de CSS en su sitio web

Esta caracteristica nos ofrece información detallada sobre colores, fuentes, media queries y declaraciones no utilizadas (Unused declarations).

wootsbot
wootsbot / octubre 14, 2021
1 min de lectura––– vistas
Picture of Identificar posibles mejoras de CSS en su sitio web

Esta función es útil cuando realiza modificaciones CSS en la interfaz de usuario y ya no necesita utilizar herramientas de terceros como el selector de color.

Se trata de una función en faces de pruebas de Chrome 96. El equipo de Google Chrome está trabajando activamente en esta función.

Activar CSS Overview

CSS Overview panel

  • Abra cualquier página web

  • Abra DevTools

  • Haga clic en Más opciones> Más herramientas> CSS Overview.

Css overview step 2

Ejecutar CSS Overview report

  • Haga clic en el botón Capturar descripción general (Capture overview) para generar un informe de descripción general CSS de su página.

Css overview step 3

Overview summary

Un resumen de alto nivel del CSS de su página.

Css overview step 4

Colores

Todos los colores de tu página. Los colores están agrupados por usos como colores de fondo, colores de texto, etc. También le muestra los textos que tienen problemas de bajo contraste.

Css overview step 4

Se puede hacer clic en cada uno de los colores. Por ejemplo, digamos que este color de borde #52A9FF no coincide con el esquema de color de su sitio, haga clic en él para obtener una lista de los elementos que usan el color.

Css overview step 6

Conclusión

Utilice el panel Descripción general de CSS (CSS Overview) para comprender mejor el CSS de su página, con esto puede identificar posibles mejoras ya aplicarlas en sus paginas.

Edit on GitHub