Validación HTML: CSS: "mask": Demasiados valores o los valores no son reconocidos.

Acerca de este problema de CSS

La propiedad abreviada CSS mask te permite ocultar partes de un elemento enmascarándolo o recortándolo en puntos específicos. Combina varias propiedades extendidas en una sola declaración: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, y mask-composite.

Debido a que mask es una propiedad abreviada que acepta valores para muchas sub-propiedades, es fácil provocar errores de validación. Las causas comunes incluyen:

Demasiados valores: Proporcionar más valores de los que permite la gramática de la propiedad abreviada, o duplicar valores para la misma sub-propiedad.
Valores no reconocidos: Usar valores específicos del proveedor (como palabras clave con prefijo -webkit-), errores tipográficos, o valores que pertenecen a una propiedad CSS diferente.
Orden incorrecto de valores: La propiedad abreviada tiene una gramática específica. Por ejemplo, los valores de mask-size deben seguir a los valores de mask-position y estar separados por /, similar a la propiedad abreviada background.
Mezclar conceptos de propiedades abreviadas y extendidas: Intentar establecer valores que no son parte de la gramática de la propiedad abreviada mask.

La sintaxis formal para una sola capa de máscara es:

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> ||
               <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> ||
               <masking-mode>

Esto es un problema para el cumplimiento de estándares porque el CSS inválido puede hacer que toda la declaración sea ignorada por los navegadores, causando que tu efecto de enmascarado falle silenciosamente. También afecta la compatibilidad entre navegadores — diferentes navegadores tienen niveles variables de soporte para la propiedad abreviada mask, y usar propiedades extendidas individuales es a menudo más confiable.

Para solucionar este problema:

Verifica cada valor en tu declaración mask y asegúrate de que sea un valor válido para una de las sub-propiedades de mask.
Usa propiedades extendidas en lugar de la abreviada si solo necesitas establecer uno o dos aspectos de la máscara. Esto evita ambigüedad y mejora la legibilidad.
Separa posición y tamaño con / si estás especificando ambos, ej., center / contain.
Elimina o separa los prefijos de proveedor — usa -webkit-mask para sintaxis específica de WebKit y el mask estándar para sintaxis compatible con estándares, pero no mezcles valores con prefijo en la propiedad sin prefijo.

Ejemplos

Incorrecto: demasiados valores o valores no reconocidos en la propiedad abreviada

<style>
  .masked {
    /* Error: demasiados valores / combinación no reconocida */
    mask: url(mask.svg) center center no-repeat contain;
  }
</style>
<div class="masked">Contenido</div>

Aquí, contain es un valor de mask-size pero debe estar separado de la posición con /. Sin la barra diagonal, el validador ve un valor extra no reconocido.

Correcto: sintaxis apropiada de propiedad abreviada con posición y tamaño

<style>
  .masked {
    mask: url(mask.svg) center / contain no-repeat;
  }
</style>
<div class="masked">Contenido</div>

El / separa mask-position (center) de mask-size (contain), igual que en la propiedad abreviada background.

Correcto: usando propiedades extendidas para claridad y compatibilidad

<style>
  .masked {
    width: 100px;
    height: 100px;
    background-color: #8cffb0;
    -webkit-mask-image: url(sun.svg);
    mask-image: url(sun.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
</style>
<div class="masked">Contenido</div>

Usar propiedades extendidas individuales evita completamente los problemas de análisis de propiedades abreviadas. Incluir el prefijo -webkit-mask-image junto con el mask-image estándar asegura un soporte de navegador más amplio.

Incorrecto: valor no reconocido en la propiedad abreviada

<style>
  .masked {
    /* "luminance" es un valor de mask-mode pero puede no ser reconocido en la propiedad abreviada por todos los validadores */
    mask: url(mask.png) luminance;
  }
</style>
<div class="masked">Contenido</div>

Correcto: usando la propiedad extendida para el modo de máscara

<style>
  .masked {
    mask-image: url(mask.png);
    mask-mode: luminance;
  }
</style>
<div class="masked">Contenido</div>

Cuando tengas dudas, dividir la propiedad abreviada mask en sus propiedades extendidas individuales es el enfoque más seguro. Hace tu intención explícita, evita errores de validación, y tiende a tener mejor soporte entre navegadores.