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 -- http://dev.w3.org/csswg/cssom/)

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:
document.getElementById("some_id").style.width
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:
document.getElementById("some_id").style.values.width.px
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:
dom.stylesheets[0].vars['header-color']
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
.red
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 (http://oocss.org/spec/css-mixins.html)

From OOCSS:
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 {
  list-style-type:none;
  margin:0 2em;
}
#content > ul li {
  list-style-type:none;
  padding:2px 5px;
}
With CSS nesting that could be translated to a more compact and less verbose form, like:
#content {
  @this > ul {
    llist-style-type:none;
    margin:0 2em;
    @this li {
       list-style-type:none;
       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! :)





References
Tab Atkins' slides from this talk: http://www.xanthir.com/talks/2011-01-12/slides.html

5 comments:

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

    ReplyDelete
  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
    http://www.sqiar.com

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete