HTML <link> with media Attribute

February 10, 2021 7:26 pm IST

You are Here:

HTML <link> with media Attribute

The media attribute specifies on what device the linked resource will be displayed.

Example

HTML Online Editor

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style-print.css" media="print"> </head> <body> <h1>This is a Heading.</h1> </body> </html>

Run

Devices Value

Value	Explanation
all	Suitable for all devices.
print	Suitable for print out. Hard Copy.
screen	Suitable for Computer Screen. Large Screen.
speech	Suitable for speech synthesizers.

Key Value

Value	Explanation
width	Specifies the width of the viewport.
height	Specifies the height of the viewport.
aspect-ratio	Specifies the width-to-height aspect ratio of the viewport.
orientation	Specifies the orientation of the viewport.
resolution	Specifies the pixel density of the output device.
scan	Specifies the scanning process of the output device.
grid	Does the device use a grid or bitmap screen?
update	Specifies how frequently the output device can modify the appearance of content.
overflow-block	Specifies how does the output device handle content that overflows the viewport along the block axis?
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled?
color	Specifies the number of bits per color component of the output device, or zero if the device is black and white. ie) No Color.
color-gamut	Specifies the approximate range of colors that are supported by the user agent and output device.
color-index	Specifies number of entries in the output device's color lookup table. Note : If the device does not use such a table then it is zero.
display-mode	Specifies the display mode of the application.
monochrome	Specifies the bits per pixel in a monochrome frame buffer.
inverted-colors	Is the user agent or underlying OS inverting colors?
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?
hover	Does the primary input mechanism allow the user to hover over elements?
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?
any-hover	Does any available input mechanism allow the user to hover over elements?
light-level	Light level of the environment.
scripting	Is scripting (e.g., JavaScript) available?

Supported Logical Operators

Value	Explanation
and	The and operator is used for combining multiple media features together into a single media query.
not	The not operator is used to negate a media query, returning true if the query would otherwise return false.
only	The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles.
,	The comma operator is used to seperate each media. Here style will be applied to the entire document, if any one of the media satisfies the condition.