Descripción general de CSS: Identifica posibles mejoras de CSS

Usa el panel Resumen de CSS para comprender mejor el CSS de tu página y poder identificar posibles mejoras.

Descripción general

El panel Resumen de CSS crea un informe de las estadísticas de CSS de tu sitio web. Este informe recopila datos de todos los casos de CSS, incluso de las declaraciones sin usar. El panel Resumen de CSS te ayuda a investigar más los casos, destacando la página o vinculando directamente al código afectado en el panel Elementos.

Consulta Cómo ejecutar y volver a ejecutar un informe Resumen de CSS y Cómo comprender el informe Resumen de CSS.

Abrir el panel Resumen de CSS

  1. Abre cualquier página web, como esta página.
  2. Abre Herramientas para desarrolladores.
  3. Selecciona Más. Personalizar y controlar Herramientas para desarrolladores > Más herramientas > Descripción general de CSS.

    Resumen de CSS en el menú.

    También puedes usar el menú de comandos para abrir el panel Descripción general de CSS.

    Muestra el comando CSS Overview en el menú Command.

Ejecutar y volver a ejecutar un informe Resumen de CSS

  1. Haz clic en el botón Capture overview para generar un informe de resumen del CSS de tu página.

    Capturar el resumen de CSS

  2. Para volver a ejecutar un resumen del CSS, haz clic en el ícono Borrar. Clear overview y repite el primer paso.

    Descripción general clara.

Comprende el informe Resumen de CSS

El informe consta de cinco secciones:

  1. Resumen de la descripción general. Es un resumen de alto nivel del CSS de tu página. Resumen de la descripción general.
  2. Colores. Todos los colores de tu página. Los colores se agrupan por tipos, como los colores de fondo, los colores del texto, etc. En esta sección, también se muestran textos con problemas de contraste bajo.

    Colores

    Se puede hacer clic en cada color. Por ejemplo, supongamos que el color del borde #DADCE0 no 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.

    Una lista de elementos que usan el color.

    Para destacar el elemento en la página, coloca el cursor sobre el elemento en la lista.

    Coloca el cursor sobre un elemento para destacarlo en la página.

    Para abrir el elemento en el panel Elementos, haz clic en el elemento de la lista.

  3. Información de la fuente: Todas las fuentes de tu página y sus casos, agrupadas por diferentes tamaños, grosores y altura de línea. Al igual que en la sección Colores, para ver la lista de elementos afectados, haz clic en sus casos.

    Información de la fuente

  4. Declaraciones sin usar. Todos los estilos que no tienen efecto, agrupados por motivo.

    Declaraciones sin usar.

    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.

  5. Consultas de medios. Todas las consultas de medios definidas en tu página, ordenadas por cantidad de casos, en orden descendente. Para ver la lista de elementos afectados, haz clic en sus casos.

    Consultas de medios