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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-screen-projection-for-attribute-media-on-element-link-the-media-projection-has-been-deprecated
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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:

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

### ✅ Correct: Combining valid media types

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

```html
<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:

```html
<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.