HTML5 and CSS3 - It's Time To Start Using Them

When it came time to build out the front end of this blog I decided, with little hesitation, to look forward rather than look back with the front end technologies. That meant scrapping the use of xhtml and using progressive enhancement to sprinkle in CSS3 goodness. Can you tell where it’s being used?

Use html5 now!

I mean it. html5 is reverse compatible and forward thinking at the same time. It's so simple to make the switch. At the top of your web pages simply change:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

To:

<!DOCTYPE html>
<html>

HTML5 is reverse compatible to xhtml except for some tags we shouldn’t be using and it is forward compatible for all kinds of new technologies. For most things your pages don’t need to look and different than the xhtml pages we’ve been using for years. But, when it comes time to use tags like the audio and video tags you can drop them right in.

Rounded Corners

If you're using Fireforx, Safari, or Chrome you'll see rounded corners on this site. They are courtesy of the CSS3 border-radius parameter. This is an example of progressive enhancement. It doesn't degrade the functionality of the site but, the site does look better if you can use one of those browsers.

While we still need to account for Internet Explorer 6 when we build out sites it doesn’t mean we have to be limited to what it or Internet Explorer in general can do. Using some of these newer technologies can sprinkle some goodness in while not hurting the experience for those stuck in the past.