CSS3

Recently I began planning a brief tutorial on using the CSS3 attribute selectors (which are now implemented in all the latest major browsers) to add decoration to hyperlinks. Looks like I don’t need to now, however, as this morning I found this article: Showing Hyperlink Cues with CSS, which explains the method very well.

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.

Update: Please see the note at the end of this article.

A potentially useful feature of CSS3 is the @font-face rule, which allows the developer to specify a font for the page that may not already be on the client’s system. Until now, most web sites have been developed with a small list of ‘web safe’ fonts – tahoma, verdana, etc, which are native to most operating systems.

@font-face will allow the browser to download a font for rendering the page; a link is given to either a remote site or a folder on the local site which the browser will access, download, install and render, so the site can be viewed in the way the designer desired.

Here’s an interesting article on how to use the CSS3 :checked pseudo-class to style check boxes and radio buttons.