HTML | <link> media Attribute
The HTML link media attribute is used to specify what media/device the target resource is optimized for. This attribute used to specify a different style for different media type.
The media attribute can accept several values.
Syntax:
<link media="value">
Possible Operators:
Value | Description |
---|---|
and | AND operator |
not | NOT operator |
, | OR operator |
Devices:
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:
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" type = "text/css" href = "index_screen.css" > < link rel = "stylesheet" type = "text/css" href = "index_print.css" media = "print" > </ head > < body > < center > < h1 >GeeksforGeeks</ h1 > < p >< a href = "index.html" target = "_blank" > Click here </ a > </ center > </ body > </ html > |
Output:
Supported Browsers: The browsers supported by HTML link media attribute are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera