This module defines a pattern for tagging alternate style sheets using a microformat. It can be used to define standardized classes that can be hooked into the browser UI. Sample use cases include horizontal-vertical layout switches in Japanese Ebook readers; automatically selecting high-contrast styles; and other accessibility concerns.
This is an unapproved working draft and has no official status at the moment.
Comments on, and discussions of this draft can be sent on the (archived) public mailing list www-style@w3.org (see instructions).
This is a working draft and may therefore be updated, replaced or rendered obsolete by other documents at any time. It is inappropriate to use Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group.
To find the latest version of this working draft, please follow the "Latest version" link above.
HTML 4.0 defines the linking
of external style sheets using the <link> element.
Although typically a style sheet is linked in unconditionally, HTML 4
also defines alternate style sets, which are named, mutually-exclusive
sets of style sheets that the reader can use to alter the display.
Until now, few HTML user agents have exposed alternate styles in a meaningful way. However, alternate styles are a very simple way to allow the user to alter a document's presentation to his or her preferences and accessibility needs.
This specification takes advantage of the class attribute
of the HTML <link> tag (introduced in HTML5, but supported
in many UAs for much longer) to define style tags: a markup pattern for
tagging style sheets with standardized class names. These class names can be
used by a UA to offer special UI access to such tagged style sets.
The original impetus for this proposal was to offer standard controls for switching between horizontal and vertical layouts in Japanese ebook readers; this use case is addressed in Appendix A.
None of this specification applies if the UA has unilaterally turned author style sheets off. (This ability is required by HTML and CSS.) In this case, of course, all style sheets are disabled.
The CSSOM has more low-level controls for controlling whether a given style sheet is enabled or disabled; scripting the CSSOM may alter the behavior defined here.
It is a known bug that this revision of the spec doesn't fully define interaction with the CSSOM and has no error handling rules. :) Probably error-handling will be defined by pointing to the CSSOM spec.
This is an informative summary of HTML's declarative alternate style set mechanism, with a few slight changes to terminology.
HTML 4 defines two types of style sheets in its linking mechanism: persistent style sheets and alternate style sheets.
A persistent style sheet is one that is always enabled,
regardless of which alternate style set is enabled. A persistent
style sheet is indicated by omitting the title attribute
from the <link> or <style> element that imports it.
An alternate style sheet is one that is part of an
alternate set, and may be enabled or disabled as part of that set.
An alternate style sheet is indicated by setting a non-empty
value for the title attribute of the <link> or
<style> that imports it. Except for style sheets belonging
to a preferred style set (see below), alternate style sheets
must have an alternate value in the rel
attribue value addition to the stylesheet value.
HTML allows the grouping of multiple alternate style sheets
into a single, named alternate style set. All alternate
style sheets with the same title value belong to the
same style set.
The author can indicate whether an alternate style set is
preferred by omitting the alternate value
from the rel attribute of each of its component
alternate style sheets. If no preferred style sets are defined,
the default preferred style set is an unnamed set containing
no alternate style sheets.
By default, the first preferred style set is loaded. The
author can override this behavior with the Default-Style
meta or HTTP header as defined in [[HTML4]].
A style sheet can be tagged by adding the tag's name to the
class attribute of the <link>
or <style> elements that imports it. Tagging
a style sheet with a standard style tag (one defined by a
specification referencing this specification) indicates that it
implements the functionality described by the style tag's
definition. Both alternate style sheets and persistent style
sheets may be tagged in this way.
A style set can be tagged by tagging any one of its component style sheets. Tagging a style set indicates that it offers the functionality described by the style tag's definition.
Authors using standard tags should tag all alternate style sheets within a style set with the same set of standard tags.
Future versions of this specification may allow UAs to selectively disable tagged style sheets within a style set. Therefore all alternate style sheets that need to be enabled or disabled together must have the same set of standard tags.
If two style sheets within a style set are tagged with mutually exclusive tags, both tags are ignored.
A specification that defines style tags may indicate that a particular tag is assumed to be the default for untagged style sets.
The following style tags are defined by this appendix:
horizontalvertical.verticalhorizontal.The UA may guess whether an untagged style set is horizontal
or vertical, or may instead assign such a style set an
indeterminate state.
The following examples use XHTML syntax; to use
HTML syntax, simply drop the slash before the > in
the tags.
In the following example, the author provides a style sheet for a primarily horizontal-text presentation of the document:
<link rel="stylesheet" href="horizontal.css" class="horizontal"/>
The UA, knowing that only a horizontal version is provided, would have to synthesize a vertical style if one is needed.
In the following example, the author provides a style sheet for a primarily vertical-text presentation of the document:
<link rel="stylesheet" href="vertical.css" class="vertical"/>
The UA, knowing that only a vertical version is provided, would have to synthesize a horizontal style if one is needed.
In the following example, the author provides style sheets for both horizontal-text and vertical-text presentations of the document:
<link rel="stylesheet" href="horizontal.css" class="horizontal" title="横組"/> <link rel="alternate stylesheet" href="vertical.css" class="vertical" title="縦組"/>
Since only the second style set is marked with the
alternate value of the rel attribute,
the author has indicated a preference for the horizontal
style set which, in the absence of a user override, should
be used by default.
In the following example, the author provides style sheets for both horizontal-text and vertical-text presentations of the document:
<link rel="alternate stylesheet" href="horizontal.css" class="horizontal" title="横組"/> <link rel="stylesheet" href="vertical.css" class="vertical" title="縦組"/>
Since only the first style set is marked with the
alternate value of the rel attribute,
the author has indicated a preference for the vertical
style set which, in the absence of a user override, should
be used by default.
In the following example, the author provides style sheets for both horizontal-text and vertical-text presentations of the document:
<link rel="stylesheet" href="horizontal.css" class="horizontal" title="横組"/> <link rel="stylesheet" href="vertical.css" class="vertical" title="縦組"/>
Since neither is marked with the alternate value
of the rel attribute, both are preferred presentations
by the author. Since the horizontal presentation is provided
first, in the absence of a user preference to the contrary, it
will be used by default.
The following style tags are defined by this appendix:
daynight.nightday.In the following example, the author provides style sheets for both both day vision and night vision presentations of the document. Both horizontal-text and vertical-text presentations are available, but the horizontal presentation is preferred:
<link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Day"/> <link rel="alternate stylesheet" href="day.css" class="day" title="Vertical Day"/> <link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Night"/> <link rel="alternate stylesheet" href="night.css" class="night" title="Vertical Night"/> <link rel="stylesheet" href="horizontal.css" class="horizontal" title="Horizontal Day"/> <link rel="stylesheet" href="day.css" class="day" title="Horizontal Day"/> <link rel="stylesheet" href="horizontal.css" class="horizontal" title="Horizontal Night"/> <link rel="stylesheet" href="night.css" class="night" title="Horizontal Night"/>
Of the preferred style sets, the day vision variant is listed first, and so in the absence of other preferences will be loaded by default.
The same effect can be created with fewer link tags by using @import statements: <link rel="alternate stylesheet" href="vertical-day.css" class="vertical day" title="Vertical Day"/> <link rel="alternate stylesheet" href="vertical-night.css" class="vertical night" title="Vertical Night"/> <link rel="stylesheet" href="horizontal-day.css" class="horizontal day" title="Horizontal Day"/> <link rel="stylesheet" href="horizontal-night.css" class="horizontal night" title="Horizontal Night"/>
/* vertical-day.css */ @import "vertical.css"; @import "day.css";
/* vertical-night.css */ @import "vertical.css"; @import "night.css";
/* horizontal-day.css */ @import "horizontal.css"; @import "day.css";
/* horizontal-night.css */ @import "horizontal.css"; @import "night.css";
This draft resulted from discussion in the CSS Working Group and EPUB Working Group and would not exist without the particular suggestion of Anne van Kesteren.