The media attribute on a <link> tag specifies the media or device type the link is optimized for.
This attribute may include multiple media or device type values combined with logical conditions (and, or, not).
A media attribute on an <a> tag.
It specifies that the print.css stylesheet is used for printing the document.
<head>
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">
<link rel="stylesheet" type="text/css" href="/tutorial/print.css" media="print">
</head>
The media attribute specifies the media or device type the linked styleheet or icon should be used for.
This attribute specifies that a stylesheet or icon is designed for certain mobile devices, print media, and others.
media accepts multiple media or device type values combined with logical conditions (and, or, not).
Note: The media attribute requires that href has a value.
<link href="URL" media="value" />
| Operator | Description |
|---|---|
| and | Specifies an AND operator |
| , (comma) | Specifies an OR operator |
| not | Specifies a NOT operator |
| Device | Description |
|---|---|
| all | Suitable for all devices. This is the default. |
| aural | Speech synthesizers |
| braille | Braille feedback devices -- for the visually impaired |
| handheld | Handheld devices with small screens and limited bandwidth |
| projection | Projector devices |
| Printed pages or in print-preview mode | |
| screen | Computer screens |
| tty | Teletypes and similar devices using a fixed-pitch character grid |
| tv | Television type devices with low resolution and limited scrolling |
| Name | Value | Description |
|---|---|---|
| width | pixels |
Width of targeted display. Name can be prefixed with min- or max-. |
| height | pixels |
Height of targeted display. Name can be prefixed with min- or max-. |
| device-width | pixels |
Width of the device or paper. Name can be prefixed with min- or max-. |
| device-height | pixels |
Height of the device or paper. Name can be prefixed with min- or max-. |
| orientation | landscape, portrait |
Orientation of the device or paper. |
| aspect-ratio | width/height |
Ratio of width/height of the targeted display. Name can be prefixed with min- or max-. |
| device-aspect-ratio | width/height |
Ratio of width/height of the device or paper. Name can be prefixed with min- or max-. |
| color | integer |
Bits per color of targeted display. Name can be prefixed with min- or max-. |
| color-index | integer |
Number of colors the targeted display supports. Name can be prefixed with min- or max-. |
| monochrome | integer |
Bits per pixel in a monochrome frame buffer. Name can be prefixed with min- or max-. |
| resolution | dpi or dpcm |
Pixel density of the targeted display or paper. Name can be prefixed with min- or max-. |
| scan | progressive interlace |
Scanning method of a tv display. |
| grid | 1 = grid 0 = otherwise |
Whether output device is a grid or bitmap type. |
Some examples of valid media value expressions:
media="all and (orientation: portrait)"media="screen and (aspect-ratio: 16/10)"media="screen , (device-height: 540px)"media="screen , (aspect-ratio: 5/4)"media="screen and not (min-color-index: 512)"media="screen and (min-width: 1200px)"media="screen and (max-height: 720px)"media="handheld and (grid: 1)"media="tv and (scan: interlace)"media="print and (resolution: 400dpi)"media="screen and (max-monochrome: 2)"media="screen and not (device-width: 360px)"media="screen , (color: 8)"Here is when media support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
Back to <link>
