One of the best features of CSS is implied in its own name: cascading. It means that, if you change a style definition, all elements of a page that have that style applied will change at the same time in a “cascade”.
As recomended by ths W3C designers must not rely on color alone to convey information. That’s a reasonable recomendation that we designers must always follow.
As you designers probably know, we use to work with color palettes. Usually a documents has a previously decided range of colors, often limited to just a few, that we use throughout the document. In DTP applications we define this color palette and use it to apply color to the different styles in use. In that way, if we want to change the color scheme, we just have to redefine the color palete and the change is applied to all the elements that use that colors in the document, giving the document a different feeling. In the same way, we can use the same style but different colors for different document sections. But in CSS, if you want to do that you have to creave a whole new style sheet, doing a “find & replace” all over the CSS to change the color definitions.
That’s why I’s like to see CSS Color Palettes implemented in CSS3. In that way colors can cascade the same way other styles do, just by specifying a new sub-palette you can use the same CSS for different sections, or you can use the same font size, face, etc. but change the overall feeling by just changing the colors in an easy way.
The example below will give you a better idea at a way it may be implemented.
Maybe it will need further refinement by the people in charge of the CSS3 definition, but I think the general idea is there.
I hope you like this idea as well.
/* CSS Color Palettes definition - CCP
by Damian vila (damianvila@gmail.com)
If no name is specified for the palette the array number is used. The "default" palette is the first user defined palette (01). Palette number 00 is the internal agent palette.
Maximum number of colors and sub-palettes is 255 (ff).
Sub-palettes and colors can be referenced either by its name keyword (red, bright-green) or by id-number (color00, color0a, colorff, color127).
If no palette is specified or the wrong name for palette or color is given, the agent internal palette or color for that object is used.
If color number is used, by changing the sub-palette name the color scheme will cascade. If color definition is changed, all elements using that color keyword will cascade.
The scheme for the color definitios is as follows: colornn: color-def "keyword", where nn is the color array number, color-def is the color definition in any standard CSS notation and "keyword" ir a string to reference the color in an easy way.
Color array number can be specified either in decimal or hexadecimal. Keyword must contain no white space.
*/
!color-palette { /* “default” color palette */
color00: #800000 “maroon”;
color01: #ff0000 “red”;
color02: #ffA500 “orange”;
color03: #ffff00 “yellow”;
color04: #808000 “olive”;
color05: #800080 “purple”;
color06: #ff00ff “fuchsia”;
color07: #ffffff “white”;
color08: #00ff00 “lime”;
color09: #008000 “green”;
color10: #000080 “navy”;
color11: #0000ff “blue”;
color12: #00ffff “aqua”;
color13: #008080 “teal”;
color14: #000000 “black”;
color15: #c0c0c0 “silver”;
color16: #808080 “gray”;
}
!color-palette “green” {
color00: #0f0 “bright-green”; /* text */
color01: #fff “white”; /* background */
color02: rgb(0,192,0) “green”; /* titles */
…
}
!color-palette high-contrast {
color00: #000 “black”; /* text */
color01: #ffc “light-yellow”; /* background */
color02: #00f “blue”; /* titles */
…
}
body{
color-palette: “green”;
backgound-color: !01;
}
a {
color: bright-green;
}
h1 {
color: !02;
}
Ultimos comentarios