Validación HTML: CSS: "mask": X no es un valor de "mask".

Acerca de este problema HTML

La propiedad abreviada CSS mask te permite ocultar parcial o completamente porciones de un elemento aplicando una máscara gráfica. Es una abreviación para varias sub-propiedades incluyendo mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size y mask-composite. Debido a que es una propiedad abreviada, cada valor que proporciones debe corresponder a uno de los valores aceptados por estas sub-propiedades. El validador activa este error cuando encuentra un valor que no encaja en ninguna de ellas — por ejemplo, una palabra clave arbitraria, un nombre de función mal escrito, o una sintaxis no soportada.

Las causas comunes de este error incluyen:

Palabras clave arbitrarias — Usar nombres inventados como star-shape o circle-mask que no son valores CSS válidos.
Funciones o palabras clave mal escritas — Errores tipográficos como lnear-gradient() en lugar de linear-gradient(), o noen en lugar de none.
Valores con prefijo de navegador sin el valor estándar — Usar sintaxis de -webkit-mask o valores que no se alinean con la propiedad mask estándar.
Combinaciones de propiedades abreviadas inválidas — Proporcionar valores de sub-propiedades en un orden o combinación que la propiedad abreviada no acepta.
Envoltorio url() faltante — Referenciar una ruta de archivo de imagen directamente sin envolverla en la función url().

Esto importa para el cumplimiento de estándares porque los navegadores pueden ignorar silenciosamente valores de mask inválidos, resultando en que la máscara no se aplique en absoluto. Tu diseño podría verse completamente diferente a lo previsto, y el fallo puede ser difícil de depurar sin validación.

Valores válidos de `mask`

La propiedad mask acepta una o más capas de máscara separadas por comas. Cada capa puede incluir:

none — No se aplica ninguna máscara.
url() — Una referencia a un elemento de máscara SVG o un archivo de imagen (ej., url(mask.svg), url(mask.png)).
Funciones de imagen CSS — Como linear-gradient(), radial-gradient(), conic-gradient(), image(), etc.
Palabras clave de caja geométrica (para mask-clip / mask-origin) — Como content-box, padding-box, border-box, fill-box, stroke-box, view-box.
Palabras clave de composición (para mask-composite) — Como add, subtract, intersect, exclude.

Ejemplos

Incorrecto: palabra clave arbitraria como valor de máscara

<div style="mask: star-shape;">
  Contenido Enmascarado
</div>

El valor star-shape no es un valor de mask reconocido y será rechazado por el validador.

Incorrecto: función `url()` faltante

<div style="mask: star.svg;">
  Contenido Enmascarado
</div>

Una ruta de archivo sin envolver no es válida. Las referencias de imagen deben estar envueltas en la función url().

Correcto: usando `url()` para referenciar una imagen de máscara

<div style="mask: url(star.svg);">
  Contenido Enmascarado
</div>

Correcto: usando `none` para desactivar explícitamente el enmascarado

<div style="mask: none;">
  Sin Máscara Aplicada
</div>

Correcto: usando un gradiente como máscara

<div style="mask: linear-gradient(to right, transparent, black);">
  Contenido Desvanecido
</div>

Correcto: combinando múltiples valores de propiedad abreviada

<div style="mask: url(mask.png) no-repeat center / contain;">
  Contenido Enmascarado
</div>

Esto establece la imagen de máscara, comportamiento de repetición, posición y tamaño en una sola declaración abreviada.

Correcto: múltiples capas de máscara

<div style="mask: url(shape.svg) no-repeat, linear-gradient(to bottom, black, transparent);">
  Máscara Multicapa
</div>

Al corregir este error, verifica tu valor contra la especificación CSS Masking en MDN. Si estás usando versiones con prefijo de proveedor como -webkit-mask, también asegúrate de que la propiedad mask estándar esté presente con valores válidos para compatibilidad futura.