Conformance guides for print, projection, screen and all media stylesheets.
Test case results for aural, braille, embossed, handheld, TTY and TV media are equivalent.
Place your text ad here.
World class Hard Drive Recovery and renowned raid recovery services
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
The Opera Web browser introduced support for CSS2 projection media stylesheets, which can be used to display Web pages in a full-screen presentation slide show format, or "OperaShow" mode. This article gives some basic examples of projection media stylesheet attachment and workarounds for backward-compatibility in a range of CSS enabled Web browsers.
This article is part of the Code Style CSS2 media monitor, a test suite and compatibility guide for media dependent stylesheets. See Projection media browser conformance for a summary results table and test case analyses for each browser, and the CSS2 media stylesheet glossary for an explanation of the terms used here. This article itself has a projection media stylesheet and can be viewed in OperaShow mode (View > Full screen, or toggle F11).
link elements
The simplest and, on balance, safest way to attach projection media dependent styles to Web pages is to use the media attribute of the HTML link element. This markup is honoured by all but one of the browsers tested, which safely ignore such stylesheets in standard screen display mode. See test case 1.
link element
<link
rel="stylesheet"
type="text/css"
href="/styles/test/media/projection-Test1.css"
media="projection" />
Internet Explorer 3 was the first browser to introduce rudimentary support for Cascading Style Sheets (CSS) and its implementation does not take heed of the link element's media attribute. IE3 may display projection styles, but may not if other stylesheets are also in use. In practice, it seems that IE3 loads all link stylesheets but will only render the last loaded, which makes a partial workaround possible.
@import rules
Cascading Stylesheets level 2 introduces a second way to apply projection media stylesheets by adding a media qualifier to an @import rule. This syntax is potentially an ideal way to attach media dependent styles to Web pages because the basic @import rule is not supported by Internet Explorer 3 or Netscape Navigator 4, whose CSS implementations are known to have problems rendering some styles. See test case 5.
@import url(projection-Test5.2.css) projection;
Media dependent @import rules are safe in all the browsers tested for this article, but they are not actually supported by the browser which introduced projection media support, Opera versions 4.0 to 5.11. This is a significant shortcoming in the implementation of projection media styles and means that these browsers cannot claim to be conforming user agents according to the Word Wide Web Consortium's recommendation (emphasis added):
3.2 Conformance
...
In general, the following points must be observed by a user agent claiming conformance to this specification:
- It must support one or more of the CSS2 media types.
- For each source document, it must attempt to retrieve all associated style sheets that are appropriate for the supported media types ...
- It must parse the style sheets according to this specification. In particular, it must recognize all at-rules, blocks, declarations, and selectors (see the grammar of CSS2). If a user agent encounters a property that applies for a supported media type, the user agent must parse the value according to the property definition ...
Web server logs show that Internet Explorer 5.0, 5.01 and 5.5 on Windows platforms mishandle media dependent @import rules, requesting the spurious URL url(projection-Test5.2.css)%20projection, see test case 5. This is not significant for regard projection media styles, because this media type is not supported anyway.
@media projection rules
A third way to apply media dependent styles is with the @media rule, which allows a comma separated list of media categories to be specified. This syntax is safe in all Opera and Netscape browsers tested and is supported by Opera versions 4 and 5 in OperaShow mode. See test case 4.
@media projection{
H1{
font-size: 3em;
color: green;
background: white;
}
}
Like the media dependent @import rule, @media rules appear an ideal way to attach projection media styles because older browsers would not recognise the syntax. However, it seems Internet Explorer versions 3 and 4 overlook the initial @media projection{... container and render media dependent rules within as normal. This is a significant incompatibility because of the widespread use of IE4.
One conclusion of these projection media browser conformance tests is that despite implementing media dependent stylesheets, Opera versions 4 and 5 are not CSS2 conforming user agents in this regard. None of the browsers tested handled all valid syntax for attaching media dependent styles "safely" except Netscape Navigator versions 4.5 and 6.
@import rules
The common technique of using @import rules to "hide" rules which are known to problematic in Internet Explorer 3 and Netscape Navigator 4 runs into practical difficulties when combined with media dependent stylesheets, see test case 2. Several of the browsers tested lost media specificity with styles attached this way.
Formally, it should be possible to import a stylesheet which has media dependent style blocks in it; the CSS2 cascade recommendation specifically allows it:
6.4 The cascade
Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply.
Although this import mechanism is valid and successfully blocks the projection styles in Internet Explorer 3, it also breaks working support for the media dependent link elements in all versions of Opera and Internet Explorer 5 (cf. test 1). It seems the @import rule somehow causes the imported stylesheet to be treated as general declarations for all media in these browsers.
@import and @media rules
Since the use of the @import rule by itself appears to override the media specificity of styles, a further workaround would be to use an @media rule in the imported stylesheet, see test case 3 and test case 6.
This combination of @import and @media rules does successfully recover media specificity in all versions of Opera and Internet Explorer and this syntax does not cause problems in any of the other browsers tested except Internet Explorer 4. IE4 does support the @import syntax and evidently imports the secondary stylesheet but, as with test case 4, overlooks the @media projection{ container and renders the declarations within almost as normal.
One notable aspect of Internet Explorer's mishandling of this syntax is that it appears to ignore the first declaration in the @media style block and this offers a potential workaround which works in all browsers.
One of the consequences of Opera's failure to support media dependent @import rules is that there is no syntactically valid and backwards-compatible way of declaring projection media styles. The two most promising candidates are a simple link element with media attribute and the combination of @import and @media rules described above. These two options are mutually incompatible with Internet Explorer version 3 and 4 respectively, though, and ultimately a reasoned compromise must be made to prioritise the more recent and prevalent browser version.
To minimise the potential negative impact of projection stylesheets for the few Internet Explorer 3 users who still work with stylesheets enabled, it is advisable to work around known issues with this browser. The font-size property should be specified in percentages rather than em lengths for instance. Projection media stylesheets typically use larger font sizes and if these are inadvertently viewed in Internet Explorer 3 it would be better if they are too large than illegibly small pixel equivalents of em lengths.
It is also possible to make use of IE3's "last loaded stylesheet renders" behaviour by marking up links for screen styles after your projection media stylesheet for example. A general purpose or print media stylesheet might use style rules which would be more suitable if loaded last in IE3.
One final compromise to consider for a degree of certainty about backward-compatibility is to take advantage of the way that Internet Explorer 4 mishandles @media rules. Since this browser appears to ignore the first rule in an @media style block, one solution may be to import a stylesheet which declares all projection media styles in individual @media rules:
@media projection{
H1{
text-align: right;
color: olive;
background: white;
}
}
@media projection{
H2{
text-align: right;
color: olive;
background: white;
}
}
@media projection{
H3{
text-align: right;
color: olive;
background: white;
}
}
On balance this format would be difficult to maintain relative to the significance of the problem with Internet Explorer 3. The markup sequence of projection media style link followed by print media link used for this article is probably preferable in most circumstances.
Copyright © 2000-2008 Philip Shaw, all rights reserved, terms and conditions apply.