Monday, 26th October, 2009

HTML5, CSS3 and Me

HTML5 & CSS3Way back in September I was fortunate enough to be one of a group of front-end developers, designers, coders, project managers and general web pioneers attending the HTML5 and CSS3 Wizardry workshop run by local design consultancy Clearleft as part of the dConstruct 2009 conference.

The day was split into two halves with my good friend Jeremy Keith running us through the new elements being discussed for HTML5 and the ideas behind them in the morning session, and his Clearleft cohorts Richard Rutter and Natalie Downe giving us a heads up on some of the amazing stuff being added to CSS3 in the afternoon.

One of the first things each of them suggested to do was to a) get involved and then b) get playing around with this stuff, as, although not all of it’s currently supported or even decided upon yet, there is no reason not to start introducing elements into sites to enrich the experience of those fortunate people to be running the latest versions of browsers and to pave the way for HTML5’s eventual introduction.

To that end, I’ve found a bit of time to start doing this very thing here on my own site! With the view of adding much more in the future.

More details of what’s been added after the fold. 

Okay so first and foremost the site needed to be kicked out of it’s original XHTML1 Strict mode and into HTML5 mode, this is simply done by changing this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to this:
<!DOCTYPE html>

Simple eh? I know at first glance it seems a little bit arrogant to remove any mention of a dtd, but I like it, it’s lean and clean, it’s basically saying this document is html. period.

Now as I still want this site to be visable to any browser (it is my portfolio after all) I can’t go the whole hog and start adding all the lovely new elements into the page because, surprise surprise, Internet Explorer doesn’t yet support them, and of course there is still that backward compatibility to think about.
Fortunately one of the things Mr Keith suggested was to mark up your code using divs with classes or ids to match the names of these new elements, with a view to switching them out to their proper tags at a later date.

So as you can see by looking at the source of this page, I now have div’s named “header”, “footer”, “nav” and “article”. Also making a welcome return from being depreciated in XHTML1 is the “target” attribute on “a” tags, whilst i appreciated the important of letting people decide to open links in new windows for themselves, in some case you really don’t want them leaving your site so the option to do this once again is most welcome.

So that’s the HTML5 stuff sorted and in. Let’s move onto CSS3.

Well as it happens i’d already been using things like Attribute Selectors and Structural Pseudo-classes to target certain types of input fields and first and last instances of elements without really thinking about them. But the first purely CSS3 styles i’ve now added are the drop shadows on the images that accompany the articles on in this journal (if you have the right browser that is), which are created using the “box-shadow” attribute.

I’ll be adding a lot more CSS3 to this site over the next few months so keep your eyes peeled!

Comments: (0) Categories: Coding

 

Comments

There are no comments for this article.


 

Add a Comment

Remember my details
Add Smileys
Notify me of follow-up comments

 next: London to Brighton Veteran Car Run > < previous: Sketch-a-thon  << back to home >>