HTML Guides for projection

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.

The media attribute on the link element cannot use the deprecated value projection; only valid CSS media types should be specified.

The media attribute specifies what media/device the linked resource is designed for, using a media query or a list of valid media types. In modern HTML and CSS, commonly accepted values include all, print, and screen.

The value projection was intended for projectors but has been deprecated and is no longer recognized by browsers or the HTML standard. To ensure validity and compatibility, remove projection and use only accepted types such as screen and/or print.

Incorrect example (with deprecated value):

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

Correct examples:

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

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

If you intend your stylesheet for screens and print, you can use both screen, print; for only screens, use just screen. If the stylesheet should apply to all devices, you can omit the media attribute or use all:

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

or

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