Skip to main content
Validación HTML

CSS: “X”: La propiedad “X” no existe.

Acerca de este problema de CSS

El validador marca cualquier declaración donde el token de propiedad no coincida con una propiedad CSS conocida en su conjunto de reglas. Las causas comunes incluyen errores tipográficos, guionado incorrecto, usar valores donde deberían ir nombres de propiedades, propiedades de borradores antiguos que fueron renombradas, o depender únicamente de propiedades experimentales/con prefijo de proveedor sin un equivalente estándar. También puede aparecer al copiar y pegar fragmentos que incluyen propiedades personalizadas no estándar.

Por qué es importante:

  • Compatibilidad del navegador: Las propiedades desconocidas son ignoradas, causando que los estilos fallen silenciosamente.
  • Mantenibilidad: Los errores tipográficos y la sintaxis no estándar hacen que el CSS sea más difícil de depurar.
  • Cumplimiento de estándares: Un CSS limpio y validado reduce las sorpresas entre navegadores y facilita el mantenimiento futuro.

Cómo solucionarlo:

  1. Verifica la ortografía y el guionado exactamente (ej. text-decoration-skip-ink, no text-decoration-skipink).
  2. Verifica que la propiedad existe en MDN o en las especificaciones CSS; si no está documentada, probablemente sea inválida.
  3. Reemplaza los nombres obsoletos o de borrador con los estandarizados actuales.
  4. Si usas características experimentales, incluye un fallback estándar y mantén las versiones con prefijo de proveedor junto a la propiedad sin prefijo cuando sea compatible.
  5. Elimina tokens específicos de framework o herramienta que no sean CSS válido en tiempo de ejecución.
  6. No inventes propiedades. Si necesitas datos personalizados para JS, usa atributos data-* en HTML, no propiedades CSS falsas.

Ejemplos

Ejemplo que desencadena el error (error tipográfico) y la versión corregida

Inválido:

<p style="colr: red;">Hello</p>

Válido:

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

Ejemplo usando un nombre obsoleto/de borrador reemplazado con la propiedad actual

Inválido (nombre de borrador anterior):

<div style="gap: 1rem; grid-row-gap: 8px;"></div>

Válido (propiedad actual y estandarizada):

<div style="row-gap: 8px; gap: 1rem;"></div>

Ejemplo con propiedad con prefijo de proveedor más fallback estándar

Inválido (solo con prefijo de proveedor, falta la propiedad estándar):

<div style="-webkit-user-select: none;"></div>

Válido (fallback más prefijo):

<div style="user-select: none; -webkit-user-select: none;"></div>

Ejemplo eliminando un mal uso de nombre de propiedad personalizada no estándar

Inválido (intentando inventar una propiedad):

<div style="button-style: primary;"></div>

Válido (usar clases y propiedades CSS reales):

<style>
  .btn--primary {
    background-color: #0b5fff;
    color: #fff;
  }
</style>
<button class="btn--primary">Submit</button>

Ejemplo con propiedades personalizadas (variables) usadas correctamente

Uso válido de propiedades personalizadas CSS (no desencadenará el error porque la propiedad es estándar y las propiedades personalizadas comienzan con --):

<style>
  :root {
    --brand-color: #0b5fff;
  }
  .tag {
    color: var(--brand-color);
  }
</style>
<span class="tag">Tag</span>

Documento completo con propiedades corregidas

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS Property Validation Fixes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .card {
        display: grid;
        gap: 1rem;
        row-gap: 0.5rem;
        user-select: none;
        -webkit-user-select: none;
        color: #222;
      }
    </style>
  </head>
  <body>
    <div class="card">Valid CSS properties in use</div>
  </body>
</html>

Lista de verificación rápida:

  • Confirma la propiedad en MDN. Si no se encuentra, probablemente sea inválida.
  • Corrige la ortografía/mayúsculas; las propiedades CSS están en minúsculas con guiones.
  • Prefiere nombres estandarizados; mantén los prefijos solo como complementos.
  • Usa propiedades personalizadas CSS que comiencen con -- si necesitas variables.
  • Elimina marcadores de posición específicos de herramientas antes de la validación.

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.