media (HTML attribute)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Depr. | Version |
|---|---|
| No | HTML 4 |
Example
Two different media, two different styles applied:
<style type="text/css" media="screen">
#nav {background:#006; padding:2em;}
…
</script>
<style type="text/css" media="print">
#nav {display:none}
…
</script>
Description
When embedding CSS styles in a
style element, you may wish to apply different styles
depending on the medium that the content is viewed on. For example, on a
typical web page, you might have a header area, a block of navigation
running down the side and a sidebar with related links. None of this
content is of any use to anyone when the page is printed out - after all,
you cannot click on a print-out of related links to find out more! - so
you might choose to apply certain styles for the screen medium (show
navigation areas, set position, colors and so on) while applying a
different set of rules for a printed medium (hide the navigation areas
entirely). This is all made possible using the
media attribute. The example HTML shows it doing
what I’ve just described: feeding one set of style declarations for the
screen medium and a separate set for the print medium.
Value
Acceptable values are shown in the
syntax section above. You are not limited to just one
media type per style element -
it is 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’ display), which is done as
follows:
<style type="text/css" media="screen, projection">
#nav {background:#006; padding:2em;}
…
</script>
<style type="text/css" media="print">
#nav {display:none}
…
</script>
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Tricky one this. The browsers tested honored the
media types that they were capable of processing,
basically the "screen", "print" and
"all" values. However, once you step outside of these
values into the realms of "handheld",
"tv" and so on, all bets are off. While it’s not the
job 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 not to
warn you that the other media types have flaky support. For example, if
you specify that a style sheet that you’ve crafted to look good on your
nice 24” 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
hand-held device anyway, and probably mangle it in the
process.
User-contributed notes
- ID:
- #1
- Date:
- Wed, 26 Mar 2008 13:57:14 GMT
Opera applies style rules with media="handheld" in its SSR mode (small screen rendering).
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
