Validación HTML: CSS: "X": Error de análisis.

Acerca de este problema de CSS

Cuando el Validador HTML de W3C verifica tu documento, también valida cualquier estilo en línea (en atributos style) y hojas de estilo integradas (en elementos <style>). Un error de análisis CSS ocurre cuando el analizador encuentra algo que no puede interpretar según las especificaciones CSS. La “X” en el mensaje de error se refiere a la propiedad, valor o token específico que causó la falla.

Comprender los errores de análisis CSS

Los errores de análisis CSS pueden originarse por muchas causas diferentes:

Errores tipográficos en nombres de propiedades o valores — por ejemplo, colr en lugar de color, o 10xp en lugar de 10px.
Puntuación faltante o extra — un punto y coma olvidado, dos puntos de más, llaves o paréntesis sin cerrar.
Valores inválidos para una propiedad — usar un valor que no pertenece a la gramática de esa propiedad.
Sintaxis con prefijos de proveedor o no estándar — propiedades como -webkit-appearance o -moz-osx-font-smoothing no son parte del estándar CSS y generarán errores de análisis en el validador.
Características CSS modernas aún no reconocidas — algunas sintaxis CSS más nuevas pueden no estar soportadas aún por el analizador del validador.
Caracteres extraños o problemas de codificación — caracteres invisibles, comillas inteligentes o artefactos de copiar y pegar de procesadores de texto.

Aunque los navegadores generalmente son permisivos y omitirán CSS que no entiendan, los errores de análisis pueden indicar errores reales que causan que los estilos fallen silenciosamente. Solucionarlos asegura que tu CSS cumpla con los estándares y se comporte de manera predecible en todos los navegadores.

Causas comunes y soluciones

Errores tipográficos y de sintaxis

La causa más frecuente es un simple error tipográfico o un carácter faltante. Siempre verifica la línea exacta a la que apunta el validador.

Punto y coma faltante

Un punto y coma olvidado entre declaraciones puede causar que el analizador malinterprete las propiedades siguientes.

Valores inválidos o mal formados

Usar valores que no coinciden con la sintaxis esperada de la propiedad — como omitir unidades, usar sintaxis de función incorrecta o proporcionar el número incorrecto de argumentos — generará errores de análisis.

Prefijos de proveedor

El validador W3C verifica contra la especificación CSS. Las propiedades y valores con prefijos de proveedor no son estándar y producirán errores de análisis. Aunque puedas necesitarlos en producción, ten en cuenta que siempre aparecerán marcados en la validación.

Ejemplos

❌ Punto y coma faltante entre declaraciones

<p style="color: red background-color: blue;">Hola</p>

El punto y coma faltante después de red hace que el analizador trate de interpretar red background-color: blue como un solo valor, resultando en un error de análisis.

✅ Solucionado: punto y coma separando declaraciones

<p style="color: red; background-color: blue;">Hola</p>

❌ Error tipográfico en nombre de propiedad

<style>
  .box {
    widht: 100px;
    hieght: 200px;
  }
</style>

✅ Solucionado: nombres de propiedades correctos

<style>
  .box {
    width: 100px;
    height: 200px;
  }
</style>

❌ Unidad faltante en un valor

<style>
  .container {
    margin: 10;
    padding: 20px;
  }
</style>

Los valores numéricos (distintos de 0) requieren una unidad. El valor 10 sin una unidad como px, em o rem es inválido.

✅ Solucionado: unidad incluida

<style>
  .container {
    margin: 10px;
    padding: 20px;
  }
</style>

❌ Caracteres extra o mal colocados

<style>
  .title {
    font-size:: 16px;
    color: #3333;
  }
</style>

Los dos puntos dobles después de font-size y el color hexadecimal de 4 dígitos #3333 (que es válido en CSS Color Level 4 pero puede no ser reconocido por todos los analizadores de validadores) pueden generar errores.

✅ Solucionado: sintaxis correcta

<style>
  .title {
    font-size: 16px;
    color: #333333;
  }
</style>

❌ Paréntesis sin cerrar en una función

<style>
  .overlay {
    background: rgba(0, 0, 0, 0.5;
  }
</style>

✅ Solucionado: paréntesis de cierre añadido

<style>
  .overlay {
    background: rgba(0, 0, 0, 0.5);
  }
</style>

Consejos para depurar errores de análisis

Lee el mensaje de error cuidadosamente. El validador generalmente apunta al token o línea específica que causó la falla.
Valida CSS por separado. Usa el Servicio de Validación CSS de W3C para mensajes de error más detallados específicos de CSS.
Verifica caracteres invisibles. Si copiaste CSS de un procesador de texto, PDF o sitio web, pueden estar presentes caracteres ocultos como espacios de ancho cero o comillas inteligentes (" en lugar de "). Vuelve a escribir la línea manualmente si tienes dudas.
Simplifica y aísla. Si no puedes encontrar el error, elimina declaraciones de una en una hasta que el error desaparezca, luego inspecciona de cerca la última declaración eliminada.