HTML5 and CSS3 books

Reviewed by:
name and address

What Is HTML5, and Should You Use It?

Now that everyone has finished converting all their pages to xhtml 1.1, the W3C suddenly had a terrible realization: xhtml was all a horrible, ghastly mistake. In one blinding flash they realized that plain old HTML like we used back in the 1990s was better, so they dumped xhtml and redefined html5 as the new standard. To sell the package, they've thrown in everything that anyone might want. The books reviewed below help website designers understand what has changed.

But is there any compelling reason to change to html5? Considering that most browsers don't yet incorporate all the features, the answer for most people will be no. But anything that does away with those abominations called Javascript and Flash is clearly a good thing. CSS3 will do everything that Javascript used to do, and it also makes it easy to create gradients, rounded corners, and drop shadows—which makes it a big deal among web designers. The question “Why would anybody want that?” even seems to have been asked on a few occasions, and some features, like acronym, have been dropped. (Actually, they only changed the name to abbr.)

To see why you might not want to switch to HTML5 yet, try viewing this page (which is written in valid html5) with Firefox 3.6.6. You would need to add a statement like "Watch out for falling boxes" to each page. (Update: found a way around that.) IE8 doesn't show any boxes at all, and just renders the page as text on a white background (with a chopped-off title). This is a big problem: these browsers will be in use until the hard drives they're installed on have all crashed, which could take months or even years.

There is an old saying that every application continues to evolve until it can deliver mail. Browsers will eventually become translators, dictionaries, and videophones. Someday Firefox, or its descendant, will probably be implanted in your brain. Or given how browser size is increasing, maybe you will someday be implemented as a feature in Firefox's brain.

Sooner than that, you will be able to add a movie to your web page as easily as adding an image, using code like

<video src="test.mp4" controls></video>

What you get at the moment, if your movie is in mp4 format, is this:

Not supported

That's the problem with HTML5: most of it does not yet work. Movies and sound clips don't play on most browsers. The canvas API still requires Javascript, which is going away. Animation, 3D transformations, and drag and drop still don't work. At the moment, HTML5 is still a mess with APIs that are more in the spirit of object-oriented languages than HTML. That will change, and HTML5 is already as good as xhtml 1.1. The main limitation is browsers: Linux Firefox doesn't handle antialiased fonts correctly. Opera doesn't do gradients yet. IE runs in Windows.

One of the few things that does work is content-edible tags. If your browser supports it, you should be able to click on the italicized text in the previous sentence yourself and change it to “continent-inedible,” “content-editable,” or whatever you prefer. This will be welcome news for those of us who are driven up the wall whenever someone puts apostrophes inside any word that ends with an 's'. (Even worse is when they put an apostrophe in the word 'want'.)

A critical step in learning the correct syntax is to get an html5 validator. For Linux I recommend tidy-html5-master, which is a fork of html-tidy.

This topic changes rapidly. Avoid books that are over a year old.

Unmet needs in css:   Progress bar Progress bar How much progress?

CSS3 now has arithmetic, so you can now do things like
height: calc(3 * 333px);
(although none of the books below mention it). But this is still not very useful, because there are still no variables. So a line like
height: calc(3 * mybox.height);
(where mybox is an identifier) doesn't work. That's one reason the vast majority of pages (including this one) use fixed sizes for everything. We need user-defined functions, variables, and read access to HTML page parameters. A few functions, such as rgb() and matrix(), have already been added. As Javascript gets more integrated into CSS, user demand will undoubtedly force w3c to put more in eventually.

With CSS3, you can finally create upside-down text with a color gradient and specify the degree of transparency of your text. Unfortunately, it only works in some versions of Firefox. IE8 doesn't show it (or any of the html5 features on this page).

HTML5 box with upside-down text
Here is what you can create in a HTML5-compliant browser.
Test of movie - this doesn't work yet either. Opera shows even less.

So ... on to the book reviews.


HTML5 for Masterminds, 2e
by J.D. Gauchat

This book has examples of HTML5 and CSS that will allow beginners to create rudimentary web pages. But beginners will need a lot more information than what's here in order to use HTML and CSS effectively. The book is really intended to bring experienced HTML coders (who may or may not be “masterminds”) up to speed on the major changes in HTML5. There are no color figures and only a few illustrations, but they're not really needed. Gauchat tells readers to type up the examples and observe the results for themselves. This is sensible advice, since at the moment no browser handles HTML5 completely, so different readers will get different results. But the list of HTML5 features in this book is incomplete.

You might even argue that this book is premature, since the HTML standard isn't even finished yet. But rest assured, as soon as it is, web designers will consider it obsolete, and HTML6, or whatever it's called, will be the thing to learn.

In fact, most of this book is not about HTML, but Javascript programming, including the Geolocation API, Ajax Level 2, WebSockets, the Web Audio API, Canvas API, and so forth. These APIs all require .js libraries in order to work. Given that Javascript is obsolete, it is not clear whether they will survive in their current form. So if you learn it here, you might have to learn it all over again a different way. But then, reinventing the wheel over and over and over is what computer programming is all about.

book review score +3

Sergey's HTML5 & CSS3 Quick Reference, 3e
by Sergey Mavrody

No-nonsense list of features and syntax rules in HTML5 and CSS3. Uses color. Consists almost entirely of tables and bullet points. Good features include a clear listing of the options for each keyword, and examples of each feature to illustrate the syntax. Sergey uses an icon system that lets you quickly identify which version of which browser supports which feature. He also covers the APIs. This book is crippled by a nearly useless index, but if you're good at finding stuff without one, and you're already conversant with HTML and CSS, this is all you really need.

book review score+1

Typographic web design
by Laura Franz

There is an ongoing debate as to whether serif or sans-serif fonts are easier to read. On the Internet, sans-serif (using light gray text) seems to be the current fad, because people think it looks more modern. With literally millions of websites out there, you need to make reading yours as easy as possible. But you also have to pay some attention to what people like. These two goals often conflict.

Franz, an academic art professor, wants you to think like a typographer, using columns and fonts to create rhythm and tension to make a page that invites the reader in. She recommends using the new @font-face property in CSS3, which forces compliant browsers to use a font you specify locally in your .ttf file. It would be essential for using some fonts, like the supposedly web-safe Georgia typeface she recommends, which doesn't render correctly in Chrome. Sure, you can fix it on your own computer, but your readers won't—they'll only know your text is too small to read, and just go somewhere else. Using custom fonts, however, is risky. You have to make sure you have a license for any fonts on your server. Otherwise, if someone actually visits your page, you could get into trouble. (So, no worries here.)

No philosophy of aesthetics here. Just some simple advice about typesetting and formatting web pages for readability and visual appeal, using basic xhtml and css. This is a good, practical book on web design. But Franz made it too simple and, in so doing, missed a teaching opportunity.

See also:

Book reviews

CSS Books

CSS: The Definitive Guide, 3e by Eric A. Meyer

HTML, XHTML & CSS, 6th ed. by E. Castro

Transcending CSS: The Fine Art of Web Design by Andy Clarke

CSS Mastery: Advanced Web Standards Solutions by Andy Budd

The Zen of CSS Design: Visual Enlightenment for the Web

The Design of Sites: Patterns for Creating Winning Web Sites, 2e

name and address
feb 23, 2013