Sunday, January 16, 2011

Upcoming CSS and JS Features that I'm looking forward to!

Recently I attended a talk from Tab Atkins about future CSS and JS features that are currently being developed by Chrome's team in Webkit, and will be proposed to the W3C as standards, once the team feels confident about them. He mentioned quite a few interesting things I'd like to see soon in both languages.

CSSOM (CSS object model --

From W3C's site:
CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and of course CSS itself.
In simple words CSSOM will be the way that CSS and JS will interact. With those API's the browser will be able to give us meaningful values for DOM elements in JS. For example so far when we need to get the css width of a DOM element what we usually do is:
If we have defined, "width: 100px", for element (#some_id) what this method would return is: "100px". So with this unfortunate value we'll have to parse out the string "px", since we were lucky enough to have width defined in px. If we didn't have px, then we would have to go through the process to modify em's lets say to px and then manipulate the value. With CSSOM we would be able to do:
which will return the width of the element in px (e.g 100). Cool, right?

CSS Variables

At last what we've all been waiting for! CSS Variables can define stylesheet-wide values identified by a token and can be used in all CSS declarations. A recurring value, like colors or background-color in a stylesheet, will be way easier to update across the stylesheet if a developer has to modify at just one single place or value instead of modifying all style rules applying the property:value pair. Here is the proposed syntax:
@var header-color color #006

.header {
   color: var(header-color);
We will even be able to get these variables values from JS, in the following way:
Notice that the type of the variable will need to be declared (in this case "color"). This will allow the browser to give more meaningful data to any JS that accesses the variable. For example, for a color, you can get
to get the red component of the variable, etc. We will also be able to define local variables, which will have visibility only within a rule (with the @local keyword).

CSS Mixins (

Mixins allow document authors to define patterns of property value pairs, which can then be reused in other rulesets. 
In simple words mixins is a set of rules which we can define and include in a different rule. Here is an example:
@mixin clearfix {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;

.mainContent {
  color: #222;
  @mixin clearfix;

CSS Nesting

Currently there is a usually lot of repetition in long stylesheets. You may have run into something similar to the following rules:
#content >  ul {
  margin:0 2em;
#content > ul li {
  padding:2px 5px;
With CSS nesting that could be translated to a more compact and less verbose form, like:
#content {
  @this > ul {
    margin:0 2em;
    @this li {
       padding:2px 5px;
Wouldn't it be great to have all of the above features? According to Tab Atkins all of the above features are still being developed by Chrome's engineers and are going to be first implemented in WebKit (Chrome and Safari) and then be proposed to W3C. So, we should expect to see these things in their finalized form (and developed by other browsers) by the end of this year. For those who really want to work with those features, they can download Chrome's dev channel and start playing with them. They should be coming really soon now. Enjoy! :)

Tab Atkins' slides from this talk:


  1. Yeah, it is great features, but the old browsers still does not support it (i mean IE).

  2. Hi there! I simply want to offer you a huge thumbs up for your great information you have right here on this post.I will be coming back to your site for more soon.
    Tableau Guru

  3. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.
    Digital marketing company
    Digital marketing services

    1. Great Article
      Cyber Security Projects

      projects for cse

      Networking Projects

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

  4. Truly an Outstanding post.I reading this blog post it's amazing. We post this blog post is very unique and it's that share with us. We share this post is very exclusive.
    SEO Training in Chennai | Digital Marketing Course in Chennai

  5. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training in India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

  6. Only here you will find the best casino gaming Come in and win now.

  7. This article will outline all the different strategies you should be aware of when it comes to soccer.

    Best IAS Coaching In India