Browsersphere

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

After reading an article over at the SiteCrafting Blah Blah Blog about different ways to alternate table row colors, it occurred to me that the nth-child approach was not mentioned.  Way back in 2004 I had implemented a ridiculous (hindsight is 20/20) proof-of-concept around implementing tables without using the <table> tag.  However ridiculous the prototype might have been, one touch I added was the use of the nth-child pseudo-class to display alternating table rows in a different color.  Here’s what I wrote about that at the time:

This rule is actually a part of the CSS3 selector set, and if your browser was capable of rendering it correctly (I’m willing to bet it isn’t, at least at the time of posting) you’d see alternate background colors on the table rows (alternating between white and light gray).

Remembering that old proof-of-concept today, I decided to have another look at it.  I was disappointed to find that even in the latest version of Firefox (version 3), over four years later, the alternating row colors were nowhere to be found.  I was happy to see, though, that the latest versions of Opera (9.51 at the time of writing) and Safari (3.1.2 at the time of writing) actually do display the alternating table row colors.  As one might guess, IE7 falls in the Firefox camp on this one.

It’s unfortunate that only half of the major players support this useful feature, but I’m guessing we’ll see support added in Firefox 3.1, of which there is a first alpha targeted for release at the end of this month, since that particular release is meant to include a slew of CSS support geared toward Acid3 compliance.  Furthermore, one can hope nth-child support will show up in IE8, but that may be the least likely scenario between the two.

Tags: CSS, CSS3, Firefox, Firefox 3, Firefox 3.1, IE7, IE8, nth-child, Opera, Safari, Selectors, Web Development, Web Standards

Google Doctype was released on Wednesday.  It has been described as follows:

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

This is certainly relevant to web browser compatibility, web development, etc., so I figured I’d post it here.  The corresponding video, which features Mark Pilgrim, is full of interesting info as well.  Toward the end, he mentions that the main browsers on which they focus their attention are the “tier 1″ browsers, namely Firefox, Internet Explorer, Safari and Opera.

Tags: Compatibility, Firefox, Google, Internet Explorer, Mark Pilgrim, Opera, Safari, Web Development