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

Media types describe the general category of a device for which a stylesheet is intended. The most commonly used values are screen (for computer screens, tablets, and phones), print (for print preview and printed pages), and all (the default, for all devices).

Understanding Deprecated Media Types

CSS 2.1 and Media Queries 3 defined several additional media types: tty, tv, projection, handheld, braille, embossed, and aural. All of these were deprecated in the Media Queries 4 specification. The projection type was originally intended for projected presentations (such as slideshows), but modern browsers never meaningfully distinguished between screen and projection rendering contexts.

Why This Is a Problem

• Standards compliance: Using deprecated media types produces validator warnings and means your code doesn’t conform to current web standards.
• No practical effect: Modern browsers treat unrecognized or deprecated media types as not matching, which means a stylesheet targeted only at projection would never be applied. When combined with screen in a comma-separated list (e.g., screen,projection), the projection portion is simply ignored — it adds clutter without benefit.
• Maintainability: Keeping deprecated values in your markup can confuse other developers and suggest that the code targets a platform that no longer exists in the spec.

How to Fix It

1. Remove the deprecated media type from the media attribute, keeping only valid types like screen, print, speech, or all.
2. Remove the media attribute entirely if the remaining value is all or if you only need screen (since screen is the most common rendering context and stylesheets without a media attribute default to all).
3. Use modern media features instead of deprecated media types if you need to target specific device capabilities (e.g., (hover: none), (pointer: coarse), (display-mode: fullscreen)).

Examples

❌ Incorrect: Using the deprecated projection media type

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

This triggers the validation warning because projection has been deprecated.

✅ Correct: Using only the screen media type

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

✅ Correct: Removing the media attribute entirely

If you want the stylesheet to apply to all media types (the default behavior), simply omit the attribute:

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

✅ Correct: Combining valid media types

If you need your stylesheet to apply to both screen and print contexts:

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

❌ Other deprecated media types to avoid

All of the following are deprecated and will produce similar warnings:

<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">

Replace these with screen, print, speech, all, or use specific media features to target the device characteristics you need.

Learn more:

MDN Reference

MDN: HTML link element

→

MDN Reference

MDN: Using media queries

→

MDN Reference

MDN: @media

→