Identificar posibles mejoras de CSS en su sitio web
Jorge Luis Calleja Alvarado
Posted on March 10, 2022
Esta característica nos ofrece información detallada sobre colores, fuentes, media queries y declaraciones no utilizadas (Unused declarations).
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.
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.
Overview summary
Un resumen de alto nivel del CSS de su página.
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.
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.
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.
links:
Posted on March 10, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related