Usa el panel Resumen de CSS para comprender mejor el CSS de tu página y, además, identificar posibles mejoras.
Abrir el panel Resumen de CSS
- Abre cualquier página web, como esta página.
- Abra Herramientas para desarrolladores.
Selecciona
Customize and control Herramientas para desarrolladores > Más herramientas > Descripción general de CSS.
También puedes usar el Menú de comandos para abrir el panel Descripción general de CSS.
Ejecuta y vuelve a ejecutar un informe de resumen de CSS
Haz clic en el botón Capture overview para generar un informe de resumen de CSS de tu página.
Para volver a ejecutar un resumen de CSS, haz clic en el ícono
Borrar descripción general y repite el primer paso.
Comprende el informe Resumen de CSS
El informe consta de cinco secciones:
- Resumen de la descripción general. Un resumen de alto nivel del CSS de tu página.
Colores. Todos los colores de tu página. Los colores se agrupan por tipo, como colores de fondo, colores del texto, etc. En esta sección, también se muestran textos que tienen problemas de contraste bajo.
Se puede hacer clic en cada color. Por ejemplo, supongamos que el color del borde de
#DADCE0no coincide con el esquema de colores de tu sitio. Para obtener una lista de los elementos que usan este color, haz clic en el color.
Para destacar el elemento en la página, desplázate sobre el elemento en la lista.
Para abrir el elemento en el panel Elements, haz clic en el elemento de la lista.
Información de la fuente. Muestra todas las fuentes de tu página y sus casos, agrupadas según los diferentes tamaños y tamaños de las fuentes y las alturas de línea. Al igual que en la sección Colores, para ver la lista de elementos afectados, haz clic en las veces que aparecen.
Declaraciones sin usar. Todos los estilos que no tienen efecto, agrupados por motivo.
Por ejemplo, las dos declaraciones anteriores no se usan porque el contenido determina la altura y el ancho de un elemento intercalado. Para ver los elementos correspondientes, haz clic en los casos.
Consultas de medios. Todas las consultas de medios definidas en tu página, ordenadas por cantidad de repeticiones en orden descendente. Para ver la lista de elementos afectados, haz clic en sus casos.
