Traffic-lights with CSS

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>Just before Christmas I wanted to build a site that helped developers understand the impact that using Web Platform features would have on there potential reach. For example, if I used WebGL what is my target reach and what additional features can I use without impacting my potential audience figures.</p> <p>I launched <a href="http://iwanttouse.com">iwanttouse.com</a>. Sweet. Anyway, that is not the point of this post. One of the features of this site is.</p> <p>One of the core features I wanted to implement was a traffic light system that graded the features like a traffic light. Green = Good, Red = Bad, Amber = Be Warned.</p> <p>My original implementation was just using some simple CSS classes.</p> <pre><code>.good { color: green; } .ok { color: amber; } .bad { color: red; } </code></pre> <p>I knew this was bad, but using RGB I couldn't work out sanely how to grade between 255,0,0, 255,126,0 and 0,255,0 without having logic in my code that looked like:</p> <pre><code>if (support < 25%) then .bad if (support >25% and support < 75%) then .ok if (support > 75%) then .good </code></pre> <p>added to that, I wanted the color to be more red than amber if it was at 35%.</p> <p>Anyway, after a little chat with the awesome <a href="http://twitter.com/aerotwist">Paul Lewis</a>, he mentioned that <a href="http://www.css3.info/preview/hsla/">HSL</a> (Hue, Saturation, Light) color scheme would be good for this problem because naturally the Hue value (0-359) rotates from Red, through Amber to Green (0 = Red, 45 = Amber, 90 = Green)</p> <p><span style="color: hsla(0, 50%, 50%, 1)">Red = <code>color: hsla(0, 50%, 50%, 1)</code></span> <span style="color: hsla(45, 50%, 50%, 1)">Amber = <code>color: hsla(45, 50%, 50%, 1)</code></span> <span style="color: hsla(90, 50%, 50%, 1)">Green = <code>color: hsla(90, 50%, 50%, 1)</code></span></p> <p>It is then simple given a value for percentage support to map that to 0-90 range and produce your traffic light colors.</p> <pre><code>element.styles.color = "hsla(" + ((percentage / 100) * 90) + ", 50%, 50%)"; </code></pre>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan