Una de las mejores características de las hojas de estilo en cascada está descrita en su propio nombre: en cascada. Significa que si cambias la definición del estilo todos los elementos de la página que tienen ese estilo aplicado cambiarán al mismo tiempo en una “cascada”.
De acuerdo a las recomendaciones de la W3C los diseñadores no debemos basarnos solo en el color para transmitir información. Es una recomendación razonable que debemos seguir siempre.
Como muchos de vosotros diseñadores sabréis, nosotros solemos trabajar con paletas de color. En los programas de edición gráfica definimos paletas de color y las usamos para aplicar el color a los distintos estilos en uso. De esta forma, si queremos cambiar el esquema de colores solo tenemos que redefinir la paleta y el cambio se aplica a todos los elementos del documento que usan esos colores, dando un nuevo aspecto al documento. De la misma forma, podemos usar el mismo estilo pero diferentes colores para distintas secciones de un documento. Pero en CSS si quieres hacer eso debes crear una nueva hoja de estilos, haciendo un “buscar y reemplazar” en todo el documento para cambiar las definiciones de colores.
Es por eso que me gustaría ver implementadas las paletas de colores en CSS3. De esa forma puedes cambiar en cascada los colores de la misma manera en que lo hacen los estilos . Indicando una nueva sub-paleta puedes utilizar el mismo CSS para diferentes secciones, o puedes usar el mismo tamaño de letra, tipografía, etc. pero al mismo tiempo puedes cambiar el aspecto general con solo cambiar los colores de una forma sencilla.
El ejemplo que doy a continuación dará una mejor idea de como se pueden implementar las paletas.
Tal vez necesite ser mejorado por las personas que se encargan de las definiciones de la CSS3, pero creo que da una idea general de como podría funcionar.
Espero que os agrade esta idea.
/* 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;
}
Hace poco que me he comprado la implementacion de Css y aun voy un poco perdido, no encuentro documentacion en español y me gustaria cambiar algunas cosas. Espero que en tu blog sigas aclarando un poco las cosas.
Un saludo
Muy buena e interesante propuesta