The Style Sheet Link "media" Attribute

In a typical link element, you often will want to apply a value to the "media" attribute in the tag. The purpose of this attribute to assist browsers and agents in determining what your style sheet you are linking to is used for. In other words, what media are does your style sheet apply to? For example, many people assign the media attribute value "print" to a style sheet that is used to only control a printable copy of a web page. Almost all the newer browsers understand this value, and will only call this style sheet when viewing a web page use "Print" features in the browser menu.

<link rel="stylesheet" media="print" href="styles/myprintsheet.css" type="text/css" title="my printing style sheet" />

Sadly, some newer browser not only don't support many of the other media attribute values, but distort or ignore popular ones, like "handheld" for mobile devices, or even "print" for prining web pages. In the case of print, some of the newer agents, like IE7 and Opera, instead "scale up" the overall view of the page as it is, increasing images and overall page artwork and text, without consideration to print sheet formatting and text resizing features set by style sheet authors. Because many older agents dont support some of these features as well, developers are stuck with a "soup" of effects when using different media attributes. For this reason, it is important to remember to design pages around highly structured, XHTML-compliant code and content that without style sheets, will perform well in both print and desktop browser settings. At the same time, you should always design scalable font text and layouts to work with all the different media attributes and their devices, as was originally designed by the www.w3c.org. Those deviant devices that do not support the media attribute types accurately, can then be tested and any modifications to code and styles be addressed. With XSLT, its even possible to turn around and deliver a completely different web page for those devices. But again, always assume the the web and its browser vendors will someday support the media attribute accurately, and you will be ahead of the game.

There are few quirks and tricks to be aware of with some values people now use for the media attribute. As you may or may not know, "screen" is used for link tags that are designed for desktop browsers. This is the most common and widely support value of the set. The other is "print" which again, is widely supported by most browsers, with some weird translations in combination with how some newer agents interpret print scaling effects. The media attribute can also be "all" which means it works for all devices, but this excludes some older browsers like Netscape 4, so use "screen" instead or no media attribute to enforce the desktop browser default. The "all" media type also causes errors in some older Internet Explorer browsers, so again, use "screen" and avoid "all".

Looking for great standards-based Website Products for your website? Get GiantIsland Web Products!