Validación HTML: CSS: error de análisis.

Acerca de este problema de CSS

Un error de análisis de CSS significa que el analizador de CSS del validador encontró algo inesperado y no pudo entender el código a partir de ese punto. A diferencia de muchos errores de HTML que señalan una violación específica de una regla, un error de análisis es más general — el analizador simplemente se rindió tratando de interpretar el CSS. Esto a veces puede causar una cascada de errores adicionales, ya que el analizador puede perder el contexto después del fallo inicial.

Esto importa porque los navegadores manejan el CSS roto de manera impredecible. Aunque la mayoría de los navegadores son tolerantes y omitirán reglas inválidas, la forma en que se recuperan varía. Los estilos pueden renderizarse de manera diferente entre navegadores, o bloques completos de reglas pueden ser silenciosamente ignorados. Un CSS válido asegura un renderizado consistente, depuración más fácil, y mejor mantenibilidad.

Las causas comunes de errores de análisis de CSS incluyen:

Punto y comas faltantes entre declaraciones
Llaves sin cerrar { o llaves de cierre extra }
Comentarios sin cerrar (/* sin su correspondiente */)
Valores de propiedades inválidos o vacíos (ej., color: ;)
Caracteres inesperados como texto perdido, tokens no soportados, o marcado HTML dentro de bloques <style>
Errores tipográficos en nombres de propiedades o valores (ej., colr: red)
Usar sintaxis CSS que no es válida en el contexto de un atributo, como colocar selectores dentro de un atributo style

Para arreglar el error, ve a la línea indicada por el validador e inspecciona cuidadosamente el CSS alrededor de ese punto. Busca los problemas comunes listados arriba. A veces el error real está en una línea anterior a la reportada — por ejemplo, un punto y coma faltante en la línea 5 podría solo causar un error de análisis en la línea 6.

Ejemplos

Punto y coma faltante

Un punto y coma faltante causa que el analizador malinterprete dónde termina una declaración y comienza la siguiente.

❌ Incorrecto:

<p style="color: red font-size: 16px">Hello</p>

✅ Arreglado:

<p style="color: red; font-size: 16px">Hello</p>

Llave sin cerrar

Una llave de cierre faltante causa que el analizador trate las reglas subsiguientes como parte del bloque sin cerrar.

❌ Incorrecto:

<style>
  .container {
    margin: 0 auto;
    padding: 20px;

  .title {
    font-size: 24px;
  }
</style>

✅ Arreglado:

<style>
  .container {
    margin: 0 auto;
    padding: 20px;
  }

  .title {
    font-size: 24px;
  }
</style>

Comentario sin cerrar

Un comentario que nunca se cierra causa que todo lo que está después sea consumido por el analizador como parte del comentario.

❌ Incorrecto:

<style>
  /* Set the main color
  body {
    color: #333;
  }
</style>

✅ Arreglado:

<style>
  /* Set the main color */
  body {
    color: #333;
  }
</style>

Valor de propiedad vacío o inválido

Declarar una propiedad sin valor o con un valor claramente inválido desencadena un error de análisis.

❌ Incorrecto:

<div style="background-color: ;">Content</div>

✅ Arreglado:

<div style="background-color: #f0f0f0;">Content</div>

Selectores dentro de un atributo `style` en línea

El atributo style solo acepta declaraciones (pares propiedad-valor), no selectores o bloques de reglas completos.

❌ Incorrecto:

<div style="p { color: blue; }">Content</div>

✅ Arreglado:

<div style="color: blue;">Content</div>

Caracteres perdidos o errores tipográficos

Caracteres inesperados en cualquier lugar del CSS causarán que el análisis falle.

❌ Incorrecto:

<style>
  .box {
    width: 100px;;
    height: 50px
    border: 1px solid #ccc;
  }
</style>

Aunque un punto y coma doble (;;) es técnicamente inofensivo en la mayoría de los analizadores, un punto y coma faltante después de height: 50px lo fusiona con la siguiente línea, produciendo un valor inválido.

✅ Arreglado:

<style>
  .box {
    width: 100px;
    height: 50px;
    border: 1px solid #ccc;
  }
</style>

Si el validador apunta a una línea pero la causa no es obvia, trata de aislar secciones de tu CSS y validarlas por separado usando el Servicio de Validación CSS del W3C. Esto puede ayudar a reducir la ubicación exacta del problema.