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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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.
Sounds like you've been listening to Boagworld. If not, go check out the HTML5 interview with Jeremy Keith. There's some great background info on what happened with the XHTML spec and where things are headed with HTML5.
I've already decided that I'll use HTML5 for the next Drupal theme I create, even if I don't incorporate any of the new features. Glad to see you using it here, especially since this blog is about staying up with current best practices.
Micah
This is interesting and I agree that progressive enhancement is a good place to start...however encouraging people to "start using HTML 5" is a little misleading. This site isn't really written to HTML5 specs...it just uses a simplified HTML5
<!DOCTYPE >element, which is really the only part of HTML5 we can use right now. All the other stuff, such as<header> <nav> <footer>...etc layout tags can't be used yet on any browser but Safari.I do agree, however, that we can start slowly working in some elements, and the doctype is a great place to start (although I think we need to recognize that it's one small piece to a very big puzzle)...but we're still a long way off until we can actually start using any other HTML5 elements in production. (yes, its backwards compatible, but when I hear "use HTML5", I hear "use new HTML5 elements" not just "wrap old elements in a new doctype)
CSS3 on the other hand can be used more easily since CSS is simpler progressive enhancement. CSS3 mostly contains new elements, doesn't really replace old ones the way HTML5 replaces old elements with new ones...so we can pop in the new CSS properties and they'll work in browsers that understand while all others ignore them.
Overall, I think it's an exciting time and I agree that we need to push the envelope wherever we can.
It will be a long time before we can use the header, nav, footer, or other layout elements in our web pages. Browsers like the ones most of us use now will have to be things of the past. That includes IE8.
In the short term all we can do is use things that are backwards compatible. But, even changing the doctype is a good place to start. Eventually, we will be able to use the canvas, audio, and video tags. But, even those are some time off and we need ways progressively enhance to use them. I think I'll do a blog post on browser features, detecting them, and using them.
I completely agree that we need to start using CSS3 where we can now. Not only does it enhance things in the few browsers it can be used in, it is a show of support to more places implementing the features.
Actually, Matt, it depends upon how much of your IE audience turns javascripting off. In my case, the fraction is less than the number of Opera users, no idea what yours is. If the fraction is small enough, there's a cute and quick little bit of js you can serve only to IE users (6 lines of code, that's all) that allows you to use (and style) the layout elements in IE the same way you can in good browsers. Especially in the case of a web application that depends on js for other features, as then the HTML5 support comes for free.
Stepping forward from that, Kroc Camen's "Video For Everybody" code will deliver HTML5 video, in a valid HTML5 page, but will still downgrade gracefully all the way back down to IE6 and below.
More than you might think is doable right now. In a way, it's "business as usual" on the web; we code for the lowest browsers first, and add the enhancements for better browsers in such a way that we don't break what we've already done.
Plus ca change, plus ca meme chose.