Verificação HTML: CSS: "mask": Demasiados valores ou valores não são reconhecidos.

Sobre este problema de CSS

A propriedade CSS mask (abreviada) permite esconder partes de um elemento através de mascaramento ou recorte em pontos específicos. Combina várias propriedades longas numa única declaração: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size e mask-composite.

Como mask é uma propriedade abreviada que aceita valores para muitas sub-propriedades, é fácil desencadear erros de validação. As causas comuns incluem:

Demasiados valores: Fornecer mais valores do que a gramática da propriedade abreviada permite, ou duplicar valores para a mesma sub-propriedade.
Valores não reconhecidos: Usar valores específicos de fornecedor (como palavras-chave com prefixo -webkit-), erros de escrita ou valores que pertencem a uma propriedade CSS diferente.
Ordem incorreta dos valores: A propriedade abreviada tem uma gramática específica. Por exemplo, os valores mask-size devem seguir os valores mask-position e ser separados por /, semelhante à propriedade abreviada background.
Misturar conceitos de propriedades abreviadas e longas: Tentar definir valores que não fazem parte da gramática da propriedade abreviada mask.

A sintaxe formal para uma única camada de máscara é:

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

Isto é um problema para a conformidade com padrões porque CSS inválido pode levar à declaração inteira ser ignorada pelos navegadores, fazendo com que o seu efeito de mascaramento falhe silenciosamente. Também afeta a compatibilidade entre navegadores — diferentes navegadores têm níveis variados de suporte para a propriedade abreviada mask, e usar propriedades longas individuais é frequentemente mais confiável.

Para corrigir este problema:

Verifique cada valor na sua declaração mask e certifique-se de que é um valor válido para uma das sub-propriedades mask.
Use propriedades longas em vez da abreviada se só precisar de definir um ou dois aspetos da máscara. Isto evita ambiguidade e melhora a legibilidade.
Separe posição e tamanho com / se estiver a especificar ambos, ex.: center / contain.
Remova ou separe prefixos de fornecedor — use -webkit-mask para sintaxe específica do WebKit e o padrão mask para sintaxe compatível com padrões, mas não misture valores com prefixo na propriedade sem prefixo.

Exemplos

Incorreto: demasiados valores ou valores não reconhecidos na propriedade abreviada

<style>
  .masked {
    /* Erro: demasiados valores / combinação não reconhecida */
    mask: url(mask.svg) center center no-repeat contain;
  }
</style>
<div class="masked">Conteúdo</div>

Aqui, contain é um valor mask-size mas deve ser separado da posição com /. Sem a barra, o validador vê um valor extra não reconhecido.

Correto: sintaxe adequada da propriedade abreviada com posição e tamanho

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

O / separa mask-position (center) de mask-size (contain), tal como na propriedade abreviada background.

Correto: usar propriedades longas para clareza e compatibilidade

<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">Conteúdo</div>

Usar propriedades longas individuais evita completamente problemas de análise da propriedade abreviada. Incluir o prefixo -webkit-mask-image juntamente com o padrão mask-image garante um suporte mais amplo do navegador.

Incorreto: valor não reconhecido na propriedade abreviada

<style>
  .masked {
    /* "luminance" é um valor mask-mode mas pode não ser reconhecido na propriedade abreviada por todos os validadores */
    mask: url(mask.png) luminance;
  }
</style>
<div class="masked">Conteúdo</div>

Correto: usar a propriedade longa para o modo de máscara

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

Em caso de dúvida, dividir a propriedade abreviada mask nas suas propriedades longas individuais é a abordagem mais segura. Torna a sua intenção explícita, evita erros de validação e tende a ter melhor suporte entre navegadores.