I'm Tab Atkins

...and I work for Google

Find me at @tabatkins

Watch CSS at @csscommits

Read my blog at xanthir.com

Experiments are great

We try to make sure things are sane and implementable before spending any significant effort pursuing standardization.

Some things we're thinking about

  1. Better CSSOM
  2. Variables
  3. Mixins
  4. Nesting

CSSOM

el.style.width = num + "px";

el.style.backgroundImage = "linear-gradient(" + color1 + "," + color2 + ")";

Why?

var w = parseFloat(el.style.width);

Better hope it's in px, not em or % or something more esoteric like vw!

The browser already knows how to convert between the values; why should you have to do it again (probably with bugs)?

New CSSOM Values API

(Syntax and concepts not finalized.)

The browser deals with CSS as concrete values, not strings. We can expose the same thing to you.

JS development always features CSS manipulation heavily.

These should make it much easier/faster/less buggy.

CSS Variables!

Variables! In CSS! OMG!

A common request for literally over a decade.

Why so long?

Previously, discussion was paralyzed by indecision and argument.

We're hoping enough agreement has crystalized that a strong experimental implementation can crash through the barriers.

Var Example


@var $header-color #006;
@var #main-color #06c;
@var #secondary-color #c06;
a { color: $main-color; }
a:visited { color: $secondary-color; }
h1 { 
  color: $header-color;
  background: linear-gradient(left,$main-color$, transparent 25%);
}
	

CSS Mixins!

Mixins are blocks of rules that can be "mixed in" with normal blocks of rules.

They promote reusability when it's not appropriate to decorate the HTML with extra classes.

CSS Preprocessors like LESS pioneered here.

Mixin Example


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

Mixins can also take parameters, which function like local variables:


@mixin rounded-corners($size 8px) {
  -moz-border-radius: $size;
  -webkit-border-radius: $size;
  border-radius: $size;
}
.foo {
  @mix rounded-corners(1em);
}
	

CSS Nesting!

Stylesheets often have tons of repetition in the selectors.

"#main > header > h1", "#main > header > h1 > a", "#main > header > h1 > a:visited", etc.

Verbose, hard to read, prone to hard-to-see errors

Nesting Example


#main > header > h1 {
  font-size: 2em;
  background: blue;
  color: white;
  & > a {
    color: #ddf;
    &:visited {
      color: #fdf;
    }
  }
}
	

Just syntax sugar for the long-form stuff.

Again, CSS preprocessors led the way.

Shorter stylesheets, better organization mean faster app development.

Explicitly indicates scoping opportunities, which might be useful for browser perf