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:
<link rel="stylesheet" href="basic.css" media="screen" /> <link rel="stylesheet" href="print.css" media="print" />
Description
When linking to a style sheet,
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 style sheet for screen medium
("basic.css") and a separate style sheet for print
("print.css").
Value
Acceptable values are shown in the
syntax section above. You are not limited to just one
media type per link 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:
<link rel="stylesheet" href="basic.css" media="screen, projection" /> <link rel="stylesheet" href="print.css" media="print" />
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.
Opera provides a kiosk (full screen) mode that makes use of
the "projection" media type.
When in full screen mode Opera selects the "projection"
media type if it is available, otherwise it uses the
"screen" media type.
User-contributed notes
- ID:
- #1
- Date:
- Wed, 26 Mar 2008 13:41:58 GMT
Opera applies style sheets 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.
