Skip to main content
Validación HTML

CSS: “left”: El carácter n no es un dígito decimal, punto decimal, ni marca exponencial de notación “e”.

Acerca de este problema HTML

El validador W3C analiza los valores CSS en línea carácter por carácter. Cuando encuentra un valor numérico para la propiedad left, espera que los caracteres que siguen sean parte de un número válido (dígitos, un punto decimal, o e para notación científica) o una unidad CSS reconocida. Si en su lugar encuentra una letra inesperada como n, genera este error. Esto puede ocurrir de varias maneras:

  • Unidades faltantes: Escribir left: 10; en lugar de left: 10px;. La especificación CSS requiere una unidad para todos los valores de longitud distintos de cero. Aunque algunos navegadores pueden interpretar números sin unidad en modo quirks, esto es CSS inválido y produce resultados impredecibles entre navegadores.
  • Errores tipográficos en unidades: Escribir algo como left: 10n; o left: 10xp; donde la unidad pretendida era px pero un error tipográfico introdujo caracteres inválidos.
  • Artefactos de plantillas o scripts: Valores generados dinámicamente como left: {{offset}}px; que no se resolvieron correctamente, dejando caracteres no numéricos en la salida.
  • Usar calc() incorrectamente: Escribir left: 10 + 5px; en lugar de left: calc(10px + 5px);.

La propiedad left acepta los siguientes tipos de valores:

  • Longitudes: Un número seguido de una unidad como px, em, rem, vw, vh, ch, etc. (ej., left: 10px;)
  • Porcentajes: Un número seguido de % (ej., left: 50%;)
  • Palabras clave: auto, inherit, initial, unset, o revert
  • Funciones: calc(), min(), max(), clamp(), etc.
  • Cero: El valor 0 es el único número que no requiere una unidad.

El CSS inválido no solo activa errores de validación sino que puede causar problemas de diseño. Los navegadores pueden ignorar toda la declaración, recurriendo al valor por defecto, lo que puede romper tu posicionamiento pretendido. Asegurar CSS válido mejora la consistencia entre navegadores y la mantenibilidad.

Ejemplos

Unidad faltante (activa el error)

<div style="position: absolute; left: 10;">
  Elemento posicionado
</div>

El validador lee 10 y luego encuentra el ; (o en otros casos una letra perdida como n), que no es parte válida de un valor de longitud CSS.

Error tipográfico en unidad (activa el error)

<div style="position: absolute; left: 10xn;">
  Elemento posicionado
</div>

Corregido con una unidad de longitud válida

<div style="position: absolute; left: 10px;">
  Elemento posicionado
</div>

Corregido con un porcentaje

<div style="position: absolute; left: 50%;">
  Elemento posicionado
</div>

Corregido con la palabra clave auto

<div style="position: absolute; left: auto;">
  Elemento posicionado
</div>

Corregido con calc()

<div style="position: absolute; left: calc(50% - 20px);">
  Elemento posicionado
</div>

Cero sin unidad (válido)

<div style="position: absolute; left: 0;">
  Elemento posicionado
</div>

Siempre verifica que cada valor numérico distinto de cero para left (y otras propiedades basadas en longitud como top, right, bottom, width, margin, etc.) incluya una unidad CSS válida. Si estás generando estilos dinámicamente, verifica que las variables de plantilla se resuelvan a valores apropiados antes del renderizado.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.