Validación HTML: CSS: Regla at no reconocida "@font-feature-values"

Acerca de este problema HTML

La regla at @font-feature-values te permite definir nombres legibles para los índices de características de fuente OpenType, que luego puedes referenciar usando propiedades como font-variant-alternates. Por ejemplo, en lugar de recordar que el índice de adorno 1 se mapea a un estilo “elegante”, puedes definir un valor con nombre y usarlo semánticamente en todo tu CSS. Esta es una característica legítima y útil definida en la especificación CSS Fonts Module Level 4.

El error de validación ocurre porque el validador CSS de W3C no siempre se mantiene al día con las especificaciones CSS más nuevas. La regla @font-feature-values, junto con sus bloques de tipo de característica asociados como @swash, @styleset, @character-variant, @ornaments, @annotation y @stylistic, pueden simplemente no estar en la gramática reconocida del validador aún. Esto no significa que tu CSS esté roto o sea inválido — significa que el validador tiene una brecha en su cobertura.

Dicho esto, hay razones prácticas para considerar alternativas. Si necesitas pasar una validación W3C estricta (por ejemplo, como requisito de proyecto u obligación contractual), o si necesitas soportar navegadores más antiguos que carecen de soporte para @font-feature-values, la propiedad font-feature-settings ofrece una manera más ampliamente reconocida de activar características OpenType. El compromiso es que font-feature-settings usa etiquetas de características OpenType de cuatro caracteres sin procesar en lugar de nombres amigables, haciéndola menos legible pero más portable.

Cómo solucionarlo

Tienes varias opciones:

Ignora la advertencia. Si tus navegadores objetivo soportan @font-feature-values, el CSS es válido según la especificación. El error del validador es un falso positivo.
Mueve la regla at a una hoja de estilos externa. Si estás validando HTML y el CSS está en un bloque <style>, moverlo a un archivo .css externo puede ayudarte a separar responsabilidades y omitir la validación CSS durante las verificaciones HTML.
Reemplaza con font-feature-settings. Usa la propiedad de nivel más bajo para activar características OpenType directamente por sus códigos de etiqueta.

Ejemplos

Código que desencadena el error de validación

@font-feature-values "MyFamily" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MyFamily", serif;
  font-variant-alternates: swash(fancy);
}

El validador no reconoce @font-feature-values y lo marca como error, aunque este es CSS que cumple con la especificación.

Corregido: usando `font-feature-settings` en su lugar

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Font Feature Example</title>
    <style>
      p {
        font-family: "MyFamily", serif;
        font-feature-settings: "swsh" 1;
      }
    </style>
  </head>
  <body>
    <p>This text uses OpenType swash glyphs via font-feature-settings.</p>
  </body>
</html>

La propiedad font-feature-settings acepta etiquetas de características OpenType directamente. Las etiquetas comunes incluyen "swsh" para adornos, "smcp" para versalitas, "liga" para ligaduras estándar y "onum" para números de estilo antiguo. Este enfoque evita completamente el error de regla at no reconocida.

Corregido: manteniendo `@font-feature-values` con un respaldo

Si quieres usar la sintaxis más legible de @font-feature-values mientras también proporcionas soporte de respaldo, puedes combinar ambos enfoques:

p {
  font-family: "MyFamily", serif;
  font-feature-settings: "swsh" 1;
  font-variant-alternates: swash(fancy);
}

@font-feature-values "MyFamily" {
  @swash {
    fancy: 1;
  }
}

Los navegadores que entienden font-variant-alternates y @font-feature-values usarán el valor con nombre. Otros recurrirán a font-feature-settings. El error de validación persistirá con este enfoque, pero tu CSS será robusto y cumplirá con la especificación independientemente.