A site for Science Hack Day

I spent the weekend immersing myself in HTML5 and CSS3.

I gave Principia Gastronomica a bit of a fine-tuning under the hood. I decided to ditch all the background images I was using to get rounded corners and drop shadows, and just use border-radius and box-shadow instead. Internet Explorer gets the same content with more pointy corners and without the illusion of depth.

I also launched a brand new site: ScienceHackDay.org. It’s a small little site designed to quickly dispense relevant information on the upcoming geektastic Science Hack Day in London on June 19th and 20th.

The front page is also a blog. I’ll be posting updates about the event there and I’ll also be highlighting science projects and hack ideas. Subscribe to the feed if you want get updates.

I couldn’t be bothered installing or writing blogging software for the site. It seemed like overkill for such a quick’n’nimble project so I’m just blogging in HTML using hAtom. It’s converted to Atom using Luke Arno’s handy service. I was going to use the transcoder on Microformatic.com but I think it uses Tidy which means it won’t work on the new HTML5 elements.

The underlying structure is a combination of microformats, HTML5 structural elements and ARIA roles. The styling is over-the-top CSS3. There’s border-radius, opacity and RGBa a-plenty. Setting colours using opacity and alpha transparency makes it a breeze to customise the colours on each page, so the schedule, location and not-so-FAQ pages all have a slightly different tint.

Internet Explorer doesn’t get any of this colourful or roundy goodness. It does however, get the typography and layout, much like the print stylesheet view. I wouldn’t do that for client work but I’m perfectly happy to do it for a weekend project.

Check out the site and if you decide that Science Hack Day looks like your kind of event, add your name on the wiki.

You can also follow @sciencehackday on Twitter to get bite-sized updates as they happen.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

HTML5 and CSS3 Advent 2011

Here’s a geek advent calendar I missed. There are some great CSS techniques here.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices

This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.