CSS3

We seem to be geting a nice partner in promoting CSS3: David Storey from Opera. His latest post shows you how to make buttons with CSS3 and without images. It’s a great post with some simple examples of how you can use text-shadow and rounded corners to create good looking buttons. Check it out!

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!

The WebKit developers are working hard on new CSS3 features. Last night Dave Hyatt mailed the webkit-dev mailinglist and blogged about the fact that box-shadow is now completely supported. I've quickly created a preview page for it. Then fellow CSS3 enthusiast Nicholas Shanks spoke to me on IM today and told me that the WebKit developers are working on supporting multiple column layouts as well. If you upgrade to the latest nightly, you can see their progress!

Last week we unveiled the CSS selector test over at css3.info. The test consists of over several hundred separate test cases, each designed to test a certain aspect of the compatibility of your browser with the CSS selector standards. Today we are going to expand the number of test cases to 578.

The new tests have a large impact of the results. There are quite a few browsers that used to pass with the old test cases, but fail with the new test cases. Generally we added test cases for the following situations:

• Dynamic updates: If you update the DOM using Javascript this should also affect the CSS selectors. Take for example the :empty selector. It only matches elements without any children. If you dynamically add a new child it should not longer match that particular element.
• White space in attribute selectors: There are four different ways an attribute selector could be written: [attribute=value], [attribute =value], [attribute= value] and [attribute = value]. We now test if your browser supports all of these variants.
• Case sensitivity of the value in attribute selectors: The previous version of the test contained a test case for determining if the value of an attribute selector was compared in a case-insensitive way. However this was not complete. We only tested the align attribute – which should be treated in a case-insensitive way. Only Konqueror failed this test. But there are also a lot of other attributes which should be tested in a case-sensitive way. Now almost every browser fails this test. More information about this case-sensitivity can be found on rakaz.nl: CSS selector bugs: Case sensitivity

We also changed the way results are reported. Instead of just showing whether a selector failed or passed, we now detect if the selector is fully supported, buggy, or not supported at all. This should give all of us a better idea about the state of the compatibility of each browser.

Since installing Ubuntu Linux at home, I’ve had the opportunity to work with the Konqueror browser – possibly the most standards-compliant browser available today (please do correct me if I’m wrong).

Konqueror leads the way in the implementation of the CSS3 Selectors module – in the testing I’ve performed so far, only the :checked pseudo-class doesn’t seem to work.

I’ve updated the compatibility table so you can see for yourself how advanced this remarkable browser is; it’s just a shame that less than 1% of internet users choose it as their main navigator.

We’ve updated the compatibility table for the Selectors module to include the latest version of the Konqueror browser. Konqueror supports even more selectors than we currently have on the table, so the table will be expanded further shortly.

The latest WebKit nightlies support HSL and HSLA, thanks to David Carson and Sam Weinig for implementing it on my request :).

A new preview page has been added, for HSL values in the Color module. So far, only Mozilla-based browsers support this feature.

Update: Also added HSLA values; only supported in Firefox 3 pre-Alpha.

[tags]css3, hsl, hsla, firefox, mozilla[/tags]

Just a small note: i have added text-overflow to the preview pages. Mostly unsupported at this time, it could be very useful though.