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
- Better CSSOM
- Variables
- Mixins
- Nesting
CSSOM
- The interface between javascript and CSS
- Totally string based
- Only virtue is that it exists
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