HTML5 Hacks

Chapter 2. Hacking with Style

I remember designing websites without CSS. It was horrible—lots of tables and images and image maps. Back in the day, most sites took several minutes to load because generally they were so overladen with image hacks in an effort to achieve a decent design. Then CSS came along and it was spectacular! Suddenly the Web had standards, you could separate your functionally into your JavaScript, your markup into your HTML file, and your look and feel into your CSS file.

Just as HTML went through a decade without seeing any true updates, CSS followed nearly the same path, which is why I am so excited that the HTML5 revolution brought CSS3 along with it. This chapter focuses primarily on another spec within the HTML5 family of technologies: Cascading Style Sheets version 3.0, a.k.a. CSS3. HTML5 may bring us a whole new world of functionality, but CSS3 blows the doors open on the user experience!

A Word About Browser Prefixes

One important thing to note within this chapter is the use of browser prefixes for new CSS3 attributes. In brief, a browser prefix is an extension placed at the beginning of a CSS3 class to be used while that feature is in an experimental stage. For additional information on browser prefixes, see [Hack #11].

In my references and code examples, I chose to not utilize browser prefixes, even when the prefix may be required for the example. The reason is simple: browsers are updating at a pace at which a print book cannot keep up. It is very ...