Rule number 1 of the Internet is, of course, that there are no rules – but if there were, it would be that the Internet is always changing and evolving. While some people have only just started to use style sheets and XHTML, others are pushing the envelope with CSS3 and HTML5. I want to have a quick look at what this all means.
There was a time when HTML5 seemed like something in the far future, but now Apple (purveyors of the unbelievable fascist iTunes and lots of really cool gadgets) claims that there’s no point worrying about the fact Adobe’s Flash doesn’t run on their iPhones because it will be sidelined when HTML5 is adopted. GoogleWave, the collaboration and communication software from Google, already uses HTML5.
In addition, many currently available browsers allow the clever new stuff in CSS3 and HTML5 to work already. Opera and Safari provide support. Firefox from Version 3.5 supports HTML5. And Explorer Version 8 does a bit, and the proposed Version 9 will do more.
CSS3 is simply the next generation of style sheets and it offers loads of clever stuff. The most exciting one – certainly for those of us who have developed Web sites using multiple images to achieve the same effect – is rounded corners. You can now have boxes with varying ‘roundnesses’ of corners (except in Explorer where they’re still square). You can specify a radius value and that affects how round the corners are. It also now becomes very easy to use borders.
The downside, at the moment, is that each piece of code needs to be repeated. Look at:
-moz-box-shadow: 3px 3px 3px #6c3;
-webkit-box-shadow: 3px 3px 3px #6c3;
-box-shadow: 3px 3px 3px #6c3;
The top line adds the shadow for Mozilla browsers (like Firefox). The second line issues the same commands for WebKit browsers (such as Safari and Chrome). The third line is for those browsers that already support the CSS3 standards (and that’s Firefox 3.1 and above and Safari 3 and above).
In addition to these tags, other, much longer, tags are available containing the word ‘Microsoft’ at the beginning. But this isn’t an anti-Microsoft rant (this week!), the excellent word-wrap tag is a Microsoft one.
There are lots of other clever CSS3 tricks in development too. You can create drop shadows, do impressively clever things with gradients, and make text become more transparent as you mouseover it. Have a look at http://css3generator.com/ and http://css3please.com/ for some excellent examples.
HTML5, as well as potentially making Flash (and Silverlight come to that) redundant, provides a way to make Web applications more easily available. It is much more than a simple mark-up syntax for documents. HTML5 now contains tags for things like navigation (nav), headers, footers, articles, and sections. Explorer is the only fly-in-the-ointment (as it were), which will come as a surprise to no-one. Explorer needs a bit of JavaScript in order for CSS to style the page. Something like document.createElement("nav"); is required for each of the new tags.
And the doctype to use at the top of your document is <!DOCTYPE html>. And handily – for those people who never quite got the hang of closing tags – you can just close with a ‘>’, you don’t need ‘ />’ as with XHTML.
HTML5 can offer developments in Web forms. There are video and audio APIs. There’s a drag-and-drop API with a draggable attribute. ‘History.pushState’ can be used with AJAX apps to give better back–button support. There’s also a 2D drawing API for scripting graphics using the new canvas element. In fact there’s loads of new good stuff with more being added all the time. And did I mention the Geolocation API? I should have – it definitely adds the “wow” factor.
Lots of people will be wanting to use the new APIs, and Web pages for people using appropriate browsers will be appearing more and more. Look out for it!
No comments:
Post a Comment