- Attribute of
- What does
- Tells the browser what type of device a resource is designed for.
When coding in HTML, you may want to use
<link> to pull in content from different stylesheets or scripts. The
media attribute tells the browser what type of device each script is designed for.
You might use
media to tell the browser that you have different stylesheets for display and print. That way, your visitor will see a version that's optimized for their mobile device when viewing on a small screen, and at the same time, they get will get a different layout when printing.
Specifying the Intended Device
<link rel="stylesheet" type="text/css" href="http://mysite.com/style-print.css" media="print">
You can specify alternate layouts for screen readers, TVs, mobile devices – or even a synthesized voice. A link can have more than one device type specified; separate devices with
OR or a comma.
<link rel="stylesheet" type="text/css" href="http://mysite.com/style-display.css" media="screen,handheld">
You will find a complete list of device types for this attribute on the W3Schools website, under the Devices heading.
Browser Support for media