Media-Specific and Alternate Styles Definitions and Notes

A directive that instructs the web browser to load an external style sheet and use its styles in the rendering of the HTML document. The only real differencein using @import and LINK, is in the actual syntax of the command and its placement. As you can see, @import is found inside the STYLE container. It must be placed there, before the other CSS rules, or else it won't work at all.

<STYLE TYPE="text/css">
@import url(styles.css); /* @import comes first */
H1 {color: gray;}
</STYLE>

Like LINK, there can be more than one @import statement in a document. Unlike LINK, however, the style sheets of every @import directive will always be loaded and used. So given the following, all three external style sheets will be loaded, and all of their style rules will be used in the display of this document:

@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);

The @import rule, like the link element, links an external style sheet to a document. This helps the Web author establish a consistent "look" across multiple HTML pages. Whereas the link element specifies the name of the style sheet to import using its href attribute, the @import rule specifies the style sheet definition inside a link element or a style element. In the scripting model, this means the owningElement property of the style sheet defined through the @import rule is either a style or a link object.

The @import rule should occur at the start of a style sheet, before any declarations. Although Internet Explorer 4.0 and later allows @import rule statements to appear anywhere within the style sheet definition, the rules contained within the @import rule style sheet are applied to the document before any other rules defined for the containing style sheet. This rule order affects expected rendering.

Rules in the style sheet override rules in the imported style sheet.

This At-Rule syntax imports a style sheet fragment file to the current style sheet. It may be used in External and Embedded style sheets, but not with inline styles. Furthermore, multiple fragments can be imported in to a single style sheet, but all @import statements must occur before any style declaration Rule-Sets in the style sheet.

An optional, case-insensitive argument can be specified after the URL of the fragment indicating one or more target media where the fragment should be applied (the default if no media is specified is "all".) Specifying media dependent styles via @import can be more efficient than @media At-Rules, because unneeded style fragments do not need to be downloaded or parsed in the @import case.

Syntax
Syntax1: @import "[URL]" ([media] ("," [media])+ )? ";"
Syntax2: @import url("[URL]") ([media] ("," [media])+ )? ";"
Examples
@import url("foo.css") screen, print

Using this syntax, different CSS rules can be specified and applied from the same style sheet depending on whether the rendering device is the printed page, a computer screen, speech synthesizer, etc.

An @media At-Rule specifies a comma separated list of case-insensitive media types, followed by a Rule Set embedded within matching curly braces ("{", "}".) If a browser supports a media type, it should support all style properties applicable to that media type. If no @media rule is specified for a Rule Set, it is applied to all media (default media = "all".)

Syntax
@media ([media] ("," [media])+ )?
   {
   [Style Declaration Block]
   }

Examples
@media print, screen
   {
   blockquote { font-size: 16pt }
    }

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 }
}

Alternate stylesheets are mutually exclusive. The user may select any one group and it will be applied but all the other alternates will be ignored. One of these alternates may be designated as the preferred style sheet group, which will be selected by default when the page is initially loaded.

These style sheets can be selected by the visitor as alternatives to the preferred style sheet. This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility (larger fonts etc).

To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. As with preferred sheets, these style sheets can also be grouped together by giving them identical title attributes.

To make biggerfonts.css an alternate style sheet, the keyword “alternate” is added to the rel attribute.

<link rel="alternate stylesheet" type="text/css" href="biggerfonts.css" title="biggerfonts" />

Note that these relationships only apply to external style sheets which are included using the link element.

For Web content to be device independent, it should be possible for a user to obtain a functional presentation associated with its Web page identifier via any access mechanism.

This is the fundamental principle for device independence from the user perspective. It does not say that the presentation will be the same on every device. But it does say that the user should be able to obtain a presentation and that the presentation obtained should be at least functional.

The goal is that a functional presentation should be possible via any access mechanism. The method of presentation may vary according to the different access mechanisms, but the possibility of a functional presentation should always exist.

In particular, it should be possible to provide a functional presentation even on a limited capability (i.e. low-cost) device - though it may be of reduced quality compared to that on more capable devices.

Reference

1. Interface
   Description: This category describes the way a user experiences the entirety of a document with a given Media type.
   Options:
   Continuous - The document is experienced using a movable window/portal on the content with the Media type.
   Paged - The document is experienced a page at a time with the Media type.
   Both - CSS properties are applied using either continuous or paged media with the Media type.
2. Sensory
   Description: This category describes the human senses used to experience a document with a given Media type.
   Options:
   Visual - A document's content is experienced primarily using the eyes with the Media type.
   Aural - A document's content is experienced primarily using the ears with the Media type.
   Tactile - A document's content is experienced primarily using the sense of touch with the Media type.
3. Layout
   Description: This describes the method used by a Media type to render character content.
   Options:
   Grid - Content is laid out using a character grid with the Media type.
   Bitmap - Content is rendered as a bitmap with the Media type.
   Both - Content can be rendered with a character grid or bitmap device.
4. Interactivity
   Description: This category describes the level of interaction possible using a specific media type
   Options:
   Interactive - Media types which allow interactivity with the user
   Static - Media types which do not allow interactivity with the user
   Both - Applies to both Static and Interactive Media types.
5. "All"
   Description: Applies to all Media types.
   Options: All

In CSS1, all of the CSS properties were targeted to the then-dominant paged/visual rendering paradigm. Already, alternative web navigation devices are on the market, offering much more variety and capabilities than was common in the past. This crucial fact was recognized in the creation of CSS2, and the expectation is that the variety of rendering platforms for CSS will only grow as time goes by.

CSS2 allows for the targeting of style rules to specific media types. This means you can explicitly request that one or more style rules will only apply when rendering to certain device types, such as a printer, an aural browser or a handheld device. Several methods exist to target one or more style rules to one or more media rendering device-types:

• Some CSS properties only apply to specific media types.
• Some property values have different meanings in different Media contexts.
• The @Media At-Rule specifies a target rendering media for a group of style rules.
• The Media component of the @Import At-Rule syntax specifies the target media for an imported style sheet.
• The MEDIA attribute for the HTML LINK and STYLE elements specify target media for an entire style sheet.
• Media type names are case-insensitive.

Ten Media Types:

1. all
   Suitable for all devices.
2. aural
   Intended for speech synthesizers. See the section on aural style sheets for details.
3. braille
   Intended for braille tactile feedback devices.
4. embossed
   Intended for paged braille printers.
5. handheld
   Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
6. print
   Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
7. projection
   Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.
8. screen
   Intended primarily for color computer screens.
9. tty
   Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
10. tv
    Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

1. XSL:FO (for eXtensible Style Sheets: Formatting Objects), which is an effort within the W3C to create a far more complex styling language. But there are older technologies that could, in theory, be supported by browsers.
2. DSSSL - stands for Document Style Semantics and Specification Language.
   • "...Cascading Style Sheets wasn't the only proposed style language at the time [1994]. There was PEI Wei's language from the Viola browser, and Robert Raisch of the publishing house O'Reilly had written another, as early as June 1993. And then there was DSSSL, a complex style and transformation language under development at ISO for printing SGML documents. DSSSL could have conceivably be applied to HTML as well. But CSS had one feature that distinguished it from all the others: it took into account that on the Web the style of a document couldn't be designed by either the author or the reader on their own, but that their wishes had to be combined, or "cascaded," in some way; and in fact, not just the readers and the author's wishes, but also the capabilities of the display device and the browser...." Lie, Hakon Wiume, Bos, Bert, & Calliau. Cascading Style Sheets, Second Edition: Designing for the Web, Addison-Wessley, 1999. p. 357.
3. Javascript Style Sheets (JSSS) was a proposal by Netscape back in 1995/1996, and it was very similar to CSS. In the end, the W3C chose CSS and JSSS was relegated to historical-footnote status... except in NN4.x. Ever notice that if you disable Javascript in NN4.x, CSS support vanishes as well? That's a hangover from the JSSS proposal

A stylesheet that is always applied to the document. One example is the user agent's stylesheet: it's always applied, although you can override it with your own styles. In Mozilla milestones and builds, this is what the "Basic Page Style" entry in the "Use stylesheet" menu represents.

It's largely up to the user agent to determine what is meant by a "preferred" stylesheet, but at this stage in the Web's development it's usually a persistent style. However, a user agent could eventually choose to do something else with preferred styles, such as ignore them. Or let the user switch them on and off as a group. Or even give their rules higher weight in the cascade than the rules from persistent stylesheets, regardless of the order in which they're specified. For now, I'd just treat preferred stylesheets as if they're persistent, unless we find that browsers do indeed treat them differently.

These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set.

To make the style sheet paul.css persistent, the following link element would be included in the head:

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

These style sheets are enabled by default (they are “on” when the page is loaded). They can then be disabled if the user selects an alternate style sheet.

To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute.

Several preferred style sheets can be grouped together by giving them identical title attributes. These grouped style sheets are then all enabled and disabled together. If more than one group of preferred style sheets are declared, the first group takes precedence.

To make preferred.css preferred, a title attribute is added, giving the default style a name.

<link rel="stylesheet" type="text/css" href="preferred.css" title="preferred" >

If you're using Explorer, you can see the results of your print styles using the "Print preview." The other way to do it is to write a print stylesheet in screen media and then, when finished, switch the media value.

For example, I might write a stylesheet that looked something like:

<style type="text/css" media="screen">
body {color: black; background: white; font-family: Times, sans-serif;}
p {margin: 0; text-indent: 3em;}
h1, h2, h3, h4, h5, h6 {margin-top: 1.5em;}
h1, h2, h3 {border-bottom: 1px solid black;}
h4, h5, h6 {border-bottom: 1px solid gray;}
a:link, a:visited {text-decoration: underline;
color: black; backgorund: white;}
.noprint {display: none;}
</style>

...and so on, making changes and previewing them in my browser. Once I had the stylesheet tweaked to my satisfaction, then I'd make one simple change:

<style type="text/css" media="print"> In the meantime, while styling for print, I'd want to make sure I didn't have the actual screen-media styles interfering. So let's say that I had a screen-media stylesheet in the document. Before I started work on my print styles, I'd edit it to only apply to a medium like tty or aural-- something I knew my browser didn't support. Then, once I'd switched my print styles to actually have media-"print", I'd switch the tty value back to screen.

Remember this, however-- the default value of media is all. So if you don't give a stylesheet a media value, it will be applied to your printouts as well as the screen display.