CSS3

The Webkit project have announced support for a new range of CSS declarations, to be used for putting strokes around text. This strikes me as a little strange for two reasons:

Thanks to my new “online friend”, (or how do you call such a thing?) Faruk Ateş, I got the chance to ask the famous webdesigner Andy Clarke some questions via email. He responded quite rapidly, and there’s a lot of interesting stuff among his answers. So check it out:

It’s taken me years to get to the level of CSS developer I am now, and I’m by no means a master. (I am able to make just about any Photoshop design into a solid webdesign though…) Because it’s taken me so long, I was a bit skeptical about the subtitle of the book I’m now reviewing: Beginning CSS Web Development: From Novice to Professional.

This site has always been about what we wanted to tell you about CSS3. We have some nice articles coming up, among which at least one interview with a famous webdesigner and I would like to know (so please drop your questions in the comments): what do you want to know about CSS3?

In my previous post I don’t think I put enough emphasis on the fact that the Advanced Layout method may never happen; it could be dropped by the W3C, never implemented by the browser makers, or replaced by a better method.

However, let’s work on the assumption that it does get implemented and take a closer look.

The difficulty many developers face when they start moving to table-less sites is getting the layout to work. Floats and positioning are easy enough for basic layouts, but start to become incredibly complex when moving to a more advanced level. When the push to move to pure CSS layouts became intense, the problem was – and is – that tables are still a lot more convenient in many cases, and there is sometimes no decent alternative without contorting yourself; you can’t even use the display: table family, as there’s no support in IE.

An interesting potential solution is in the CSS3 Advanced Layout module.

I went through the logs of some of the sites I own or manage today, to see what kind of uptake there’s been for IE7. From ten sites, some business and some personal, the percentage of users varies between 1% and 12% using IE7.

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="http://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="http://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.