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:
Top comments (2)
I've recently started diving deeper into css on a side project I'm working on and this tool is exactly what I needed. Thank you for pointing it out!
Recientemente comencé a profundizar en css en un proyecto paralelo en el que estoy trabajando y esta herramienta es exactamente lo que necesitaba. ¡Gracias por señalarlo!
Gracias 🙏