HTML Guides for media queries
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
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
- Remove the deprecated media type from the media attribute, keeping only valid types like screen, print, speech, or all.
- 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).
- 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.
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>
Ready to validate your sites?
Start your free trial today.