Proposal for adding variable declaration blocks

Here are a couple of ideas for how to extend CSS variables to deal  
with declarations.

(1) Declaring the declaration block:

(a) A second type of block could be introduced that represents a named  
declaration.

@variable-group headers screen {
       color: green;
       background-color: white;
}

(b) A nested declaration could be added to existing @variables rules:

@variables {
   foregroundColor: blue;
   @declaration headers {
     color: green;
     background-color: white
}

My preference would be for option (b), since you would not have to  
redeclare the media types, and the existing CSSVariablesDeclaration  
interface could be extended to have a method that would hand back a  
CSSStyleDeclaration for a variable name (that would succeed if the  
variable in question is a declaration).

Note that there would have to be a note in the spec that the var()  
notation can't be used with a declaration variable (and would  
basically cause the var() to be ignored.

(2) How to use the declaration block:

(a) Make up a fake property.

h1 {
   includes: headers;
   font-size: 24px;
}

(b) Make up a selector "annotation" notation

h1 includes headers {
   font-size: 24px;
}

(c) Make up some other kind of syntax

h1 {
   @includes headers;
   font-size: 24px;
}

I believe (b) is the most elegant notation.  The only disadvantage of  
(b) is that you would not be able to control the precise ordering  
(i.e., the properties would just occur at the front always and could  
not be precisely placed).

dave
(hyatt@apple.com)

Received on Tuesday, 1 July 2008 21:00:01 UTC