Divya Manian

RSS Feed Youtube Channel Github

Notes from HTML5 Readiness Hacking

Update: HTML5 Readiness now shows how HTML5 support has evolved since 2008. Click away to see the spurt of growth in 2010!

Paul Irish pinged me on Thursday evening wondering about visualizing browser support per HTML5/CSS3 feature for his presentation at JSConf on April 17th. I thought it would be a fun exercise in creating it with the “cool” features of CSS3. Soon, Paul had registered the domain and HTML5 Readiness was born. Here are some of the design and implementation notes from that process.

Design

The intention of the visualization is to show how much support exists for each new HTML/CSS feature. I remembered the graphic showing the distribution of wealth among religious Americans and I thought a similar structure would work for this one too and I really liked this ad for General Dynamics by Erik Nitsche.

Paul wanted to show support for 8 browsers (IE 7, 8, 9, Opera 10.10, Safari 4, Chrome 4, Firefox 3.5, and Firefox 3.7). The browsers are grouped into color schemes based on their underlying rendering engine - e.g. all Firefox versions are shades of blue, Chrome/Safari - yellow, IE - pink. Each ray also has a different background color if it is a CSS3 feature.

Each browser is represented with a tile on the bar and gets an equal width of space, so if you see a bar that is full, that means that feature has universal support among all the 8 browsers.

html5readiness.png

Sass to rescue

There was not enough time to spend working on a photoshop mockup and then implementing the design. I am also more comfortable working on a design in the browser (with all the CSS3 bells & whistles), so I dived in to HTML/Sass. Sass is a life-saver. The transforms (for each ray on the semi-circle), which result in about 114 lines of CSS (when compacted and with vendor-prefixes), are actually a result of just 4 lines of Sass:

@for $i from 1 through 28
 .ray-#{$i}
   +transform((-6.7deg*($i - 1)), 0%, 50%)
  
  i
    +transform((6.7deg*($i - 1)), 50%, 50%)

The odd angle multiplier (6.7) is because each ray (except the first) is transformed so that they fit into the 180 degree arc with equal angular space between each (0, 50% sets the axis for rotation). You can see the full Sass file on Github.

That’s it! Most of the work was done Thursday night / Friday morning. It was great fun dealing with 2D graphics after 8 years, and I loved working on it!

Comments