Bad value X for attribute “media” on element “link”: The media “projection” has been deprecated

The media attribute on a <link> element specifies which media or device types the linked resource (typically a stylesheet) is designed for. It accepts a valid media query or a comma-separated list of media types. In the current CSS specification (Media Queries Level 4), only three media types remain valid: all, screen, and print. All other media types from older specifications — including projection, handheld, tv, tty, braille, embossed, and aural — have been deprecated.

The projection media type was originally intended to target presentation and projector-based displays. In practice, browser support for it was extremely limited (only Opera had meaningful support), and the use case never gained traction. The CSS Working Group deprecated it because the distinction between a “screen” and a “projection” display is no longer meaningful — modern browsers treat projectors, external displays, and monitors uniformly under the screen type.

Why this matters

• Standards compliance: Using deprecated media types causes W3C validation errors, which can signal broader code quality issues.
• No practical effect: Modern browsers simply ignore unrecognized media types. If projection is the only value in your media attribute, the stylesheet may not load at all in some browsers. If it appears alongside screen, the browser loads the stylesheet based on the screen match and silently discards projection — meaning the deprecated value adds nothing.
• Maintainability: Keeping deprecated values in your code can confuse other developers and create the false impression that the stylesheet has special behavior for projectors.

How to fix it

1. Remove projection from the media attribute value.
2. If screen or another valid type was already listed alongside projection, keep the valid type.
3. If projection was the only value, replace it with screen (since projectors are treated as screens by modern browsers).
4. If the stylesheet should apply universally, remove the media attribute entirely or set it to all.

Examples

Incorrect

Using the deprecated projection media type alongside screen:

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

Using projection as the sole media type:

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

Correct

Remove projection and keep the valid screen type:

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

Replace projection with screen, since projectors are handled as screens:

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

Target both screens and print:

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

If the stylesheet should apply to all devices, omit the media attribute (which defaults to all):

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

Or explicitly set it to all:

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

Using media queries instead of media types

If you need more granular control over when a stylesheet applies — for example, targeting large displays commonly used for presentations — you can use a media query with feature conditions instead of relying on deprecated media types:

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

This approach is standards-compliant and gives you far more precise targeting than the old media types ever provided.

Learn more:

MDN Reference

MDN: media

→

WHATWG Spec

HTML Living Standard: the link element

→

MDN Reference

MDN: using media queries

→