The Current State of CSS Gradients Support
Posted on May 8th, 2009 | No Comments »
While doing some web design brainstorming earlier today, I wondered if any progress had been made on adding support for CSS Gradients beyond WebKit, for which support was first introduced a little over a year ago. Via MozillaZine, I realized I’m not the only one wondering this, and ended up stumbling upon the Bugzilla bug tracking the progress of CSS Gradients support in Firefox. Reading through some of the commentary there, it gave me a newfound appreciation for just how fluid the implementation of these kinds of features really is. For example, it’s somewhat obvious that the original support as announced at Surfin’ Safari was based on some of the canvas documentation related to HTML 5.
Paraphrasing the HTML5 spec and adjusting the language slightly to not be canvas-specific:
“The color of the gradient at each stop is the color specified for that stop. Between each such stop, the colors and the alpha component must be linearly interpolated over the RGBA space without premultiplying the alpha value to find the color to use at that offset. Before the first stop, the color must be the color of the first stop. After the last stop, the color must be the color of the last stop. When there are no stops, the gradient is transparent black…”
Furthermore, it’s obvious that not everyone completely agreed with the initial implementation, and it’s clear that Firefox developers collaborated with WebKit developers to hone in on a more logical implementation.
All of that being said, the reality is that CSS Gradients are not supported widely enough at the moment to be considered tools in the common web developer’s tool belt. As aforementioned, Firefox support is still in progress (as of yesterday, in fact) and support in Internet Explorer 8 and Opera 10 appears to be non-existent, based on visits to this demo in those browsers. The demo only seems to work as expected in Safari and Chrome (the latest “Dev” version, at least), which makes sense, since those are the major players that sport WebKit under the hood.
We’ll be keeping an eye on the progress of CSS Gradients support and several other, similar implementations over the coming year.
Tags: Bugzilla, Canvas, Chrome, CSS, CSS Gradients, Development, Features, Firefox, Google Chrome, HTML 5, IE8, Internet Explorer, Opera 10, Opera 10 Alpha, Parity, Safari, Safari 4 Beta, Web Development, Web Standards, WebKit