Validación HTML: Valor incorrecto X para el atributo "media" en el elemento "link": error de análisis.

Acerca de este problema HTML

El atributo media le dice al navegador bajo qué condiciones se debe aplicar una hoja de estilos enlazada (u otro recurso). Su valor debe ser una lista de media queries válida según se define en la especificación CSS Media Queries. Cuando el Validador HTML de W3C reporta un error de análisis para este atributo, significa que el valor no pudo ser analizado como una media query válida. El navegador puede ignorar el atributo completamente o comportarse de forma impredecible, potencialmente cargando la hoja de estilos en todas las condiciones o no cargándola en absoluto.

Las causas comunes de este error incluyen:

Errores tipográficos en tipos de medios o características — ej., scrren en lugar de screen, o max-widht en lugar de max-width.
Paréntesis faltantes alrededor de características de medios — ej., max-width: 600px en lugar de (max-width: 600px).
Caracteres inválidos o extraños — ej., comas adicionales, punto y comas, o paréntesis sin cerrar.
Usar sintaxis CSS en lugar de sintaxis de media query — ej., escribir @media screen o incluir llaves.
Operadores lógicos incorrectos — ej., usar or a nivel superior en lugar de una coma, o escribir mal not u only.
Marcadores de plantillas del lado del servidor sin resolver — ej., media="{{mediaQuery}}" renderizado literalmente.

Hacer esto correctamente importa para el cumplimiento de estándares y el comportamiento predecible entre navegadores. Los navegadores son generalmente permisivos y pueden intentar recuperarse de media queries malformadas, pero el comportamiento de recuperación no está garantizado que sea consistente. Un atributo media roto puede causar que las hojas de estilos se carguen cuando no deberían (desperdiciando ancho de banda) o que no se carguen cuando deberían (rompiendo el diseño). También afecta el rendimiento, ya que los navegadores usan el atributo media para priorizar la carga de recursos.

Para solucionar el problema, verifica que tu valor media sea una media query sintácticamente correcta. Usa tipos de medios válidos (screen, print, all), envuelve las características de medios en paréntesis, y separa múltiples queries con comas.

Ejemplos

Incorrecto: paréntesis faltantes alrededor de la característica de medio

<!-- ❌ Error de análisis: las características de medios deben estar envueltas en paréntesis -->

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

Correcto: paréntesis alrededor de la característica de medio

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

Incorrecto: error tipográfico en el tipo de medio

<!-- ❌ Error de análisis: "scrren" no es un tipo de medio válido -->

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

Correcto: tipo de medio válido

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

Incorrecto: usar `or` en lugar de una coma para separar queries

<!-- ❌ Error de análisis: "or" a nivel superior no es válido entre media queries -->

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

Correcto: lista de media queries separadas por comas

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

Incorrecto: punto y coma extraño en el valor

<!-- ❌ Error de análisis: los punto y comas no son válidos en media queries -->

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

Correcto: combinar tipo de medio y característica con `and`

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

Más ejemplos de media queries válidas

<!-- Tipo de medio simple -->

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

<!-- Aplicar a todos los medios (comportamiento por defecto, pero explícito) -->

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

<!-- Múltiples condiciones con "and" -->

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

<!-- Usar "not" para excluir un tipo de medio -->

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

<!-- Múltiples queries separadas por comas (OR lógico) -->

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

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

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

Si no estás seguro de si tu media query es válida, prueba a testarla en las herramientas de desarrollador de un navegador añadiendo un bloque <style> con @media y la misma query — si el navegador la resalta como inválida, el mismo valor fallará en el atributo media.