media (HTML attribute)

Depr. Version
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full


media=" { all | aural | braille | embossed | handheld | print | projection | screen | tty | tv } "


If your page is to be viewed on a variety of media, you may want to apply to it a number of separate styles that are specific to each medium.

For example, a typical web page might include a header area, a block of navigation running down the left-hand side, and a sidebar containing related links. None of this content is of any use to users who print the page—after all, you can’t click on a printout of related links to access those resources. As such, you might choose to apply certain styles to the page for the screen medium (show navigation areas, and set position, colors, and so on), while applying a different set of rules to the page for the occasions when it’s viewed in a printed medium (perhaps hiding the navigation areas entirely).

These subtle changes are made possible by the media attribute. Indeed, in the example HTML, we see that the attribute specifies one style sheet for the screen medium ("basic.css"), and another for the print medium ("print.css").


This example shows the application of two different styles for two different media:

<link rel="stylesheet" href="basic.css" media="screen"/>
<link rel="stylesheet" href="print.css" media="print"/>


The acceptable values for media are shown in the syntax section above. You aren’t limited to just one media type per link element, though—you can apply multiple media types using a comma-separated list. For example, you may want to apply the main style sheet to "screen" and "projection" (for kiosk, or “full-screen” display), like so:

<link rel="stylesheet" href="basic.css"
    media="screen, projection"/>
<link rel="stylesheet" href="print.css" media="print"/>


Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

The browsers tested honor the media types that they are capable of processing—basically the "screen", "print", and "all" values. However, once you step beyond these values, specifying "handheld", "tv", and so on, all bets are off. While it’s not the aim of this reference to cover all the different media that might render web content (the handheld part alone, represented by mobile phones, PDAs, and so on, is a minefield of varied support), it would be remiss of me not to warn you that support for the other media types is unreliable. For example, if you specify that a style sheet that you’ve crafted to look good on your nice, 24-inch, flat-screen monitor should only be for "screen", and you specify a bare, stripped-down version for "handheld", the chances are that many mobile phones will ignore your request and will try to apply your screen style on the handheld device anyway—and they’ll probably mangle it in the process. Note that Opera uses styles specified with the "handheld" value when running in Small Screen Rendering (SSR) mode.

Opera provides a kiosk (full-screen) mode that makes use of the "projection" media type. When it’s operating in full-screen mode, Opera selects the "projection" media type if it’s available; otherwise, it uses the "screen" media type.

User-contributed notes

Related Products