CSS3

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.

David Storey, Chief Web Opener at Opera, has announced on his blog that the latest internal builds of the Opera browser have advanced CSS3 selectors support.

Some of the new selectors are already enabled in the builds, while others have been implemented but not yet enabled due to technical reasons. All are hoped to be available in a future release version.

Dave Hyatt over at the WebKit blog announced that the WebKit nightly now supports multiple columns. I’ve updated the css3 preview page for multi-column layout to match this great news, and I hope more browsers will pick up one of the best new features of CSS3!