» Tag CSS variables

CSS variables support

November 11, 2016Announces, HTML and CSS, Sciter,

I am adding support of CSS variables. In Sciter this is pretty much about the same feature set as defined in CSS Variables Working Draft but with slightly different syntax:

Declaration of the variable:

body {
   var(foo): #f00;       /* declaring variable with name "foo" 
                            having color value */
   color: var(foo,#000); /* using the variable */
}

Variables are inheritable so everything inside <body> can use that variable:

div {
   background-color: var(foo,#00f);
   size:200dip;
}

Note that variable usage contains two pieces: name of the variable and default value that will be used when variable is not defined.

DOM API in script will also get methods to get/set variables in runtime:

$(body).style.variables { 
    foo: color(0,255,0) 
}

After that all elements that use the variable in their styles will get new color.