Valor inválido X para o atributo “media” no elemento “link”: O media “projection” foi descontinuado

O atributo media num elemento <link> especifica para que tipos de media ou dispositivos o recurso ligado (tipicamente uma folha de estilos) foi concebido. Aceita uma consulta de media válida ou uma lista de tipos de media separados por vírgulas. Na especificação CSS atual (Media Queries Level 4), apenas três tipos de media permanecem válidos: all, screen, e print. Todos os outros tipos de media de especificações mais antigas — incluindo projection, handheld, tv, tty, braille, embossed, e aural — foram descontinuados.

O tipo de media projection foi originalmente destinado a ecrãs de apresentação e baseados em projetores. Na prática, o suporte dos navegadores para ele era extremamente limitado (apenas o Opera tinha suporte significativo), e o caso de uso nunca ganhou tração. O CSS Working Group descontinuou-o porque a distinção entre um ecrã e um ecrã de “projeção” já não é significativa — os navegadores modernos tratam projetores, ecrãs externos e monitores uniformemente sob o tipo screen.

Porque isto é importante

• Conformidade com padrões: Usar tipos de media descontinuados causa erros de validação W3C, que podem sinalizar problemas mais amplos de qualidade do código.
• Nenhum efeito prático: Os navegadores modernos simplesmente ignoram tipos de media não reconhecidos. Se projection for o único valor no seu atributo media, a folha de estilos pode não carregar de todo em alguns navegadores. Se aparecer junto com screen, o navegador carrega a folha de estilos baseado na correspondência screen e descarta silenciosamente projection — o que significa que o valor descontinuado não adiciona nada.
• Manutenibilidade: Manter valores descontinuados no seu código pode confundir outros programadores e criar a falsa impressão de que a folha de estilos tem comportamento especial para projetores.

Como corrigir

1. Remova projection do valor do atributo media.
2. Se screen ou outro tipo válido já estava listado junto com projection, mantenha o tipo válido.
3. Se projection era o único valor, substitua-o por screen (já que projetores são tratados como ecrãs pelos navegadores modernos).
4. Se a folha de estilos se deve aplicar universalmente, remova o atributo media completamente ou defina-o como all.

Exemplos

Incorreto

Usar o tipo de media descontinuado projection junto com screen:

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

Usar projection como o único tipo de media:

<link rel="stylesheet" href="slides.css" media="projection">

Correto

Remover projection e manter o tipo válido screen:

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

Substituir projection por screen, já que projetores são tratados como ecrãs:

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

Direcionar tanto ecrãs como impressão:

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

Se a folha de estilos se deve aplicar a todos os dispositivos, omita o atributo media (que por defeito é all):

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

Ou defina-o explicitamente como all:

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

Usar consultas de media em vez de tipos de media

Se precisar de controlo mais granular sobre quando uma folha de estilos se aplica — por exemplo, direcionando ecrãs grandes comummente usados para apresentações — pode usar uma consulta de media com condições de funcionalidade em vez de depender de tipos de media descontinuados:

<link rel="stylesheet" href="presentation.css" media="screen and (min-width: 1920px)">

Esta abordagem está em conformidade com os padrões e dá-lhe direcionamento muito mais preciso do que os tipos de media antigos alguma vez forneceram.

Saiba mais:

MDN Reference

MDN: media

→

WHATWG Spec

HTML Living Standard: the link element

→

MDN Reference

MDN: using media queries

→