HTML Guide

CSS: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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>

Learn more:

Media Queries: Deprecated Media Features

Related W3C validator issues

CSS: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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>

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

Bad value X for attribute “media” on element “link”: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:

<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">

Bad value X for attribute “media” on element “link”: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">

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

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

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

CSS: “background-blend-mode”: X is not a “background-blend-mode” value.

background-blend-mode only accepts certain keywords as values, such as normal, multiply, screen, and others.

The background-blend-mode property in CSS specifies how background images and background colors blend together. Its value must be one or more blend mode keywords defined by CSS, for example, normal, multiply, screen, overlay, etc. Using an unrecognized value will generate a validation error.

Valid values include:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Example of an invalid value:

/* Invalid: 'X' is not a recognized value */
background-blend-mode: X;

Example of a valid value:

/* Valid: 'multiply' is a recognized blend mode */
background-blend-mode: multiply;

Example HTML with correct CSS property:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Blend Mode Example</title>
  <style>
    .blended-bg {
      background-image: url('image1.jpg'), url('image2.jpg');
      background-blend-mode: overlay;
    }
  </style>
</head>
<body>
  <div class="blended-bg" style="width:200px; height:200px;">
    Blended background
  </div>
</body>
</html>

Replace any invalid values for background-blend-mode in your CSS with one of the supported keywords.

CSS: “background”: “from” is not a valid color 3 or 6 hexadecimals numbers.

background CSS property has an invalid value; "from" is not recognized as a valid color or background value.

The background property in CSS can accept color names, hex codes, rgb/rgba values, or CSS keywords, but "from" is not valid. Sometimes this error can appear if using incorrect CSS gradient syntax, where "from" is not a recognized value.

Detailed Explanation

In standard HTML and CSS, a background can be set using:

Hex color codes, such as #fff or #ffffff
Named colors, such as red or blue
Functions, such as rgb(255,0,0) or linear-gradient(...)

If you wrote something like:

background: from #fff to #000;

background: "from";

neither is valid CSS.

To use gradients, use correct linear-gradient() or radial-gradient() syntax:

background: linear-gradient(to right, #fff, #000);

For a solid color:

background: #fff;

HTML Examples

Incorrect CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Incorrect CSS</title>
  <style>
    div {
      background: from #fff to #000; /* Invalid syntax */
    }
  </style>
</head>
<body>
  <div>Bad background</div>
</body>
</html>

Correct CSS (Gradient):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Correct CSS Gradient</title>
  <style>
    div {
      background: linear-gradient(to right, #fff, #000);
    }
  </style>
</head>
<body>
  <div>Good background</div>
</body>
</html>

Correct CSS (Solid Color):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Correct CSS Color</title>
  <style>
    div {
      background: #fff;
    }
  </style>
</head>
<body>
  <div>White background</div>
</body>
</html>

Always use a valid color value or gradient function for the background property.

CSS: “background-image”: X is not a “background-image” value.

background-image attribute values must use valid CSS syntax.

The background-image property in CSS expects the value to be a valid image reference, such as none, url("image.png"), gradients, or inherit.

Correct CSS Syntax:

background-image: url("background.jpg");

Correct usage in HTML (inline style):

<div style="background-image: url('background.jpg');">
  Content here
</div>

Incorrect usage (missing url() or filename only):

<div style="background-image: background.jpg;">
  Content here
</div>

Correct usage in a <style> block:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Background Image Example</title>
    <style>
      .banner {
        background-image: url("banner.png");
      }
    </style>
  </head>
  <body>
    <div class="banner">Welcome</div>
  </body>
</html>

Always wrap the image path with the url() function and use quotes for paths containing special characters.

CSS: “background”: The first argument to the “linear-gradient” function should be “to top”, not “top”.

Use the correct direction keyword syntax in CSS gradients: replace top with to top.

In CSS Images Level 4, the first argument of linear-gradient() should either be an angle (e.g., 180deg) or a direction using the to keyword (e.g., to top, to right). Older syntax like linear-gradient(top, ...) is no longer valid and triggers validator errors. Valid forms include: linear-gradient(to top, #fff, #000), linear-gradient(180deg, #fff, #000), or simply omit the direction to default to to bottom. Keep gradients in your CSS, not HTML attributes. The style attribute or a stylesheet can set the background or background-image with a valid gradient function.

HTML Examples

Example showing the issue

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Issue</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background: linear-gradient(top, #ffffff, #000000); /* invalid */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Fixed example (valid syntax)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Fixed</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* Option A: direction keyword */
        background: linear-gradient(to top, #ffffff, #000000);
        /* Option B: angle (equivalent) */
        /* background: linear-gradient(0deg, #ffffff, #000000); */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

CSS: “background”: X is not a “background-color” value.

There’s an invalid value for the background property in your CSS. The W3C HTML Validator has attempted to match the value to a background color, without success.

Here’s how to resolve this issue:

Identify the Correct CSS Configuration: The background property in CSS can take various forms, such as a color, an image, or a combination of background components. Ensure you provide a valid value.
Correct the Value: If you meant to set a background color, use a valid color format (e.g., hexadecimal, RGB, RGBA, named color, etc.).

Valid CSS Examples:

Using a named color:
```
.example {
  background: blue;
}
```
Using a hexadecimal color:
```
.example {
  background: #00ff00;
}
```

Using an RGB color:

.example {
  background: rgb(255, 0, 0);
}

Using an RGBA color (with transparency):

.example {
  background: rgba(255, 0, 0, 0.5);
}

Setting an image as background:

.example {
  background: url('image.jpg');
}

Combining multiple background properties:

.example {
  background: url('image.jpg') no-repeat center/cover;
}