Optional Style Rules (@option proposal)

Hi,
   In the past, there have been several suggestions for supporting 
alternate and/or preferred style sheet mechanisms within CSS, using 
rules such as @alternate and @preferred (or anything equivalent).  The 
most recent of which I found was the thread started by William 
Birchenough [1].

   However, there are some limitations with the alterate/preferred 
stylesheet mechanisms that I will address here.  Firstly, when providing 
alternate stylesheets, the variation may only be a small change, such as 
increasing the font size, changing colours, etc…, leaving everything 
else the same.  Also, alternate stylesheets are limited to having one 
selected at a time.  There are also other issues, but they're not really 
relevant to this proposal and most have already been discussed in 
previous threads.  BTW, I'm not saying that we should completely forget 
about those proposals, just that they're not appropriate in all situations.


*The Example*

To start with, the example site I'll use has 3 style sheets.  One 
persistant, one preferred and one alternate:

<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="desert.css" title="Desert"/>
<link rel="alternate stylesheet" type="text/css" href="ocean.css" 
title="Ocean"/>


*The Problem*

   If I wanted to provide the option of having variations of my alterate 
style sheets, such as different font size/face, expanded abbreviations 
or alterate heading images (for "Desert" Only in this example), 
currently, I would have to create a new stylesheet and provide another 
<link/> in all my documents.

<link rel="stylesheet" type="text/css" href="desert-largefont.css" 
title="Desert - Larger Font">
<link rel="stylesheet" type="text/css" href="desert-expabbr.css" 
title="Desert - Expanded Abbreviations">
<link rel="stylesheet" type="text/css" href="desert-altimg.css" 
title="Desert - Alternate Heading Images">

Large Font and Expanded Abbreviations would have to be repeated for the 
Ocean stylesheet and any other stylesheets added later.

   However, there is still the limitation that only one option can be 
selected, without providing more alternate stylesheets with all possible 
combinations, creating a very messy and complicated set of stylesheets.

eg. All the Stylesheets could be (For "desert" only):
1. Large Font
2. Expanded Abbreviations
3. Alternate Heading images
4. Large Font + Expanded Abbreviations
5. Large Font + Alternate Heading Images
6. Expanded Abbreviations + Alternate Heading Images
7. Large Font + Expanded Abbreviations + Alternate Heading Images

   That's 7 different style sheets to cover all possible combinations of 
options, but that would all (except for the alt. heading images) have to 
repeated again for the Ocean stylesheet, plus any other's that may be 
added in the future.


*The Proposed Solution*

   Provide a set of optional style rules that can be turned on or off by 
the user and applied regardless of any other selected options.  This can 
done with an @option at-rule.

• Each option would need to have a title (if no title is given, the
   block should either be ignored or given a default title by the UA)
• Options with the same title, in the same or different stylesheets
   should be treated as the same option.
• Properties within option rules should override existing properties
   when the option is selected.
• When properties within option rules are the same, normal cascading
   rules should apply to determine which is used.
   eg. font-size: is set in option rules for the same selector
       in a persistant and an alteranate stylesheet, with both
       options selected.
       Correct me if I'm wrong, but normal cascading rules would let
       the property in the alternate stylesheet be used over the
       property in the persistant stylesheet.
• This could be nested within @media to provide media dependant options.
• Options within persistant stylesheets are available at any time.
• Options within preferred/alternate stylesheets are only available when
   that style sheet is selected.
• And, best of all, existing UAs will ignore the rule, which doesn't
   matter because they're optional anyway.

/The Syntax/

@option "Title" {
     /* Styles */
}

/The Example/

   Using @option, the example above could be reduced back to 3 
stylesheets, yet still provide the same amount of flexibility with style 
selection.

-- style.css --

/* Persistant Styles here */
@option "Expanded Abbreviations" {
     abbr[title]:after, acronym[title]:after {
         content: " (" attr(title) ")"
     }
}

-- desert.css --

/* Normal Desert Styles here */

@option "Alternate Heading Images" {
     h1#title { content: url("alt-desert-title"); }
     h2#news { content: url("alt-desert-news"); }
     /* etc... */
}

-- ocean.css --

/* Normal Ocean Styles here */
body { font-family: "xyz", fantasy; )

@option "Larger Font" {
     /* The above font may be harder to read at larger font sizes */
     body { font-family: "Verdana", sans-serif; }
}

/The Explanation/

• Expanded Abbreviations specified in style.css,
   can be applied any time.
• Larger Font specified in style.css and ocean.css,
   can be applied any time, however when Ocean is selected,
   the font-family is also changed.
• Alternate Heading Images specified in desert.css,
   can only be applied when Desert is selected.

The following ascii-art table shows which options can be applied 
depending on the selected style sheet.

   Stylesheet: | Desert | Ocean
--------------|--------|--------------------------------
Option:       |        |
Exp. Abbr.    | Yes    | Yes
Large Font    | Yes    | Yes, including font-face change
Alt. Images.  | Yes    | No

[1] http://lists.w3.org/Archives/Public/www-style/2004Feb/0421.html

-- 
Lachlan Hunt

Received on Saturday, 1 May 2004 12:50:09 UTC