CSS3

Apologies to all for the delay between posts, the site authors are busy with jobs, family and holidays. We’ll have some new content very shortly. In the meantime, here’s a quick browser update.

Based on my own statistics – and these are not, of course, meant to be in any way representative – April saw a pretty decent leap for IE7; its share of the market rose to 21.1%, up from 18.6% the month before. Even more encouraging, IE6 fell to 46.5% after its shock rise to 50.6% last month.

Firefox’s share continues on a slow decline since I began my figures; from a high of 16.9% in November, it falls to 14.8% in the latest figures.

Microsoft were noticeably guarded with details of changes in future versions of IE at their recent MIX event, although hints were dropped that we’d see improvements to CSS, RSS, and AJAX, and that Microformats could be on their way.

In an effort to tie this post to the theme of this blog, let me ask a question: what three CSS3 features would you most like to see in IE8?

Update: Maybe I should reword the question: With the presumption that all outstanding CSS2 bugs are removed, and all remaining CSS2 declarations implemented, what CSS3 features would you most like to see in IE8?

I like to keep track of browser market share, specifically the growth of IE7, so that I can tell when its new CSS features become mainstream enough to start using. This month, I had a bit of a shock.

I’ve based my figures on eight different websites I manage, from personal blogs to international businesses, to try and get a broad range of figures – although they are not, of course, meant to be definitive in any way. I’ve tracked figures back for six months – IE7 was launched in October 2006 – and only included sites with that much historical data.

The figures (click here to see the graph) didn’t surprise me at first. IE7 started at 1.6% in October, had a huge boost to 12.1% in December, and growth has slowed since. Most of its share came at the expense of IE6, which started off with 60.8% and was down to 47.2% by February. But then, in March, IE6′s share increased to 50.6%. I thought I could put this down to an anomaly on one site skewing the results, but in 6 of the 8 sites I monitored, the result was the same – an increase in usage over the last month.

I can’t explain it. It’s like it just refuses to lay down and die.

If we want to move the web forward, we need to encourage people to drop IE6 as soon as possible. As far as I’m concerned, there are very few reasons to still be using it; either you work for a company that deploys software centrally and hasn’t upgraded yet, you’re a developer testing your code, or you don’t really know what a browser is and you’re unaware that other choices are available.

I’m assuming that a reader of this article is a web developer interested in CSS3. If we want to start using all the new opportunities that it creates, we need to kill off legacy browsers that don’t support it. If you’re using IE6 and you have any option whatsoever, switch to a better browser; IE7 at the very least. If you know someone who still uses IE6 and has any option whatsoever, get them upgraded. Evangelise all the options; Firefox, Opera, Flock, whatever; get people switching. Let’s kill this dinosaur off and let the fast mammals evolve to take its place.

My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so:

What would be the best way to do this?

One would be to make an image sprite of the images two states:

And use it as background-image on the element, swapping to the other state on :hover. One small problem with this is that IE6 only supports :hover on the a tag; another is that because the results are being pulled from a database, you’d have to write a dynamic stylesheet as well, to call the swap on all staff photos.

Another option would be to create two separate images of the original, one for each state, and write a Javascript function to swap them over on mouseover.

There are other solutions as well, but none of them are the best way; the best way is to place them in the page with img, then use the CSS3 opacity declaration for the switch, as so:

img { opacity: 0.6; }
img:hover { opacity: 1; }

Two short lines of code, much quicker, the same effect without any of the hassle.

As with the rest of CSS3, however, one big drawback: no native support in the IE family. It works on just about every other major browser, however.

I don’t mean to keep taking content from Opera’s Chief Web Opener, David Storey, every week, it’s just that he’s written about CSS3 a lot, recently. In his latest update on the forthcoming browser revision (codenamed Kestrel), he says that two buggy selectors have been fixed, and they are confident that when the remaining seven are ‘switched on’, they will also be fully implemented – making it the second browser to reach full compliance with the selectors test.

The latest security update of Firefox, 2.0.0.2, provides a fix for a possible spoofing attack using the CSS3 cursor property.

As far as I’m aware, this is the first known security hole which uses CSS3 properties; perhaps someone can correct me if I’m wrong.

A quick run through the visitor logs of 10 websites I run or manage shows that Internet Explorer 7 usage is still growing, although it’s slowed down considerably since the boom of December 2006 when Microsoft released it into the automatic update programme.

Average share for the month of February (to date) is 18.4%; the number varies from 9% to 26%. These figures are from a range of different sites, from personal blogs to full corporate websites, and are intended to be indicative, not definitive.

TheCounter.com puts the figure at 24%; Browser News provides a range between 14% and 25%.

I think 20% is probably a reasonable estimate; that’s one fifth of the market. It’s pretty big, but even with Firefox’s share of around 15% and Safari’s 5% or so (as well as the smaller market share of Opera and others) that means that less than 50% of the surfing public use a browser with even the most basic CSS3 functionality.

First, here’s another table showing CSS support in web browsers, including CSS3 declarations. Unfortunately the author only seems to have access to browsers that run in Windows, so it’s not as complete as it could be. Interesting, nonetheless.

Update: I stand corrected. There are options to choose which browsers display in the table, which makes it very useful.

And here’s a demonstration purportedly showing an implementation of the text-overflow: ellipsis property using CSS and Javascript (read about the property here). Perhaps I’m missing something, but it only seems to work patchily for me in Firefox and Opera; I wonder how much testing it’s had.

Mozilla released Gran Paradiso alpha 2, which is what will become Firefox 3. Running it through the CSS selectors testsuite shows there’s been a few improvements. It passed 32 out of the 43 selectors. Only 4 are buggy and 7 unsupported. That’s not a big improvement over Firefox 2.0.0.1, as that browser passes 26 of the 43, with 10 buggy and the same number of unsupported selectors. It looks like they’ve debugged issues with their attribute selectors so far, but this is only an alpha so there’s likely lots of improvements yet to come.

Recently I posted about Konqueror 3.5.6 and said:

It really is a shame that only a tiny proportion of web users have access to this excellent browser.

That comment was picked up by this blogger who responded:

Virtually every web user can use Konqueror. All they would need to do is install an operating system like Linux, FreeBSD, OpenBSD, NetBSD, Solaris, or Mac OS X.

As one of our readers has pointed out to us, the latest (3.5.6) release of the KHTML rendering engine passes all of the tests in our CSS selector testsuite – making the Konqueror 3.5.6 browser the most CSS3-compatible of all.

Also in the latest release is the implementation of text-overflow: ellipsis. It really is a shame that only a tiny proportion of web users have access to this excellent browser.