CSS3

Recently I had to code a box with rounded corners for a client, and I came up with a solution which works with 99% of the browser market and uses the CSS3 border-radius declaration for browsers which support it.

The simplified HTML code is:

<div class="curves top">
<img src="https://www.css3.info/wp-content/uploads/2009/09/topl.png" width="10"
height="10" alt=""/>
</div>
<div class="box"></div>
<div class="curves bottom">
<img src="https://www.css3.info/wp-content/uploads/2009/09/botl.png" width="10"
height="10" alt=""/>
</div>

The divs .top and .bottom will be hidden from browsers which support border-radius (or a proprietary implementation of it).

The basic CSS is:

div {
margin: 0;
padding: 0;
width: 100px;
background-color: #ff0000;
}

.box {
min-height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.curves {
display: none;
}

This will display a box 100×100 pixels with curved corners in Firefox and Safari, hiding the .top and .bottom divs and implementing border-radius.

To make it display in IE, we add some conditional comments with extra CSS which displays the .top and .bottom divs with four rounded corner images:

<!--[if IE]>
<style type="text/css">
.box { min-height: 80px; }

.curves {
display: block;
height: 10px;
}

.top {
background: #ff0000 url('images/topr.png')
no-repeat right top;
}

.bottom {
background: #ff0000 url('images/botr.png')
no-repeat right top;
}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css">
.box {
height: 80px;
}
<![endif]-->
</style>

The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes; however, a little recoding will fix this second problem.

Users of Opera and other browsers will see a square box; as my client is corporate and has never received a hit from an Opera browser, I was willing to make this sacrifice. If they ever implement -opera-border-radius I could add this in.

Of course there are other solutions for this, but I thought this way was quite simple.

The Internet Explorer team are asking (again) for input on most-wanted improvements for the next version of IE. Most of the work seems as if it will be focused on Javascript and the DOM, but as you can see on this wishlist there are also requests for CSS updates – including support for RGBA, HSL and HSLA from the CSS3 colour module.

It’s all gone a bit quiet round here… sorry about that, but there’s not a lot of movement on CSS3, and I know the authors here are quite busy personally.

Anyway, potentially big news is that the WHATWG are asking for developer feedback on HTML5.

I’m still wading through the document, but of what I’ve read so far, of most interest to CSS fanatics will be a group of new, semantic tags; for example

Of course these aren’t directly related to CSS3, but it should help save a lot of classes, ids and tag soup if implemented – and that’s the key. Even if it turns into a recommendation, how long until HTML5 is supported in IE – if at all. Many questions, many variables; but stay positive, and give your opinion.

Boys and girls, dear readers, read this article I wrote for an SEO contest, and help me create as much buzz about it as possible. If you help me win the SEO scholarship contest I wrote this for, I can build even more great sites for your entertainment :). So read all about how to run your sites like you’d run a pub.

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.

Bert Bos announced on the www-style mailinglist that the CSS3 Paged Media module Working Draft (WD) is now in Last call status, which means that it will probably advance to being a Candidate Recommendation (CR), according to the W3C development process.

This module contains ways to define pages and printing behaviors for them. Read the announcement and the module if you’re interested.

KHTML, the Konqueror rendering engine, has received another upgrade – and with it, more implementation of the still-officially unannounced CSS3!

According to the release notes, KHTML 3.5.5 now has support for the HSV/HSVA color values. I must confess to being a little baffled by this; the CSS3 color module names HSL/HSLA values (of which HSL is supported), but not HSV/HSVA. Perhaps someone more au fait with colours could help me out on this one.

Also now supported, apparently, is the outline-offset property – which does exactly what it says; offsets the outline around a page element.

Please bear in mind I haven’t tested these, yet.

You can now finally see why Niels Leenheer won the Summer contest. The javascript based CSS selectors test he created is now up and running, and it’s über cool. He discovered quite a few bugs in various browsers while in the process of creating this test, so it worked in all ways. Go check it out!

And don’t forget out the blogpost Niels made about the CSS selector bugs he discovered.

The latest version of the Konqueror browser, 3.5.4, supports more CSS3 declarations.

background-origin, background-clip and background-size are all supported with the proprietary -khtml- prefix. We’ll update our pages soon so you can test them for yourselves.

See the full list of changes for the latest release here.

I’ve said it before, but it’s really a shame that probably less than 0.1% of internet users choose Konqueror.

Update: I’ve just seen that Konqueror has also implemented the :checked selector, making it the first browser to support every CSS3 selector. In the last month, 0.48% of this site’s visitors used Konqueror – and I suspect quite a few times it was me, testing.

Eric Meyer, in one of his latest posts in the W3C change series, proposes quite a radical change for the W3C: full independence.
The article is well worth a read, coming from one of the people with the most insight in to W3C operations, and I agree with him: it’s a very good idea. Let’s hope more people think of it that way, and let it happen!