Blog > HTML5 and CSS3

October 21, 2007
Jay Goldman

We currently write websites to the XHTML 1.0 Strict specs, which was published by the W3C in 2002 and extends the HTML 4.0 specs, which were published in 1997-1999. Although it may not feel like it when you pay attention to sites like TechCrunch, the pace of change in the technologies which underly the web is actually remarkably slow. It would be fair to say, from a purely HTML-focused perspective, that there have been no major innovations in nearly ten years (if you don't count XHTML as anything more than a natural evolution of HTML). Even the Cascading Style Sheets 2.0 spec (CSS2) that we use to format and display websites is nearly ten years old, having been published in May 1998.



So, almost needless to say, we're getting really excited about the emerging drafts of the HTML5 and CSS3 specs. This may seem somewhat abstract to some of you, particularly if you don't do what we do, but it means your websites are 'about' to gain some great new functionality which will solve a number of the problems we bump into on a regular basis. Some things we're really looking forward to:



  • CSS3 Fonts: The technology to embed fonts in a web page was first specified a long time ago (so long ago that there's a webmonkey tutorial!), but support from the browser makers never materialized and it died in the water (for a complete history, I refer you to our esteemed colleague, Joe Clark: Simon Daniels: ˜Web font embedding rides again!€™). This is a very complicated issue given that the web exists in virtually every language on the planet (does your favourite font include a full set of Kanji characters?), and that fonts have licenses (just like other software) and many of those licenses prohibit things like embedding them in web pages. CSS3 brings it back to life with the @font-face at-rule, which means that we will finally be able to use something other than Verdana, Trebuchet, Georgia, and Arial.
  • CSS3 Multiple Columns: Clients who are used to working with print layouts are often surprised to discover that there's no way to automatically layout HTML content in multiple columns. Sure, we can count out the total number of elements in a list, divide by two, then output the first half, end the column manually, and finally output the second half, but that's about as tedious as it sounds. The Multi-Column Module in CSS3 makes it about as simple as specifying:
    column-count: 2
    and Bob's your multi-column uncle.
  • HTML5 Client Side Storage: Of less import from a visual perspective, Client Side Storage gives web applications the ability to store data locally in the browser, which effectively makes the app accessible offline (e.g.: if you had a website which allowed people to store recipes and share them, client side storage would make those recipes available even when Tom's laptop wasn't connected to the Internet and he was in his kitchen making Duck à L'Orange). This is fundamentally similar to Google Gears, but would mean that your site's visitors wouldn't need to install anything in their browser to make use of the technology. Congrats to Dave Hyatt and the WebKit team, who have announced preliminary support in the latest nightly builds.

Keep in mind that we're a good five years away from actually being able to make use of these fun new features, since they'll have to get built into the next release of the major browsers, and then those will take some time to eventually replace the current versions in popular enough numbers to make the new stuff widely available. As always, we'll do our best to keep covering the new specifications for your ongoing edification, as well as to start producing some fun samples for you to play with once some browsers with HTML5 and CSS3 support become a little more stable and easy to download.

Posted by Jay Goldman on Sunday, October 21, 2007 at 11:18 AM in Tech Geekery, HTML/CSS with tags , , , , , , , , , , , Permalink1 comment

Comments

On newer internal pages I am using HTML5 where it overlaps HTML 4.01 strict and CSS3 (the color module) and finding that the pages render without issues in FireFox 2.0.0.9. I occasionally write XHTML 1.0, but only when I need MathML and/or SVG in a page. The need is rare, so my usage is rare. Although I try to separate semantics from presentation as much as I reasonably can, such as my recent efforts to rid my pages of the inline style attribute, ultimately everything is presentational including p tags. People read web pages, not machines. So I favor the pave the cow paths approach and while I personally have learned to dislike b and i elements, I think their inclusion in HTML5 simply makes sense. I teach ethnobotany, and latin binomials are in italic, not in em emphasis. Using the i is semantic to the botanist, it has meaning.

Dana
Posted by Dana Lee Ling on Wednesday November 14, 2007 at 9:35 PM

Post a New Comment

Please note that comments are moderated to prevent abuse of the comment system and will only appear after they have been approved by the author of this post. Use the "View Source" mode to edit HTML directly if you're into that kind of thing. We might not approve posts that are offensive or really off-topic, and we will definitely delete spam (and place nasty, nasty curses on the spammers).

Name
Email Address
Website
Comment