CSS Variables and mixins, Interactive Validation and pre-rendering

Published on in Google Chrome, HTML, Last Week, tech, WebKit. Version: Chrome 10

With 1,134 commits in the last week, development certainly is getting back on track after the holidays. This week’s highlights include some plans for improving the CSSOM, implementation plans for CSS Variables and the landing of Interactive Validation within WebKit. I won’t address H.264. Enough people have done that.

If you’re interested in updates related to HTML, Anne van Kesteren published an item on recent changes happening around the WHATWG. The article mostly covers discussions which took place on the whatwg@whatwg.org mailing list, and certainly is an interesting read!

Tab Atkins, member of the CSS Working Group and the Google Chrome team, has published the slides of a presentation he hosted last Wednesday. It talks about how the CSSOM, the interface between JavaScript and CSS, basically sucks. The presentation demonstrates four relatively new concepts:

  • CSS Variables
    By declaring a variable through the @var rule, its type and the value, anything from colors to lengths, rotations and functions can be defined and will be available to all CSS used in the document. Support for local variables will be available as well, through the @local at-rule.

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

  • CSS Mixins
    Mixins come down to being able to extend any rule with certain, common properties. They take parameters similarly to CSS Variables, including the ability to have default values for them.
  • CSS Nesting
    Nesting in CSS, especially when used without classes or IDs, can be a pain. The @this at-rule will be introduced for usage in CSS rules. The selector you supply behind it will apply only to descendants of elements matched by the current rule. That clears the way for structures like this:

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

  • CSS Modules
    No, not the CSS Modules which make up CSS Level 3. CSS Modules basically are namespaces for CSS Variables and Mixins. Mixins and variables can still be referred to by prepending their name with the namespace’s name, or by including the @use at-rule to have the parser include all of them.

    While the idea is fine, I personally think this shouldn’t be part of the specification. The use-case is easily obtainable by advocating authors to prefix their variable names, like “petersh-header-color” instead of “header-color”. Two types of namespacing, sharing similar syntax, is just going to cause confusion.

While the current code is only available on a few machines in Sydney, Google is planning to publish an initial specification this quarter, and implement the changes before the end of the year. Considering neither these plans for CSS Variables nor the CSS Mixins and Nesting have been shared on the www-style mailing list yet, it’ll be interesting to see how it will be received by other vendors. Related discussion from a few years ago has shown that it’s a fairly controversial issue, with many opinions being far apart.

Last Thursday, Kent Tamura landed support for the Interactive Validation UI using the new Shadow DOM model. With most bugs out of the way, messages and an –albeit internal– API being available for Chromium to enable the feature, it won’t be long before it becomes available in the nightlies.

In other specification-related news, the scroll event will now be fired asynchronously. The WebKitCSSMatrix object in the DOM now accepts none as a valid keyword, and using the toDataURL method for a canvas on Chromium will now composite onto a black surface when the destination format does not support an alpha channel.

Other changes which happened last week:

  • Tony Gentilcore now is a WebKit reviewer, congratulations!
  • Adam Barth is working on a proposal for embedding a security policy in an HTML document.
  • He also announced to have finished moving WebKit’s source files to a separate directory.
  • The about:sync page has been updated to use the new DOM UI displaying system.
  • The media player from WebKit’s GTK port now features a slider to change the volume.
  • Simon Fraser wrote an excellent article on his CSS3 Gradients implementation.
  • Support for dropping data to WebKit2 has been implemented for Mac OS systems.
  • Password synchronization has been enabled by default for Google Chrome.
  • Some issues with Safari’s strict mode implementations have been fixed.
  • The security model used chrome://-URLs has been updated, as described in this message.
  • Three fixes in Safari’s JavaScript engine found via Mozilla’s jsfunfuzz.
  • Crashed extensions will now be visible on the chrome://extensions page.
  • Following this very commit, the --enable-page-prerender will now actually pre-render your pages.
  • Chris Rogers added part of the Chromium-side for low-latency output for the Web Audio API.

And that’s all for this week!

7 Responses to “CSS Variables and mixins, Interactive Validation and pre-rendering”

Both comments and pings are currently closed.


January 18, 2011 at 8:51 pm

This is pretty much exactly what less.js does. I was never overly keen on using less.js, but if these get implemented natively then I’m sooooo frickin exicted!! 😀

Awesome post!


January 19, 2011 at 1:38 pm

Agreed, the CSS stuff sounds awesome. Can’t wait to play with an implementation of this. I imagine it’s one of those things that will be controversial until it’s implemented, at which point developers will leap on it, and pretty soon nobody will know who we lived without it 😉

These changes, plus shadow DOM and grid layout, should mean HTML+CSS really starts to match the power of frameworks like Flex and Silverlight for building componentized applications.


January 19, 2011 at 3:00 pm

Thanks for this article. I may have gone on overlooking these future CSS proposals had I not seen it.


January 19, 2011 at 3:38 pm

Worth mentioning that the toDataURL change only affects outputting to a specified format that doesn’t support an alpha channel, e.g. ‘image/jpeg’. By default it outputs in png and you get a transparent background.

Peter Beverloo

January 19, 2011 at 3:40 pm

Thanks, Jon, you’re right. I have updated the post 🙂

[…] To reference the parent selector you use @this instead of the &-character. Peter Beverloo wrote about this a year ago. Also Tab Atkins has an article about his further plans. This variant was not […]