HTML | <style> media Attribute
The HTML style media attribute is used to specify the media or device the CSS style is optimized for. this attribute specify the style is for specific devices like print media or speech. This attribute can accept several values.
Syntax:
<style media="value">
Possible Operators:
| Value | Description |
|---|---|
| and | AND operator |
| not | NOT operator |
| , | OR operator |
and aboveDevices:
| Value | Description |
|---|---|
| all | Suitable for all devices |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (small screen, limited bandwidth) |
| projection | Projectors |
| Print preview mode/printed pages | |
| screen | Computer screens |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | low resolution or limited scroll ability type devices like Television. |
Values:
| Value | Description |
|---|---|
| width | targeted display area’s width. |
| height | targeted display area’s height |
| device-width | target display or paper’s width. |
| device-height | target display or paper’s height. |
| orientation | target display or paper’s orientation. |
| aspect-ratio | width/height ratio of the targeted display area. |
| device-aspect-ratio | device-width/device-height ratio of the target display/paper. |
| color | bits per color of target display. |
| color-index | number of colors the target display can handle. |
| monochrome | bits per pixel in a monochrome frame buffer. |
| resolution | pixel density (dpi or dpcm) of the target display/paper. |
| scan | scanning method of a tv display. |
| grid | if the output device is grid or bitmap. |
Note: Prefixes like “min-“ and “max-“ can be used.
Example:
html
<!DOCTYPE html><html><head> <style> h1 { color: green; } </style> <style media="print"> h1 { color: green; } </style></head><body> <center> <h1>GeeksforGeeks</h1> target="_blank"> Click here </a> </center></body></html> |
Output:
Supported Browsers: The browsers supported by HTML style media attribute are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 3 and above
- Firefox 1 and above
- Apple Safari 1 and above
- Opera 3.5 and above
Please Login to comment...