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

Acerca de este problema HTML

La propiedad CSS abreviada mask te permite ocultar parcial o completamente porciones de un elemento aplicando una máscara gráfica. Es una abreviatura para varias subpropiedades incluyendo mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, y mask-composite. Como es una abreviatura, cada valor que proporciones debe corresponder a uno de los valores aceptados de estas subpropiedades. 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 compatible.

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 abreviatura inválidas — Proporcionar valores de subpropiedades en un orden o combinación que la abreviatura no acepta.
Falta del wrapper url() — 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 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 `mask` válidos

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 de geometría (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 mask reconocido y será rechazado por el validador.

Incorrecto: falta la función `url()`

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

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

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

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

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

<div style="mask: none;">
  Sin máscara aplicada
</div>

Correcto: usar un gradiente como máscara

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

Correcto: combinar múltiples valores de abreviatura

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

Esto establece la imagen de máscara, el comportamiento de repetición, la posición y el 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 la compatibilidad futura.