After the excellent dConstruct HTML5 and CSS3 workshop on Wednesday run by Jeremy, Natalie and Richard, I wanted to try out some of the things I learnt from the day.
The workshop itself was a fascinating delve into the current state of HTML5 and the various CSS 3 modules, including what you can do today with these emerging technologies. The morning, led by Jeremy, was a vibrant exploration of the state of HTML5 (no space), its complex politics and the encouraging news that everyone appears to now be working together to get the latest version of HTML agreed.
It’s my first direct experience of HTML5 and I’m glad to say I like what I see. HTML5 has a bunch of interesting semantic tags like <header>, <nav> and <time> and clever form input types such as calendar, email and website. However, a few of the semantic tags confusingly seem to do essentially the same thing like article/section and aside/figure. The solution, presumably, is to trim the unnecessary ones. Deciding on which should go is the tricky part.
Although Jeremy explained a few ways you can use HTML5 today (use its simple doctype, the tags with a JS fallback for IE, or simply use the tag names as class names) there’s not a lot you can use on production sites today. To be honest, it’s much the same for CSS 3 though that has a little more support in modern browsers. However, the development process at WHAT WG seems really open, anyone can join the mailing list and talk in the IRC channels. So if there’s something you don’t like, just speak up. This is the biggest thing I took away from the HTML5 workshop: if you’re interested in the development of HTML, then get involved.
CSS 3 was really interesting, with a range of mad new possibilities eagerly explored by Natalie and Richard. Many of which you can use here and now (if you’re not worried about IE). Some of the new selectors (nth-child and other selectors verging on regular expression matching) and features like curved borders, multiple background images and layout modules are very interesting and offer exciting possibilities for the future of web design. The Template Layout module, especially, was really interesting. Totally theoretical at present, but a way to define blocks of horizontal and vertical columns that you assign content to and allegedly will just work in the browsers of tomorrow.
Most of the examples, although often theoretical or little-supported at present, seem to make our job building websites easier and more efficient. Things that take many lines of code today are either one tag or smarter, more elegant CSS rules. I welcome the day most modern browsers support this be it 2, 3 or many more years away.
I’ve been wanting to reboot my personal blog for some time, though always seem too busy with client and project work. Before dconstruct I registered the new domain (simonrjones.net) and yesterday afternoon in the accommodating Cafe Delice I managed to cobble a design together to update WordPress from its default settings. And all without a single image.
I have to admit I only experimented a little with CSS3 and didn’t delve into HTML5. The main reason is I wanted to use our new CSS Starter Kit which the team have developed in-house to help us with new projects. And that, of course, is good old practical XHTML 1.0.
As Natalie wisely said in the workshop, when using CSS3 “only add what you can afford to lose”, so I basically constrained myself to the following CSS 3 magic dust:
- border-radius
- a wonderful new tool, used for the curved search box, nav rollovers, and the secondary content box
- nth-child selector
- used to grab the second para in the footer and indent it
- box-shadow
- the box counterpart to text-shadow, used to give an inset shadow to the search box and a drop-shadow to the search button (changing to an inset on active, i.e. mouse click)
Needless to say a lot of this doesn’t work on all browsers. Support is a bit sketchy with Safari and Firefox leading the way. For my experiments above a quick summary of which browsers support this progressive enrichment appears below.
- border-radius
- Supported: Safari 4, Firefox 3.5
- Not supported: Opera 10, IE8
- nth-child selector
- Supported: Safari 4, Firefox 3.5, Opera 10
- Not supported: IE8
- box-shadow
- Supported: Firefox 3.5
- Partially supported: Safari 4 (can’t handle inset shadows)
- Not supported: Opera 10, IE8
If you want to get involved head over to the WHAT WG site, read the spec or join the mailing list, check out HTML5 Doctor and HTML5 Gallery. For CSS try CSS3.info, W3C and CSS compatibility guide.