Upcoming CSS innovations

Tab Atkins, a member of the CSS working group and the Google Chrome team, published the presentation slides he gave last Wednesday.

This presentation demonstrates four relatively new concepts. :

Variables
By declaring a variable through the var construct, specifying its name, value, and anything from color to length, rotations, and functions, it can be available for all the CSS used on the page.
')
Support for local variables will also be present via the local construct.

@var paragraph-size length 12px; @var paragraph-color color rgba(0,0,0,0); p {   color: var(paragraph-color);   font-size: var(paragraph-size); } 

Impurities
Impurities provide an opportunity to expand the rule with the necessary properties with the ability to set default values.

 @mixin error {  background: #fdd;  color: red;  font-weight: bold; } div.error {  border: thick solid red;  padding: .5em;  @mixin error; } span.error {  text-decoration: underline;  @mixin error; } 

Nesting rules
Current attachments to CSS, especially without the use of classes or id, are painful. This construct is introduced to simplify this. It will be applied to the descendants of the current rule, inheriting its name. Now we can make this structure clearer:

 header {  color: red;  @this a {    color: blue;  } } 

Modules
No, not the modules that make up CSS 3. Modules are common namespaces for variables and impurities. Variables and impurities can be defined by writing the name of the module to the beginning of a proper name, or using the use construct.

 @module foo {  @var bar color red;  @mixin baz { color: blue; } } .foo {  color: var(bar); //   } .bar {  @use foo;  color: var(bar); //  } .baz {  @mixin foo|baz; //  } 

Although the current code is available on just a few machines in Sydney, Google plans to publish the initial specification this quarter and implement innovations by the end of the year. Considering that neither these variable plans, nor impurity plans were distributed in the www-style mailing subscription, it will be interesting to see how the changes will be accepted by other browsers. Similar discussions a few years ago showed that these are rather controversial issues with very different opinions.

Presentation slides