Verificação HTML: CSS: "mask": X não é um valor "mask".

Sobre este problema HTML

A propriedade CSS mask shorthand permite-lhe ocultar parcial ou totalmente partes de um elemento aplicando uma máscara gráfica. É um shorthand para várias sub-propriedades incluindo mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, e mask-composite. Porque é um shorthand, cada valor que você fornecer deve corresponder aos valores aceites de uma destas sub-propriedades. O validador aciona este erro quando encontra um valor que não se enquadra em nenhuma delas — por exemplo, uma palavra-chave arbitrária, um nome de função mal escrito, ou uma sintaxe não suportada.

Causas comuns deste erro incluem:

Palavras-chave arbitrárias — Usar nomes inventados como star-shape ou circle-mask que não são valores CSS válidos.
Funções ou palavras-chave mal escritas — Erros tipográficos como lnear-gradient() em vez de linear-gradient(), ou noen em vez de none.
Valores com prefixo de browser sem o valor padrão — Usar sintaxe -webkit-mask ou valores que não se alinham com a propriedade mask padrão.
Combinações de shorthand inválidas — Fornecer valores de sub-propriedades numa ordem ou combinação que o shorthand não aceita.
Wrapper url() em falta — Referenciar um caminho de ficheiro de imagem diretamente sem o envolver na função url().

Isto importa para a conformidade com os padrões porque os browsers podem silenciosamente ignorar valores mask inválidos, resultando na máscara não ser aplicada de todo. O seu design pode ficar completamente diferente do pretendido, e a falha pode ser difícil de depurar sem validação.

Valores `mask` válidos

A propriedade mask aceita uma ou mais camadas de máscara separadas por vírgulas. Cada camada pode incluir:

none — Nenhuma máscara é aplicada.
url() — Uma referência a um elemento de máscara SVG ou um ficheiro de imagem (ex: url(mask.svg), url(mask.png)).
Funções de imagem CSS — Tais como linear-gradient(), radial-gradient(), conic-gradient(), image(), etc.
Palavras-chave de caixa geométrica (para mask-clip / mask-origin) — Tais como content-box, padding-box, border-box, fill-box, stroke-box, view-box.
Palavras-chave de composição (para mask-composite) — Tais como add, subtract, intersect, exclude.

Exemplos

Incorreto: palavra-chave arbitrária como valor de máscara

<div style="mask: star-shape;">
  Conteúdo Mascarado
</div>

O valor star-shape não é um valor mask reconhecido e será rejeitado pelo validador.

Incorreto: função `url()` em falta

<div style="mask: star.svg;">
  Conteúdo Mascarado
</div>

Um caminho de ficheiro simples não é válido. Referências de imagem devem ser envolvidas na função url().

Correto: usar `url()` para referenciar uma imagem de máscara

<div style="mask: url(star.svg);">
  Conteúdo Mascarado
</div>

Correto: usar `none` para desativar explicitamente a mascaragem

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

Correto: usar um gradiente como máscara

<div style="mask: linear-gradient(to right, transparent, black);">
  Conteúdo Desbotado
</div>

Correto: combinar múltiplos valores shorthand

<div style="mask: url(mask.png) no-repeat center / contain;">
  Conteúdo Mascarado
</div>

Isto define a imagem de máscara, comportamento de repetição, posição e tamanho numa única declaração shorthand.

Correto: múltiplas camadas de máscara

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

Ao corrigir este erro, verifique novamente o seu valor contra a especificação CSS Masking no MDN. Se estiver a usar versões com prefixo de fornecedor como -webkit-mask, assegure-se também de que a propriedade mask padrão está presente com valores válidos para compatibilidade futura.