Validación HTML: Valor incorrecto "X" para el atributo "media" en el elemento "link": medio "X" no reconocido.

Acerca de este problema HTML

El atributo media en un elemento <link> especifica las condiciones bajo las cuales se debe aplicar el recurso enlazado. Acepta tanto un tipo de medio simple como una media query completa. Cuando el validador reporta “medio no reconocido”, significa que el valor que has proporcionado no coincide con ningún tipo de medio conocido o sintaxis de media query válida.

Varios tipos de medios más antiguos que se definieron en especificaciones CSS anteriores han quedado obsoletos. Tipos como handheld, projection, tv, tty, aural, braille y embossed ya no se reconocen como válidos. CSS y HTML modernos solo admiten tres tipos de medios: all, screen y print. Si estás usando un tipo obsoleto, debes reemplazarlo con una media query moderna apropiada que se dirija a las características del dispositivo que necesitas.

Más allá de los tipos obsoletos, este error también ocurre cuando una expresión de media query está mal formada — por ejemplo, faltan paréntesis alrededor de una expresión de característica, se usa un nombre de característica desconocido, o hay un error tipográfico en el valor.

Por qué esto importa

Cumplimiento de estándares: Usar tipos de medios no reconocidos significa que tu HTML no se ajusta a las especificaciones actuales de HTML y CSS.
Comportamiento del navegador: Los navegadores pueden ignorar completamente el elemento <link> o aplicar el recurso incondicionalmente cuando encuentran un tipo de medio no reconocido, lo que lleva a resultados inesperados.
Rendimiento: El atributo media ayuda a los navegadores a priorizar la carga de recursos. Una media query válida permite al navegador diferir la carga de hojas de estilo que no coinciden con el contexto actual (por ejemplo, hojas de estilo de impresión), mejorando el rendimiento de carga de la página.

Cómo solucionarlo

Reemplaza los tipos de medios obsoletos con screen, print o all, o usa media queries modernas que se dirijan a características específicas del dispositivo.
Revisa errores tipográficos en tu tipo de medio o expresión de query.
Valida la sintaxis de tu media query — las expresiones de características deben estar envueltas en paréntesis y usar nombres de características reconocidos como max-width, orientation o prefers-color-scheme.

Ejemplos

Incorrecto: usar un tipo de medio obsoleto

<link rel="stylesheet" href="mobile.css" media="handheld">

El tipo de medio handheld está obsoleto y desencadenará el error de validación.

Incorrecto: tipo de medio mal escrito

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

Incorrecto: media query mal formada

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

La expresión de característica no tiene los paréntesis que la rodean.

Correcto: usar tipos de medios válidos

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

Cuando no se especifica el atributo media, por defecto es all.

Correcto: reemplazar tipos obsoletos con media queries modernas

En lugar de media="handheld", usa una media query que se dirija a pantallas pequeñas o capacidades específicas del dispositivo:

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

Correcto: usar media queries complejas

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="portrait.css" media="screen and (orientation: portrait)">
<link rel="stylesheet" href="large.css" media="screen and (min-width: 1200px)">

Referencia de tipos de medios válidos

Tipo de medio	Descripción
`all`	Coincide con todos los dispositivos (por defecto cuando se omite)
`print`	Coincide con impresoras y modo de vista previa de impresión
`screen`	Coincide con pantallas (computadoras, tabletas, teléfonos)

Para cualquier cosa más específica que estos tres tipos, usa expresiones de características de medios como (max-width: 600px), (hover: hover) o (prefers-reduced-motion: reduce) para dirigirte a las características exactas del dispositivo que necesitas.