Verificação HTML: Valor incorreto X para o atributo "media" no elemento "link": Erro de análise.

Sobre este problema HTML

O atributo media informa o navegador sob que condições uma folha de estilos vinculada (ou outro recurso) deve ser aplicada. O seu valor deve ser uma lista de media query válida conforme definido pela especificação CSS Media Queries. Quando o validador HTML W3C reporta um erro de análise para este atributo, significa que o valor não pôde ser analisado como uma media query válida. O navegador pode ignorar completamente o atributo ou comportar-se de forma imprevisível, potencialmente carregando a folha de estilos em todas as condições ou não carregando de todo.

Causas comuns deste erro incluem:

Erros tipográficos em tipos ou características de media — por ex., scrren em vez de screen, ou max-widht em vez de max-width.
Parênteses em falta ao redor de características de media — por ex., max-width: 600px em vez de (max-width: 600px).
Caracteres inválidos ou perdidos — por ex., vírgulas extras, ponto e vírgulas, ou parênteses não correspondentes.
Usar sintaxe CSS em vez de sintaxe de media query — por ex., escrever @media screen ou incluir chavetas.
Operadores lógicos incorretos — por ex., usar or no nível superior em vez de uma vírgula, ou errar a grafia de not ou only.
Marcadores de posição de template server-side não resolvidos — por ex., media="{{mediaQuery}}" renderizado literalmente.

Acertar isto é importante para conformidade com padrões e comportamento previsível entre navegadores. Os navegadores são geralmente indulgentes e podem tentar recuperar de media queries mal formadas, mas o comportamento de recuperação não é garantido ser consistente. Um atributo media quebrado pode fazer com que folhas de estilos carreguem quando não deviam (desperdiçando largura de banda) ou não carreguem quando deviam (quebrando o layout). Também afeta a performance, uma vez que os navegadores usam o atributo media para priorizar o carregamento de recursos.

Para corrigir o problema, verifique que o seu valor media é uma media query sintaticamente correta. Use tipos de media válidos (screen, print, all), envolva características de media em parênteses, e separe múltiplas queries com vírgulas.

Exemplos

Incorreto: parênteses em falta ao redor da característica de media

<!-- ❌ Erro de análise: características de media devem estar envolvidas em parênteses -->

<link rel="stylesheet" href="responsive.css" media="max-width: 600px">

Correto: parênteses ao redor da característica de media

<link rel="stylesheet" href="responsive.css" media="(max-width: 600px)">

Incorreto: erro tipográfico no tipo de media

<!-- ❌ Erro de análise: "scrren" não é um tipo de media válido -->

<link rel="stylesheet" href="styles.css" media="scrren">

Correto: tipo de media válido

<link rel="stylesheet" href="styles.css" media="screen">

Incorreto: usar `or` em vez de vírgula para separar queries

<!-- ❌ Erro de análise: "or" no nível superior não é válido entre media queries -->

<link rel="stylesheet" href="styles.css" media="screen or print">

Correto: lista de media query separada por vírgulas

<link rel="stylesheet" href="styles.css" media="screen, print">

Incorreto: ponto e vírgula perdido no valor

<!-- ❌ Erro de análise: ponto e vírgulas não são válidos em media queries -->

<link rel="stylesheet" href="styles.css" media="screen; (max-width: 768px)">

Correto: combinar tipo de media e característica com `and`

<link rel="stylesheet" href="styles.css" media="screen and (max-width: 768px)">

Mais exemplos de media queries válidas

<!-- Tipo de media simples -->

<link rel="stylesheet" href="print.css" media="print">

<!-- Aplicar a todos os media (comportamento padrão, mas explícito) -->

<link rel="stylesheet" href="base.css" media="all">

<!-- Múltiplas condições com "and" -->

<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1024px)">

<!-- Usar "not" para excluir um tipo de media -->

<link rel="stylesheet" href="no-print.css" media="not print">

<!-- Múltiplas queries separadas por vírgulas (OR lógico) -->

<link rel="stylesheet" href="special.css" media="(max-width: 600px), (orientation: portrait)">

<!-- Prefers-color-scheme para modo escuro -->

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

Se não tem a certeza se a sua media query é válida, tente testá-la nas ferramentas de programador de um navegador adicionando um bloco <style> com @media e a mesma query — se o navegador a destacar como inválida, o mesmo valor falhará no atributo media.