Uso del CSS
Consulta el tamaño y la proporción de CSS usado durante el análisis, por página y hoja de estilo. Los estilos sin usar pueden ser necesarios tras una interacción o en otra página.
Auditoría CSS en línea
Descubre cuánto CSS carga la página, qué estilos se usaron durante el análisis y dónde se repiten las reglas. Revisa colores, fuentes, capas y errores en un informe.
Formato del resultado
El informe muestra fuentes de CSS, métricas y señales
Revisa el tamaño y el uso del CSS, y después los colores, las fuentes, las capas y los errores de validación.
Datos ilustrativos para explicar el informe. Los resultados de su página aparecen tras el análisis.
Mapa de fuentes de hojas de estilo
Compara las hojas externas con los estilos incluidos en la página. Cada fuente muestra su tamaño y el código usado o sin usar durante el análisis.
| Fuente | Tipo | Uso | Sin usar |
|---|---|---|---|
| app.css | externo | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | externo | 32 KiB / 8 KiB | 8 KiB · 20% |
| estilos en línea | en línea | 6 KiB / 2 KiB | 2 KiB · 25% |
- Fuente
- app.css
- Tipo
- externo
- Uso
- 48 KiB / 72 KiB
- Sin usar
- 72 KiB · 60%
- Fuente
- components.css
- Tipo
- externo
- Uso
- 32 KiB / 8 KiB
- Sin usar
- 8 KiB · 20%
- Fuente
- estilos en línea
- Tipo
- en línea
- Uso
- 6 KiB / 2 KiB
- Sin usar
- 2 KiB · 25%
Empieza por el origen de la hoja de estilos y una declaración repetida. Comprueba si las repeticiones pertenecen al mismo componente y estado. Modifica el código fuente y compara un nuevo informe.
Qué comprobamos
Un inventario CSS completo en lugar de consejos genéricos
El informe reúne fuentes y tamaños de estilos, uso del código, prioridad de selectores, declaraciones repetidas, valores de diseño y errores de validación.
Tamaño y fuentes
Recopilamos el tamaño total del CSS, el número de fuentes de hojas de estilos y recuentos separados para las hojas de estilos en línea y externas.
Especificidad de selectores
Compara la especificidad mínima, media y máxima de los selectores, que ayuda a determinar la prioridad de las reglas. Revisa por separado los selectores más complejos.
Declaraciones repetidas y !important
Consulta el número de reglas, selectores y declaraciones, los pares propiedad-valor repetidos y los ejemplos con !important.
Consultas de medios y prefijos
Mostramos las consultas de medios más frecuentes y contamos las propiedades CSS con prefijos de proveedor: -webkit-, -moz-, -ms- y -o-.
Colores, fuentes, z-index y errores
El informe muestra valores de color únicos, valores de font-family detectados, valores numéricos de z-index y ejemplos de errores de validación de CSS.
Cómo funciona
De la URL a un resumen completo de CSS de la página
Introduce la URL. Milten abre la página en un navegador, recopila las hojas de estilo y prepara el informe. No requiere integración en la compilación.
Carga la página y recopila el CSS
El informe muestra la URL comprobada, la fecha y las fuentes de estilos. Separa los estilos incluidos en la página de las hojas de estilo externas.
Medimos el uso de CSS y la prioridad de selectores
Consulta cuánto CSS se usó, cuántas reglas y declaraciones se encontraron y qué selectores tienen mayor especificidad.
Genera tablas para revisar el CSS
Revisa declaraciones repetidas, !important, consultas de medios, prefijos de navegador, colores, fuentes, capas y errores de CSS.
Preguntas frecuentes
Preguntas frecuentes sobre la auditoría de CSS
Respuestas sobre uso de CSS, prioridad de selectores, !important, contenido del informe y duración del análisis.
¿Cómo afecta el CSS sin usar a la velocidad?
El navegador descarga, analiza y aplica el CSS antes de renderizar la página. Cuantas más reglas innecesarias haya, mayor será el riesgo de retrasos en el primer renderizado y más difícil será mantener la interfaz.
¿Por qué revisar la especificidad de los selectores?
La especificidad ayuda a determinar la prioridad de un selector cuando entran en conflicto las reglas CSS. Los selectores muy específicos dificultan los cambios porque requieren reglas más fuertes para sobrescribirlos.
¿Hay que eliminar todas las declaraciones !important?
No. !important cambia la prioridad de una declaración y puede ser intencional. El informe muestra dónde investigar. Revisa la cascada y los estados del componente antes de sustituirlo.
¿Qué datos habrá en el informe?
El informe incluye URL y fecha, fuentes y tamaños de estilos, uso del código, selectores y especificidad, declaraciones repetidas, !important, consultas de medios, prefijos de navegador, colores, fuentes, capas y errores de CSS.
¿Cuánto tarda la comprobación de una página?
La comprobación de una sola página suele tardar menos de un minuto. La duración depende del número de recursos, las condiciones de red y el tiempo que tarda la página en estabilizarse tras la carga.
Servicios relacionados
Qué comprobar después de este servicio
Comprobación de JavaScript
Revisa archivos JavaScript, errores de carga y código sin usar durante la carga. Identifica scripts que requieren un análisis más detallado.
AbrirComprobación de HTML
Detecta errores de HTML y estructuras de página demasiado complejas. El informe identifica los elementos afectados.
AbrirValores de diseño
Recopila colores, fuentes, tamaños y espaciado de la página. Obtén una lista de valores para trabajar en el diseño.
AbrirAccesibilidad
Detecta problemas de accesibilidad con una comprobación automática. Obtén recomendaciones; una evaluación completa también necesita comprobaciones manuales.
Abrir