the whole shebang

February 28, 2007

Values for “media” attribute of “style” or “link” tags

Filed under: accessibility,Computing,Website Design/CSS — wholeshebang @ 2:54 am

I came across this list I saved to my computer a while ago, and though I haven’t updated my websites (or this blog) with it yet, I thought it would be useful. If the mention of “OperaShow” is obscure to you, it’s obscure to me, too. (I’m guessing it’s a plugin for Opera because that’s the only thing that makes sense.)

Stylesheets Overview

For website-design newbies, the tags we are referring to allow you to use CSS to style an entire page or website (instead of using deprecated, even non-standard, tags that only affect one element and are often not compatible with assistive technology for the disabled). The <style> tag allows you to embed a “stylesheet” (list of selectors and style definitions) at the top of a document, which will then uniformly be applied to the elements in the page the way you specified. The <link> tag tells the browser where to find an external stylesheet, which can easily be applied to multiple pages via this tag. Just put the appropriate tag somewhere within the “head” section of your HTML document (that is, anywhere between the <head> and </head> tags).

The <style> tag has 2 attibutes, “type” and “media”; the <link> tag has 4 attributes, “type”, “media”, “link” and “rel”. I will not give you a stylesheet lesson here…just tell you about the “media” attribute.

The “media” attribute allows you to target specific stylesheets to different web-aware “clients” (or “user-agents”, devices that allow people to access and view data from other computers, usually over the Internet), as well as other devices. For example, you may want to make your webpage available with fancy colors and graphics for viewing in a graphical web browser, without graphics (except maybe necessary diagrams) and with less colors when printed, with a simple layout, and optimized text and colors for cellphones and PDAs, etc.

Example of <link> and <style> tags:

  • <style type=”text/css” media=”print”>
    …selectors and style definitions go here…
    </style>
  • <link rel=”stylesheet” type=”text/css” href=”styles/jeffPrintStyles.css” media=”print” />

Values for the “media” Attribute:

all
for all media
aural
for speech synthesizers
Braille
for “tactile Braille devices” (???)
embossed
for paged Braille printers
handheld
for small-screen devices like cellphones and PDAs
print
for paged printing or Print Preview
projection
for projector media, including presentations like PowerPoint
screen
for computer monitors
tty
for fixed-width, limited-display terminals (can also use with OperaShow for projection/presentation media and kill 2 or 3 birds with one stone)
tv
for televisions
Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: