Guias HTML para descontinuada

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

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

Using projection as the sole media type:

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

Correct

Remove projection and keep the valid screen type:

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

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

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

Target both screens and print:

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

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

Or explicitly set it to all:

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

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

The device-width and device-height media features (including their min- and max- prefixed versions) were originally designed to query the physical dimensions of a device’s screen. In practice, this caused significant problems. On high-DPI (Retina) displays, max-device-width could report unexpected values depending on the device pixel ratio. When users resized their browser window, these features didn’t respond because the physical screen size never changed. And with browser zoom, the layout could break because the query still referenced the fixed device dimensions rather than the actual available space.

The Media Queries Level 4 specification formally deprecated these features. Modern browsers still support them for backward compatibility, but they should not be used in new code. The W3C validator raises this warning to encourage migration to the current standard.

The viewport-based equivalents — width, min-width, and max-width — respond to the browser’s layout viewport. This means they correctly adapt when the user resizes the window, zooms the page, or views the page in a split-screen mode. They also behave consistently across devices regardless of pixel density.

If your existing code uses max-device-width or min-device-width, the fix is straightforward: drop the word device from the feature name. For example, max-device-width: 768px becomes max-width: 768px. If you were relying on device dimensions to detect high-DPI screens, use the resolution media feature instead (e.g., min-resolution: 2dppx), which is the standards-compliant replacement for vendor-prefixed features like -webkit-min-device-pixel-ratio.

When choosing breakpoint values, prefer content-driven breakpoints — values where your layout actually needs to adapt — rather than targeting specific device widths. This produces more resilient designs that work well on any screen size.

Examples

Deprecated usage triggering the warning

The max-device-width media feature in the <style> block triggers the validator warning:

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated Media Feature</title>
  <style>
    /* Deprecated: queries the physical device screen */
    @media only screen and (max-device-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>This page uses a deprecated media feature.</p>
</body>
</html>

The same warning appears if the deprecated feature is used in a <link> element’s media attribute:

<link rel="stylesheet" href="mobile.css" media="(max-device-width: 480px)">

Fixed example using viewport-based queries

Replace max-device-width with max-width to query the viewport instead:

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-Based Media Query</title>
  <style>
    /* Correct: responds to the viewport width */
    @media (max-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>This page uses a modern media feature.</p>
</body>
</html>

And for the <link> element:

<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">

Replacing device pixel ratio queries

If you were using device-width features alongside -webkit-min-device-pixel-ratio to target high-DPI screens, switch to the standard resolution feature:

<style>
  /* Deprecated approach */
  @media (-webkit-min-device-pixel-ratio: 2) {
    .logo {
      background-image: url("logo@2x.png");
    }
  }

  /* Standards-compliant replacement */
  @media (min-resolution: 2dppx) {
    .logo {
      background-image: url("logo@2x.png");
    }
  }
</style>

Quick reference of replacements

The min-device-width and max-device-width media features were originally designed to query the physical screen dimensions of a device. However, these features have been deprecated in Media Queries Level 4 and Level 5 because they are unreliable in modern browsing contexts. The physical screen size is a poor proxy for the actual available layout space — it doesn’t account for browser chrome, split-screen modes, zoom levels, or the fact that many modern devices report abstract pixel values that don’t correspond to physical hardware pixels in a straightforward way.

The viewport-based alternatives — min-width and max-width — respond to the layout viewport, which is the actual space your content is rendered into. This makes them far more useful for responsive design. When a user zooms in, the layout viewport shrinks, and min-width/max-width queries respond accordingly. With min-device-width, zooming has no effect on the query result, which can lead to layouts that don’t adapt when they should.

Beyond practical concerns, using deprecated features means your CSS may behave inconsistently across browsers in the future, as support could be removed entirely. Validators flag this to encourage migration to the modern, standards-compliant approach.

How to fix it

The fix is a straightforward replacement:

• min-device-width → min-width
• max-device-width → max-width

If your original query also included the screen keyword solely to pair with device-width targeting, you can safely drop it — min-width and max-width apply across all media types and the screen qualifier is rarely necessary in modern CSS.

If you were using min-device-width to detect high-density or Retina displays (a common pattern in older code), the correct modern approach is to use the resolution media feature instead, such as min-resolution: 2dppx.

Examples

Deprecated usage (triggers warning)

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated media feature</title>
  <style>
    @media screen and (min-device-width: 768px) {
      .sidebar { display: block; }
    }

    @media screen and (max-device-width: 480px) {
      .sidebar { display: none; }
    }
  </style>
</head>
<body>
  <aside class="sidebar">Sidebar content</aside>
</body>
</html>

Both min-device-width and max-device-width are deprecated and will produce validation warnings.

Fixed example using viewport-based queries

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-based media queries</title>
  <style>
    @media (min-width: 768px) {
      .sidebar { display: block; }
    }

    @media (max-width: 480px) {
      .sidebar { display: none; }
    }
  </style>
</head>
<body>
  <aside class="sidebar">Sidebar content</aside>
</body>
</html>

Replacing device-width with resolution for pixel density

Older code sometimes used min-device-width in combination with -webkit-min-device-pixel-ratio to target high-density screens. The modern equivalent uses the resolution media feature:

<!doctype html>
<html lang="en">
<head>
  <title>Resolution media query</title>
  <style>
    /* Deprecated approach */
    /*
    @media screen and (min-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
      .hero { background-image: url("hero@2x.jpg"); }
    }
    */

    /* Modern approach */
    @media (min-width: 768px) and (min-resolution: 2dppx) {
      .hero { background-image: url("hero@2x.jpg"); }
    }
  </style>
</head>
<body>
  <div class="hero">Hero section</div>
</body>
</html>

The min-resolution: 2dppx query cleanly replaces vendor-prefixed pixel ratio queries and works alongside the standard min-width viewport query.

The longdesc attribute dates back to HTML4, where it accepted a URL pointing to a separate page (or section of a page) containing a detailed description of the image. The idea was to supplement the short text in the alt attribute with a more comprehensive explanation, particularly useful for complex images like charts, diagrams, or infographics.

HTML5 made longdesc obsolete for several reasons. Browser support was inconsistent — most browsers never exposed the attribute in a way that was easily discoverable by users. Many developers misused it by placing literal descriptions in the attribute instead of URLs, or left it pointing to broken links. Because the attribute was invisible in the rendered page, there was no visual indication that a longer description existed, making it practically useless for sighted users and unreliable for assistive technology users.

The recommended replacements are more robust and accessible:

• Wrap the image in an a element (or place a link nearby) that points to the description page. This makes the link visible and usable by everyone.
• Use aria-describedby to reference a description that already exists on the same page. This is ideal when the detailed description is displayed alongside the image.
• Use a figure with figcaption to associate a visible caption or description directly with the image.

These approaches are better for accessibility because they work reliably across browsers and assistive technologies, and they make the description discoverable to all users, not just those using specific screen readers that happened to support longdesc.

Examples

❌ Obsolete: using longdesc

<img
  src="cat.jpg"
  alt="Smiling cat sitting on a windowsill"
  longdesc="descriptions/smiling-cat.html">

This triggers the validation error because longdesc is no longer a valid attribute on img in HTML5.

✅ Fix: wrap the image in a link

The simplest replacement is to make the image itself a link to the description:

<a href="descriptions/smiling-cat.html">
  <img src="cat.jpg" alt="Smiling cat sitting on a windowsill">
</a>

✅ Fix: provide a separate link near the image

If you don’t want the image itself to be clickable, place a visible link nearby:

<figure>
  <img src="chart.png" alt="Quarterly revenue chart for 2024">
  <figcaption>
    Quarterly revenue chart.
    <a href="descriptions/revenue-chart.html">View detailed description</a>
  </figcaption>
</figure>

✅ Fix: use aria-describedby for on-page descriptions

When the long description is already on the same page, reference it with aria-describedby:

<figure>
  <img
    src="chart.png"
    alt="Quarterly revenue chart for 2024"
    aria-describedby="chart-description">
  <figcaption id="chart-description">
    Revenue grew from $2.1M in Q1 to $3.8M in Q4, with the largest
    quarter-over-quarter increase occurring between Q2 and Q3.
  </figcaption>
</figure>

This approach keeps the description visible on the page and programmatically associates it with the image for screen readers.

Choosing the right approach

In all cases, make sure the alt attribute still provides a meaningful short description. The long description supplements alt — it doesn’t replace it.