HTML 5 and CSS 3
Over the past few weeks I’ve been reading more about HTML 5 and CSS 3 and how the respective specifications are progressing, and beginning to experiment with a lot of the new elements and selectors available. Although a lot of the new elements and ways to markup a site are not production ready, I’ve been working on a university project which allows a lot more freedom to experiment and as such I decided to mark up the entire site with HTML 5 and to also use a number of CSS 3 selectors where appropriate. Having read a lot about these new technologies, this represented the ideal opportunity to begin using the things which I had read about.
HTML 5:
Much has been written about HTML 5 and is now at a point where it is being used more and more in production sites, with browser support improving all the time (except IE of course!). I first heard of the new HTML 5 spec about a year ago when the first “2022 rumours” came out and I was a bit confused about the timeline and the development progress. However, over the past year it has come a lot more popular and the record was straight on the 2022 date. At FOWD Glasgow I was lucky enough to hear Bruce Lawson speak about HTML 5 and how it was being developed to be used now, and taking the things that we all do on a regular basis and streamlining these tasks. HTML 5 is designed to be used now, and as browser support increases it is becoming more widespread.
One of the first noticeable things about HTML5 is the Doctype, and how simple it is in comparison to the HTML 4.01 and XHTML 1 doctypes, which simplifies things a lot and this sets the tone for the rest of the page as I feel in general that markup is a lot cleaner by making use of the new elements such as section, article, aside etc reducing the number of divs used within a page. Although the canvas element has got a lot of attention for some of the exciting things now native to the browser, but I found the video element a real treat to use and certainly cuts down on the amount of markup needed to embed a video into the page, which is not as big a problem as it once was. The only code required with the new video tag is:
<video width=”280″ height=”160″ poster=”img/roll.jpg” controls autoplay>
<source src=”video/roll.mp4″ type=”video/mp4″ /> <!– MPEG4 for Safari –>
<source src=”video/roll.ogg” type=”video/ogg” /> <!– Ogg Theora for Firefox –>
<img src=”img/roll.jpg” alt=”Our Famous Ham & Cheese” title=”Our Famous Ham & Cheese” />
</video>
The reason there’s two sources is that Safari and the Webkit browsers support the mp4 codec whereas Firefox and the Gecko based browsers only support the ogg codec. There is a debate ongoing at the moment at getting an industry wide codec supported to make life easier but I think there’s a way to go yet on that issue. After declaring the sources, it’s important to add an image or other fallback content for browsers which currently don’t recognise the <video> tag – I’m looking at you again IE!
That’s just one of the new tags available and there are a wide range of HTML 5 resources available to keep up to date with the development specification and techniques including:
- HTML 5 Doctor
- Bruce Lawson
- HTML 5 Gallery
- W3C Differences document
- WHATWG Current Working Draft
- A List Apart Article
I’ll post up the results of my HTML 5 experiement once it’s completed, which is a university project based around a sandwich shop and Coldfusion.
CSS 3:
As well as using HTML 5 for the firs time in earnest, I also used the opportunity to make use of some CSS 3 techniques for the first time and there is some exciting developments in this area which cut down the amount of CSS and styling needed. With the new specification techniques such as rounded corners, gradients, drop shadows and font embedding become much easier. The @font-face attribute has been around for a while but has become a lot more popular recently, as has the issue of fonts on the web with the emergence of services like Typekit and Fontdeck.
Rounded corners, drop shadows and gradients have been a popular “Web 2.0″ look for a while now but with CSS 3 these techniques are made much easier. In order to achieve fully rounded corners, it hasbeen known for up to 9 different images being used to achieve, however with the border-radius attribute it’s possible to achieve this with pure css. Although not an official attribute at the moment, it almost certainly will be and can be achieved at the moment with browser specific attributes such as -moz-border-radius and -webkit-border-radius. As ever, IE lags behind with no support for the border-radius element at all.
CSS backgrounds are set to change dramtically with support for multiple backgrounds and the use of rgba values offering new ways to set backgrounds via CSS. Currently, only Safari supports multiple backgrounds and if applied, all other browsers won’t see any background image so it’s not production ready at the moment but I don’t think it will be long before it becomes adopted in other browsers. The other change to the background element is the ability to set colours using rgba values to define the colour and opacity of a background. Drew McLellan kicked off this year’s 24Ways with an excellent article on the use of rgba values, and I’ve used rgba to create some semi transparent background in my university project, which negated the need to use transparent pngs andreduced page load for the user.
LIke HTML 5, we’re just at the beginning of being able to use CSS 3 and whilst there’s not a huge amount of support available it won’t be too long before there is and will make coding beautiful sites that bit easier.
Once my university project is finished, I’ll post up a link and a description of the techniques used.
