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 deleft: 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;oleft: 10xp;donde la unidad pretendida erapxpero 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: Escribirleft: 10 + 5px;en lugar deleft: 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, orevert -
Funciones:
calc(),min(),max(),clamp(), etc. -
Cero: El valor
0es 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.
Más información: