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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-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/)

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

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

Using `projection` as the sole media type:

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

### Correct

Remove `projection` and keep the valid `screen` type:

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

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

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

Target both screens and print:

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

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

Or explicitly set it to `all`:

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

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