Verificação HTML: CSS: "mask-image": X não é um valor válido para "mask-image".

Sobre este problema HTML

A propriedade CSS mask-image define uma ou mais camadas de máscara para um elemento, controlando quais partes ficam visíveis com base no canal alfa ou luminância da máscara. De acordo com a especificação CSS Masking, a propriedade aceita uma lista separada por vírgulas de referências de máscara, onde cada valor individual deve ser um dos seguintes:

none — Nenhuma camada de máscara é aplicada.
Um valor <image> — Isto inclui referências url() a ficheiros de imagem (PNG, SVG, etc.) e funções de imagem CSS como image().
Um gradiente CSS — Funções como linear-gradient(), radial-gradient(), conic-gradient(), e as suas variantes repetidas (repeating-linear-gradient(), etc.).

Quando o validador encontra um valor que não corresponde a nenhuma destas formas aceites, sinaliza o erro. Isto é importante porque os navegadores irão descartar silenciosamente declarações mask-image inválidas, o que significa que o seu efeito de máscara pretendido não se aplicará, e o elemento será renderizado como se não tivesse máscara definida.

Causas comuns

Erros de escrita nos nomes de gradientes ou funções são um gatilho frequente. Por exemplo, escrever linear-gradiant() em vez de linear-gradient(), ou radial-grad() em vez de radial-gradient().

Caminhos de imagem sem url() também causarão este erro. O valor mask.png não é válido por si só — deve estar envolvido como url('mask.png').

Palavras-chave não suportadas ou strings arbitrárias como mask-image: circle ou mask-image: overlay não são válidas. A única palavra-chave que mask-image aceita é none.

Sintaxe de gradiente mal formada como parênteses em falta, pontos de cor inválidos, ou palavras-chave de direção incorretas também podem produzir este erro. Por exemplo, linear-gradient(right, red, blue) é inválido porque as palavras-chave direcionais requerem o prefixo to.

Valores com prefixo de fornecedor usados sem o prefixo correspondente na propriedade também podem provocar problemas. Usar -webkit-gradient() como valor para a propriedade mask-image padrão pode não validar.

Exemplos

Incorreto: caminho de imagem sem `url()`

<div style="mask-image: mask.png;">
  Conteúdo aqui
</div>

Correto: caminho de imagem envolvido em `url()`

<div style="mask-image: url('mask.png');">
  Conteúdo aqui
</div>

Incorreto: erro de escrita no nome da função de gradiente

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

Correto: função de gradiente corretamente escrita

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

Incorreto: palavra-chave `to` em falta na direção do gradiente

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

Correto: direção usa a palavra-chave `to`

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

Incorreto: palavra-chave não suportada

<div style="mask-image: overlay;">
  Conteúdo aqui
</div>

Correto: usar `none` para desativar explicitamente a máscara

<div style="mask-image: none;">
  Conteúdo aqui
</div>

Correto: múltiplas camadas de máscara

<div style="mask-image: url('star.svg'), linear-gradient(to bottom, black, transparent);">
  Conteúdo aqui
</div>

Correto: gradiente radial como máscara

<div style="mask-image: radial-gradient(circle, black 50%, transparent 100%);">
  Conteúdo aqui
</div>

Note que o suporte dos navegadores para a propriedade mask-image sem prefixo melhorou significativamente, mas alguns navegadores mais antigos ainda podem requerer o prefixo -webkit-mask-image. Quando usar a versão com prefixo, certifique-se de incluir também a propriedade padrão para compatibilidade futura. O validador da W3C verifica a sintaxe padrão, portanto certifique-se sempre de que a sua declaração mask-image padrão usa valores válidos, mesmo que inclua também versões com prefixo.