The media attribute on a <style> tag specifies what media or device type the styles are optimized for.
This attribute may include multiple media or device queries combined with logical conditions (and, or, not).
A media attribute on a <style> element.
This style is only used when printing the document. See printout below.
<style media="print">
h3.header { color: #0a8181; }
div.text { color: #ef523d; }
</style>
<h3 class="header">Successful purchase!</h3>
<div class="text">You will receive an email shortly.</div>
In print or print-preview mode the styles will be applied.
Here is a screenshot in print-preview mode. Notice the color changes.
The media attribute specifies the media or device type the style is used for.
This attribute specifies that the CSS style 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).
<style media="media-query">
| 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. |
These are 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 <style>
