Week 4::
CSS Media Types
Back

 

"Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc."


CSS MEDIA TYPES:

all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices


A GREATER EXPLINATION

All

According to the CSS2 recommendation, if a media type is not specified, it should default to the all media type. Most browsers follow this guidance. The all media type can be used for properties that are available to all media devices. This sheet will start the CSS cascade, and from there, the specific devices, if in compliance, will continue by parsing their specific style sheet. You should note however, that older versions of Opera used media screen as their default display.

Screen

Screen is the most commonly used media type. At this time, the majority of assistive technology products available read the screen style sheets instead of aural ones. I hope that they'll catch up sooner rather than later. Remember though, that style sheets given the screen media type will not be used for any of the other devices, including printers.

Handheld
If you're creating a CSS document for handheld media, remember that you're creating not only for a small screen, but likely also a monochromatic one, with very little bandwidth or memory available. Sometimes the connection may be less than optimal as well. Be sure to use the {display:none} property to remove any extraneous page information to keep the display simple.

Projection

This one is pretty nifty in my opinion. I first saw it in action at the fifth TODCON web conference event a couple years ago during Eric Meyer's presentation and later used it in my own. Opera still uses this media type to the best advantage. You can create a presentation for viewing either full screen or on an overhead projector.

Print
As mentioned before, NN4 only understands CSS documents with either no media type specified or the screen media type. Thus, if you want NN4 to see any styling, you'll need to use one of these methods. Since IE4 will read the style sheet when the media type is specified as all, if it's on your list of browsers to support, and you've written some complex X/HTML, you may need to hide your all media style sheet by importing it. If you opt to use no media type at all, NN4 will read the styles, and the property values in that document will be inherited by the print style sheet through the cascade. However, as mentioned above, older versions of Opera will erroneously view the CSS document given no media type as screen, and will not "send it on" for printing. You must choose your battles.

Aural/Speech
The CSS2 recommendations for Aural style sheets are on the W3C site (www.w3.org/TR/REC-CSS2/aural.html & www.w3.org/TR/CSS21/aural.html), however, much debate exists about whether to implement the aural media type within your web site. The reasons against it are based on the fact that most assistive technology that reads aloud contains its own preferences and controls. Thus, its user has likely set the voice, tone, volume, etc. that they want to listen to your web page in. Most say their preference is to listen with their own settings and that aural style sheets could be disconcerting and even annoying. At this time, none of the major screen reader technologies have integrated aural media support in their product. The hope of many is that the ability to render assistance to the sight-impaired, through the aural media type, could be integrated without being intrusive. Are there any developer's listening?



How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

The browser will read the style definitions from the file mystyle.css, and format the document according to it.

 

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>

<style type="text/css">
hr {color: sienna} {margin-left: 20px} body {background-image: url("images/back40.gif")}

</style>
</head>

 

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. 

For example, an external style sheet has these properties for the h3 selector:

h3 { color: red; text-align: left; font-size: 8pt }

 

Specifying media-dependent style sheets

There are currently two ways to specify media dependencies for style sheets:

  • Specify the target medium from a style sheet with the @media or @import at-rules.

    Example(s):

    @import url("loudvoice.css") 
    aural;  
    @media print {   
 /* style sheet for print goes here */  }

  • Specify the target medium within the document language. For example, in HTML 4.0 ([HTML40]), the "media" attribute on the LINK element specifies the target media of an external style sheet:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </HEAD> <BODY> <P>The body... </BODY> </HTML>

The @import rule is defined in the chapter on the cascade.

7.2.1 The @media rule

An @media rule specifies the target media types (separated by commas) of a set of rules (delimited by curly braces). The @media construct allows style sheet rules for various media in the same style sheet:

@media print {      
BODY { font-size: 10pt }    
}    
@media screen {      
BODY { font-size: 12pt }    
}    
@media screen, print {      
BODY { line-height: 1.2 }    
}
BACK TO TOP