Comprobador de CSS inline
Respuesta breve
Detecta CSS inline excesivo que puede afectar el rendimiento y la mantenibilidad.
Qué hace
Encuentra cada atributo style="" inline y bloque <style> de tu página. Informa de cuántos hay y su tamaño total, muestra hasta 8 elementos de ejemplo con su CSS, y sugiere cómo trasladar los estilos a una hoja de estilos.
Por qué importa
Los atributos style inline no se pueden almacenar en caché por separado, son difíciles de mantener y una Content-Security-Policy estricta los bloquea a menos que los permitas explícitamente. La excepción es el CSS crítico por encima del pliegue en un bloque <style>, que puede ayudar al primer renderizado.
Cómo funciona
-
Introduce la URL de una página o pega su HTML
-
Descargamos el HTML de la página y analizamos cada `<elemento style="">`
-
Contamos los atributos style inline por separado de los bloques `<style>` inline
-
Devolvemos el tamaño total del CSS inline, hasta 8 elementos de ejemplo y consejos de refactorización
Ejemplo de entrada y salida
url: https://rankproof.eu/tools
atributos style="" inline: 3 OK bloques <style> inline: 1 OK total de CSS inline: 4.2 KB <div style="margin-top:12px"> <span style="color:#0EA5A4"> <p class="note" style="font-size:14px">
Quién lo usa
-
Desarrollador/a frontend
Audita un sitio antiguo en busca de estilos inline que limpiar; extrae los patrones a clases de utilidad para habilitar un almacenamiento en caché adecuado.
-
Ingeniero/a de seguridad
Auditoría previa al despliegue de CSP: cada `style=""` inline bloquea la política `style-src 'self'`. Extráelos para habilitar una CSP estricta.
-
Ingeniero/a de rendimiento
El CSS inline añade bytes a cada respuesta HTML. Traslada los patrones repetidos a una hoja de estilos en caché; se nota en cada carga de página posterior.
Preguntas frecuentes
¿Es malo el CSS inline para el SEO?
No directamente. Hace las páginas más pesadas y difíciles de mantener, y se interpone en una Content-Security-Policy estricta.
¿Cuándo es apropiado el CSS inline?
Los estilos críticos por encima del pliegue en etiquetas `<style>` (no en atributos `style=""`), y los valores dinámicos por componente que realmente varían en tiempo de ejecución.
¿Cómo refactorizo los estilos inline?
Identifica los patrones repetidos → extráelos a clases de utilidad → añádelas a tu hoja de estilos → sustituye el `style=""` inline por `class=""`.
¿Esto rompe la CSP?
Sí: una CSP estricta (`style-src 'self'`) bloquea el `style=""` inline. Necesitarías `'unsafe-inline'` o `'unsafe-hashes'` para permitirlo.
¿Qué pasa con los frameworks CSS-in-JS?
Muchos añaden etiquetas <style> o atributos style mientras la página se ejecuta, lo que esta herramienta no ve porque lee el HTML tal como se entrega. La mayoría pueden extraer el CSS estático en tiempo de compilación, que es la mejor opción para producción.