HTML5 and CSS3

HTML5 and CSS3: Develop with Tomorrow’s Standards Today by Brian Hogan
$33 from Pragmatic Bookshelf

The Book of CSS3 by Peter Gasston
$34.99 from no starch press

There’s really no reason why HTML5 and CSS3 have to be grouped together; they’re two completely different things. The first is the latest code for marking up the content of a website, while the second is the latest code for marking up the presentation. There’s no reason you can’t use CSS3 with HTML4, or HTML5 with CSS2. That said, since both are hot right now and are often used together, they’re often treated as if they were the same thing, and I’m going to add to the problem by talking about several books this week. Neither is aimed at the complete beginner: both assume that you already have a working knowledge of HTML and CSS, and simply introduce you to the new features.

One thing that HTML5 and CSS3 have in common is that they continue the process of separating style, presentation, and behavior. HTML5 deprecates a number of elements from previous versions, leaving the programmer to use CSS (for presentational aspects) or JavaScript (for behavior). My first book for today, HTML5 and CSS3 by Brian Hogan, groups topics by what you’re trying to do; for each topic, it uses new elements from HTML5 and CSS3, along with any required JavaScript.

The first topic is improving user interfaces: how can we use the new options to make our websites easy to use? First off, we cover semantic markup: all the new elements (article, section, header, etc) that let us mark off sections off the page with tags that describe what that section actually is, rather than an overabundance of div tags. Afterwards, we go to forms: there are a number of new form options in HTML5 that allow the browser to provide behaviors that were previously handled with JavaScript, such as popping up a calendar in a date field. Having better described our interface, we now spruce up its appearance with some CSS, using pseudoclasses to target particular parts of the page (for example, every third paragraph) without requiring extra markup in the HTML. We can also use CSS to dynamically add content as needed.

Next up is sights and sounds: using the Canvas element, which lets us build graphics using JavaScript, and embedding audio and video onto the page; on the CSS side, we add eye candy such as rounded edges; shadows, gradients, and transforms. The Canvas chapter was the least satisfactory section of the book to me, as parts seemed awkward or slightly unclear, but this was the only section of the book I wasn’t entirely happy with.

The last section talks about things that aren’t technically part of HTML5, but were developed along with it; some even were previously part of the standard. This includes keeping data on the client, geolocation, etc. There are also several appendixes, including a quick reference to the new features, a JQuery primer, and quick directions for encoding audio and video.

Overall, I found this book to be extremely readable; it kept me occupied for about three hours on a plane this afternoon! I also found several specific pieces of information that will be useful to me immediately and that I haven’t seen elsewhere, including a recommendation for a program to see how pages will look in all versions of Internet Explorer.

The Book of CSS3, however, I found to be somewhat less readable. That’s not to say that this is a bad book – it isn’t. I just found it a bit dry; whereas the first book was organized by application and was an easy read, I see this one as more of a reference book. From a CSS standpoint, it covers much of the same material, though in more detail since it does not cover HTML5. Chapters are arranged based on how widespread adoption of that particular element is, so you start out by seeing things that will work in any modern browser and finish with things that nobody really does yet. This strikes me as a great way to arrange things, if you just want to try out new stuff; however, it does get annoying when even stuff close to the front of the book is missing from multiple browsers!

After an introduction to CSS3, the book starts off with a bit about media queries, which allow you to tailor your page to the device the user is viewing; if a visitor is using a small monitor, for example, you can switch to a one-column format and perhaps lose the sidebar. Next we have the new selectors, pseudoclasses, and pseudoelements, which help you select pretty much anything you want from the page using only the CSS, rather than adding extra classes to the HTML.

I’m not big on fonts myself – Times New Roman is good enough for me, thank you very much – but my wife tells me that choosing a good font is very important, and CSS’s font-face allows designers to finally leave the world of web-safe fonts and use any font they have permission to distribute. This leads into other text effects: applying shadows, wrapping text, splitting text into columns, etc. With CSS3, the “printed” word on a website can now look as professional as the same work in a magazine!

After a few chapters on background images and borders, we start getting into more advanced stuff, where availability tends to be spotty. Gradients and Transforms are fun, but you may need to brush up on your math skills! Meanwhile, things like 3D Transformations tend to be available in only one or two browsers (generally Safari and Opera are the furthest along in supporting the CSS3 and HTML5 standards) and aren’t really ready for prime time. One of the appendices is simply a list of which browsers support which features; while any such list is naturally going to be out of date as soon as it’s published, the book website has an updated list.

Between them, HTML5 and CSS3 give a lot of additional power to the web designer to make sites that are better looking and easier to use. If you want to make sure your sites are top notch, I recommend giving these books a read.

Disclosure: IĀ receivedĀ a free review copy of these books.

Share Button
Google+

Tags: , ,

This entry was posted by William on Tuesday, July 5th, 2011 at 11:16 pm and is filed under Technical . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply