# Comprobador de CSS inline

https://rankproof.eu/es/tools/seo-inline-css

## 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.

## Cómo funciona

1. Introduce la URL de una página o pega su HTML
2. Descargamos el HTML de la página y analizamos cada `<elemento style="">`
3. Contamos los atributos style inline por separado de los bloques `<style>` inline
4. Devolvemos el tamaño total del CSS inline, hasta 8 elementos de ejemplo y consejos de refactorización

## Ejemplo de entrada y salida

ENTRADA

```text
url: https://rankproof.eu/tools
```

SALIDA

```text
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">
```

## 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.

## 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.

## Herramientas relacionadas en Análisis SEO

- [Comprobador de título y meta descripción](https://rankproof.eu/es/tools/seo-meta-title)
- [Comprobador de encabezados](https://rankproof.eu/es/tools/seo-heading-tags)
- [Comprobador de texto alt de imágenes](https://rankproof.eu/es/tools/seo-image-alt)
- [Comprobador de URL canónica](https://rankproof.eu/es/tools/seo-canonical-url)
- [Analizador de Robots.txt](https://rankproof.eu/es/tools/seo-robots-txt)
- [Generador de robots.txt](https://rankproof.eu/es/tools/seo-robots-txt-generator)