Nuevo en Chrome: descripción general de CSS

¡Aquí tienes una nueva y elegante característica experimental en Chrome! Ahora, podemos obtener una descripción general del CSS utilizado en un sitio, desde cuántos colores hay hasta la cantidad de declaraciones no utilizadas… incluso hasta la cantidad total de consultas de medios definidas.

Nuevamente, esta es una característica experimental. Eso no solo significa que todavía está en progreso, sino que también significa que tendrás que habilitarlo para comenzar a usarlo en DevTools.

• Abra DevTools ( Command+ Option+ Ien Mac; Control+ Shift+ Ien Windows)
• Dirígete a Configuración de DevTool ( ?o Function+ F1en Mac; ?o F1en Windows)
• Haga clic en abrir la sección Experimentos.
• Habilite la opción Descripción general de CSS

Y oye, ¡mira eso! Obtenemos una nueva pestaña “Descripción general de CSS” en la bandeja del menú de DevTools cuando la configuración está cerrada. Asegúrate de que no esté oculto en el menú adicional si no lo ves.

Tenga en cuenta que el informe está dividido en varias secciones, que incluyen colores, información de fuentes, declaraciones no utilizadas y consultas de medios. Es mucha información disponible en una pequeña cantidad de espacio al alcance de nuestra mano.

Esto es bastante ingenioso, ¿eh? Me encanta que herramientas como esta estén comenzando a trasladarse al navegador. Piense en cómo esto puede ayudarnos no solo como front-end sino también en cómo colaboramos con los diseñadores. Por ejemplo, un diseñador puede abrir esto y comenzar a verificar nuestro trabajo para asegurarse de que todo, desde la paleta de colores hasta la pila de fuentes, esté intacto.