media (HTML attribute)

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

Syntax

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

Description

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").

Example

In this example, we have two different media types to which two different styles are applied:

<style type="text/css" media="screen">
  #nav {background:#006; padding:2em;}
⋮
</script>
<style type="text/css" media="print">
  #nav {display:none}
⋮
</script>

Value

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

<style type="text/css" media="screen, projection">
  #nav {background:#006; padding:2em;}
⋮
</script>
<style type="text/css" media="print">
  #nav {display:none}
⋮
</script>

Compatibility

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.

User-contributed notes

Related Products