Panel CSS Overview

En Chrome DevTools, abra el panel CSS Overview mediante Cmd+Shift+P → "CSS Overview". Haga clic en "Capture overview" para analizar la hoja de estilos completa de la página actual. El panel resume los colores, las fuentes, las media queries y las declaraciones no utilizadas.

La sección Colors muestra todos los valores de color utilizados en el CSS de la página —hexadecimales, rgb, con nombre y paradas de gradiente— agrupados por tipo. Al hacer clic en un color, se muestran los elementos y las propiedades que lo utilizan, lo que permite detectar variaciones de color no intencionadas y una proliferación descontrolada de la paleta.

La sección Fonts muestra todas las combinaciones de font-family, font-size y font-weight aplicadas a la página. Revela las alternativas de la pila de fuentes, destaca las escalas tipográficas incoherentes y muestra qué elementos utilizan cada combinación.

La sección Media Queries muestra cada regla @media, sus breakpoints y el número de declaraciones que contiene. Esta vista general revela la incoherencia entre breakpoints: a veces los equipos acumulan más de 15 valores de breakpoint ligeramente distintos en una base de código.

CSS Overview marca las declaraciones que nunca se aplican debido a conflictos de especificidad o a selectores que no coinciden. Esto es distinto de Coverage: detecta reglas que siempre quedan sobrescritas sin requerir interacción del usuario para activarlas.

El panel resalta los colores de texto que no cumplen las relaciones de contraste AA o AAA de WCAG con respecto a su fondo. Al hacer clic en un fallo de contraste, se selecciona el elemento en el DOM, lo que facilita corregir problemas de accesibilidad sin herramientas independientes.

Use CSS Overview después de rediseños importantes o al incorporarse a una base de código existente. El resumen de colores revela hasta qué punto la implementación se ha alejado de los tokens de diseño. El resumen de fuentes revela incoherencias tipográficas antes de que los usuarios las perciban.

Ejecute CSS Overview en varias páginas de la misma aplicación. Comparar sus resúmenes de colores y fuentes revela desviaciones específicas de cada página: componentes que se representan con una tipografía o un color distintos de los de sus equivalentes en otras páginas.

Exporte los datos de color de CSS Overview y compárelos con la paleta de tokens de diseño. Los colores que aparecen en la vista general pero no en la paleta de tokens son valores codificados directamente que deberían convertirse en referencias a tokens y eliminarse como valores independientes.

Enumere los breakpoints de CSS Overview, identifique los duplicados y casi duplicados (768px, 769px y 770px de distintos desarrolladores), consolídelos en la escala de breakpoints de su sistema de diseño y actualice todas las media queries para que utilicen propiedades personalizadas de CSS o variables de SCSS.

CSS Overview analiza las hojas de estilo vinculadas, pero no los estilos en línea ni los estilos en tiempo de ejecución de CSS-in-JS. Es posible que las clases dinámicas añadidas por JavaScript después del renderizado inicial no aparezcan. Complemente el análisis con Coverage y una inspección manual para obtener una cobertura completa de los estilos dinámicos.

¿Qué tipo de problema de accesibilidad detecta CSS Overview?

CSS Overview proporciona una auditoría a nivel de página de los colores, las fuentes, los breakpoints de las media queries y los problemas de contraste. Úselo para detectar desviaciones del diseño, proliferación descontrolada de la paleta, incoherencias tipográficas y fallos de accesibilidad antes de que se acumulen y se conviertan en una deuda técnica difícil y costosa de desenredar.