CSS3

I mentioned earlier this year a tutorial which shows how to use CSS 3 selectors to enhance hyperlinks. Of course, you don’t need to limit yourself to just the href attribute; with CSS 3 selectors, you can use the same technique for any tag which has an attribute. I’m going to give a couple of quick examples, which will output the following result (of course, you’ll need a browser better than IE6 to see them!):

• Home
• Download a PDF
• En Français

All icons are from the fantastic collection at famfamfam.com.

The first list item uses the general attribute selector to look for any tags with an accesskey attribute and display an icon to alert users to its presence:

#test_selectors a[accesskey] {
background: url('icon_key.gif') no-repeat 0 50%;
text-indent: 20px;
}

The second item looks for links with a type attribute value of ‘application/pdf’ (you do mark up links to documents using the type attribute, right?) using the exact attribute selector, then inserts an icon advising you of the destination document:

#test_selectors a[type='application/pdf'] {
background: url('file_acrobat.gif') no-repeat 0 50%;
text-indent: 20px;
}

Finally, if you have a multi-language site you can link to another version using the lang attribute with the value of that language, then use the language attribute selector to apply that country flag:

#test_selectors a[lang|='fr'] {
background: url('fr.gif') no-repeat 0 50%;
text-indent: 20px;
}

As always there is much more you can do with the selectors; if you use or develop this idea on your site, post links here for us to see.

IE7 is gaining market share and we can start to use more CSS3 selectors in our day to day code. Because of this, it’s worth a quick reminder that the more semantic we make our (X)HTML, the easier to implement the selectors will be.

For example, imagine the opportunities with the XFN microformat; by combining this with the partial attribute selector, you can add a little flourish to your pages.

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="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.

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.