Validación HTML: Valor incorrecto "screen,projection" para el atributo "media" en el elemento "link": El media "projection" ha sido deprecado

Acerca de este problema HTML

Los tipos de media describen la categoría general de un dispositivo para el cual está destinada una hoja de estilos. Los valores más comúnmente utilizados son screen (para pantallas de ordenador, tablets y teléfonos), print (para vista previa de impresión y páginas impresas), y all (el valor por defecto, para todos los dispositivos).

Entendiendo los tipos de media deprecados

CSS 2.1 y Media Queries 3 definieron varios tipos de media adicionales: tty, tv, projection, handheld, braille, embossed, y aural. Todos estos fueron deprecados en la especificación Media Queries 4. El tipo projection estaba originalmente destinado para presentaciones proyectadas (como diapositivas), pero los navegadores modernos nunca distinguieron de manera significativa entre los contextos de renderizado screen y projection.

Por qué esto es un problema

Cumplimiento de estándares: Usar tipos de media deprecados produce advertencias del validador y significa que tu código no se ajusta a los estándares web actuales.
Sin efecto práctico: Los navegadores modernos tratan los tipos de media no reconocidos o deprecados como que no coinciden, lo que significa que una hoja de estilos dirigida solo a projection nunca se aplicaría. Cuando se combina con screen en una lista separada por comas (por ejemplo, screen,projection), la parte de projection simplemente se ignora — añade desorden sin beneficio.
Mantenibilidad: Mantener valores deprecados en tu marcado puede confundir a otros desarrolladores y sugerir que el código apunta a una plataforma que ya no existe en la especificación.

Cómo solucionarlo

Elimina el tipo de media deprecado del atributo media, manteniendo solo tipos válidos como screen, print, speech, o all.
Elimina completamente el atributo media si el valor restante es all o si solo necesitas screen (ya que screen es el contexto de renderizado más común y las hojas de estilo sin atributo media por defecto son all).
Usa características de media modernas en lugar de tipos de media deprecados si necesitas apuntar a capacidades específicas del dispositivo (por ejemplo, (hover: none), (pointer: coarse), (display-mode: fullscreen)).

Ejemplos

❌ Incorrecto: Usar el tipo de media deprecado `projection`

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

Esto provoca la advertencia de validación porque projection ha sido deprecado.

✅ Correcto: Usar solo el tipo de media `screen`

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

✅ Correcto: Eliminar completamente el atributo `media`

Si quieres que la hoja de estilos se aplique a todos los tipos de media (el comportamiento por defecto), simplemente omite el atributo:

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

✅ Correcto: Combinar tipos de media válidos

Si necesitas que tu hoja de estilos se aplique tanto a contextos de pantalla como de impresión:

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

❌ Otros tipos de media deprecados que evitar

Todos los siguientes están deprecados y producirán advertencias similares:

<link rel="stylesheet" href="a.css" media="handheld">
<link rel="stylesheet" href="b.css" media="tv">
<link rel="stylesheet" href="c.css" media="braille">
<link rel="stylesheet" href="d.css" media="embossed">
<link rel="stylesheet" href="e.css" media="tty">
<link rel="stylesheet" href="f.css" media="aural">

Reemplaza estos con screen, print, speech, all, o usa características de media específicas para apuntar a las características del dispositivo que necesitas.