HTML Guide
The projection media type was deprecated in Media Queries 4.
Media types describe the general category of a device, for example screen, print and speech.
CSS 2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn’t be used.
Related W3C validator issues
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">Replace device-based media features with viewport-based features; use max-width instead of max-device-width.
max-device-width and min-device-width were removed from modern media queries because they target physical device dimensions, not the browser viewport. They fail on high‑DPI screens, resizable windows, and zoom scenarios. Use viewport-relative features like width, min-width, and max-width, which respond to the layout viewport and are supported across browsers. For device pixel density, prefer resolution (e.g., min-resolution: 2dppx) instead of -webkit-min-device-pixel-ratio. Keep breakpoints content-driven; pick sizes where your layout needs to adapt, not specific devices.
HTML Examples
Example causing the validator warning
<!doctype html>
<html lang="en">
<head>
<title>Deprecated Media Feature</title>
<style>
/* Deprecated: targets device width, not viewport */
@media only screen and (max-device-width: 480px) {
body {
background: pink;
}
}
</style>
</head>
<body>
<p>Deprecated media feature example.</p>
</body>
</html>Fixed example using viewport-based queries
<!doctype html>
<html lang="en">
<head>
<title>Viewport-Based Media Query</title>
<style>
/* Recommended: respond to viewport width */
@media (max-width: 480px) {
body {
background: pink;
}
}
/* Optional: high-DPI tweak using resolution */
@media (min-width: 481px) and (min-resolution: 2dppx) {
body {
background: lightblue;
}
}
</style>
</head>
<body>
<p>Fixed media feature example.</p>
</body>
</html>Replace device-based media features like min-device-width with viewport-based features such as min-width.
The min-device-width and max-device-width media features are deprecated in Media Queries Level 5 and are flagged by validators. They target the physical device screen, which is unreliable across modern devices and zoom settings. Use min-width/max-width to respond to the layout viewport instead. This aligns with responsive design best practices and works consistently with zoom, orientation changes, and different device pixel ratios.
Common replacements:
- @media (min-device-width: X) → @media (min-width: X)
- @media (max-device-width: X) → @media (max-width: X)
- If you were targeting pixel density, prefer resolution (e.g., min-resolution: 2dppx) or feature queries as needed.
HTML Examples
Example causing the warning
<!doctype html>
<html lang="en">
<head>
<title>Deprecated media feature example</title>
<style>
/* Deprecated: targets physical device width */
@media screen and (min-device-width: 768px) {
.card { padding: 24px; }
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>Fixed example (viewport-based)
<!doctype html>
<html lang="en">
<head>
<title>Viewport-based media queries</title>
<style>
/* Recommended: targets the layout viewport width */
@media (min-width: 768px) {
.card { padding: 24px; }
}
/* Optional: high-density displays */
@media (min-width: 768px) and (min-resolution: 2dppx) {
.card { border: 1px solid #ccc; }
}
</style>
</head>
<body>
<div class="card">Content</div>
</body>
</html>The deprecated property longdesc on img elements was used in HTML4 to specify the URL of a text or HTML file which contained a long-form description of the image. This could be used to provide optional added details beyond the short description provided in the title or alt attributes.
Here’s an example from HTML4:
<img
src="cat.jpg"
alt="Smiling Cat"
longdesc="image-descriptions/smiling-cat.html" />This, however, is no longer valid in HTML5 and can be converted to the following instead:
<a href="image-descriptions/smiling-cat.html">
<img src="cat.jpg" alt="Smiling Cat" />
</a>