Validación HTML: CSS: Error léxico en la línea X, columna Y. Encontrado: Z

Acerca de este problema HTML

Un error léxico es un fallo de análisis de bajo nivel. A diferencia de un error de sintaxis donde la estructura está mal pero los caracteres son individualmente válidos, un error léxico significa que el analizador no puede ni siquiera formar tokens válidos a partir de la entrada. La especificación CSS define un conjunto preciso de caracteres y secuencias que son significativos — nombres de propiedades, valores, signos de puntuación como ;, :, {, }, etc. Cuando el analizador encuentra algo fuera de estas expectativas, como @ donde debería haber un ;, una comilla curva (“inteligente”) en lugar de una comilla recta, o un carácter Unicode extraño, genera un error léxico.

Esto importa por varias razones. Primero, los navegadores manejan CSS inválido de manera impredecible — algunos pueden omitir todo el bloque de regla, otros pueden ignorar solo la declaración rota, y el comportamiento puede variar entre versiones de navegadores. Esto lleva a renderizado inconsistente para tus usuarios. Segundo, un solo error léxico puede propagarse, causando que el analizador malinterprete el CSS válido subsecuente también, potencialmente rompiendo estilos mucho más allá de la línea problemática. Tercero, el CSS limpio y válido es más fácil de mantener, depurar y colaborar en él.

Las causas comunes de este error incluyen:

Caracteres inválidos usados en lugar de puntuación — ej., @, !, o # donde debería haber un punto y coma o dos puntos.
Comillas curvas (inteligentes) — pegar CSS desde procesadores de texto o editores CMS que convierten "comillas rectas" a "comillas curvas" o 'apóstrofes curvos'.
Punto y coma faltante — aunque no siempre es un error léxico, un ; faltante puede hacer que el nombre de propiedad de la siguiente línea se lea como parte del valor anterior, produciendo secuencias de caracteres inesperadas.
Caracteres invisibles no-ASCII — marcas de orden de bytes (BOM), espacios de ancho cero, o espacios de no separación que son invisibles en la mayoría de los editores pero inválidos en tokens CSS.
Artefactos de copiar-pegar — copiar código desde PDFs, sitios web, o aplicaciones de chat que insertan caracteres de formato ocultos.

Para solucionar el problema, ve a la línea y columna exactas que el error referencia. Mira el carácter que reporta como “Encontrado” y determina cuál debería ser el carácter correcto. Si no puedes ver nada mal, intenta eliminar los caracteres alrededor de la posición reportada y volver a escribirlos manualmente — esto elimina los problemas de caracteres invisibles.

Ejemplos

Carácter inválido en lugar de punto y coma

El símbolo @ después de blue no es puntuación CSS válida en este contexto:

<style>
  h1 {
    color: blue@
    font-size: 24px;
  }
</style>

Reemplaza @ con un punto y coma apropiado:

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }
</style>

Comillas curvas en font-family

Las comillas curvas copiadas desde un procesador de texto causan un error léxico:

<style>
  body {
    font-family: \u201CHelvetica Neue\u201D, sans-serif;
  }
</style>

Usa comillas dobles rectas en su lugar:

<style>
  body {
    font-family: "Helvetica Neue", sans-serif;
  }
</style>

Carácter extraño en un estilo en línea

Una comilla invertida accidental en un atributo style desencadena el error:

<p style="color: red`; margin: 0;">Hello</p>

Elimina el carácter inválido:

<p style="color: red; margin: 0;">Hello</p>

Espacio de no separación invisible

A veces el error apunta a lo que parece espacio vacío. Un espacio de no separación (\u00A0) pegado desde otra fuente puede ocultarse entre tokens:

<style>
  .box {
    display:\u00A0flex;
  }
</style>

Elimina el espacio y vuelve a escribirlo como un espacio ASCII normal:

<style>
  .box {
    display: flex;
  }
</style>

Si sospechas de caracteres invisibles, usa la función “mostrar espacios en blanco” o “mostrar caracteres invisibles” de tu editor de texto, o pega el CSS en un editor hexadecimal para inspeccionar los bytes en bruto. Configurar tu editor para guardar archivos en UTF-8 sin BOM también ayuda a prevenir errores léxicos relacionados con codificación.