HTML Guide for media

Bad value X for attribute “media” on element “link”: Parse Error.

The media attribute on a <link> element specifies the media for which the linked resource is intended, using a valid media query. The value indicated is not a valid media query, which leads to a parse error.

Explanation

The media attribute is used to define what type of device the linked stylesheet should be applied to. Examples include common media types like screen, print, or all, as well as more complex media queries, such as (max-width: 600px) for responsive designs.

Correct Usage

Media Type Only:

You can specify general media types such as screen, print, or all.
```
<link rel="stylesheet" href="styles.css" media="screen">
```
Media Query:

For more precise control, use a media query to target specific conditions.
```
<link rel="stylesheet" href="styles.css" media="(max-width: 600px)">
```

Bad value “X” for attribute “media” on element “link”: unrecognized media “X”.

The media attribute on a <link> element has not been recognized.

This attribute specified what media the linked resource is optimized for. As an example, the following will link a general stylesheet, and a specific one for printing:

<head>
  <link rel="stylesheet" type="text/css" href="general.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Valid values for this attribute include:

all. Default, used for all media.
print. Used for printers and print previews.
screen. Used for computer, tablets or smartphone screens.