Book Review / Overview: “HTML5 and CSS3” by Brian P. Hogan

Review:

image

I’ve just finished reading “HTML5 and CSS3” by Brian P. Hogan (http://www.bphogan.com/) and The Pragmatic Bookshelf. I’m not new to HTML and I’ve even read another book on HTML5, but I really learned a lot from this book, and enjoyed the author’s writing style and examples, enough to give this 4.5 of 5 stars. It’s a great introduction to the not-yet-finalized HTML5 spec, and has a very nice section on the new CSS3 features. With all HTML5 references I’ve seen so far, there is a fine line between what’s in the HTML5 spec, what’s in CSS3, and what are extras. I think this author did a good job in not blurring the lines, and I’ll likely use this book as a reference for that in the future.

I think one of the strong points of this book is the examples. I tried almost all of them, which was easy, because all of the source code was online. Another strong point is the fallback strategies presented, because practically speaking, we’ll always need fallback strategies for browsers that don’t support the latest spec. The only reason I didn’t give this book a full 5 stars is that I would have liked to see a little more about offline web applications, and I wanted some more depth in some of the examples, but that’s just me – I learn better by doing. I certainly feel more empowered to use HTML5 and CSS3 features now and recommend this book.

And here’s the overview, chapter by chapter:

Chapters 1 & 2 are just the acknowledgements and preface to the book, so not much to cover here.

Chapter 3 is an overview of HTML5 and CSS3. I like the way this chapter presents the changes to these standards by describing not only what the changes are, but why we should want to use them. For instance, there is more descriptive markup, less reliance on plug-ins for media, improved accessibility, and visual effects etc. It even contains a nice section on deprecated tags and attributes which I hadn’t seen elsewhere. For instance, I’m surprised to see that the target attribute of the anchor tag has been deprecated, but I’m very glad to know it.

Chapter 4 covers the new structural tags and attributes. The tags are: header, footer, nav, section, article, aside, meter, and progress. Custom attributes using the data- pattern can be read via getAttribute() — nice. I took several things out of this chapter: Don’t confuse aside with sidebar. “The aside is designed to show content related to an article. It’s a good place to show related links, a glossary, or a pullout quote.” There’s a nice technique for using JavaScript conditional comments to define the new element types in IE versions lower than 9:

<!–[if lt IE 9]>
<script type=”text/javascript”>
document.createElement(“nav”);  …

There’s  also a nice example on how to use custom data attributes for window popups. In chapter 4, I also learned that I’ve been suffering from “divitis” for years now. You need to read this chapter to see what I’m talking about.

Chapter 5 covers the new form fields and attributes. The new form field types are specified by the input tag’s type attribute: ex. <input type=”text”> where “text” is the form field type. They include: email, url, tel (telephone number), search, range, number, date, datetime, and color. The new attributes are autofocus – used to focus on a specific form element; placeholder – browser supported placeholder text; and contenteditable – support for in-place editing of content. The author references and uses Modernizr in examples http://www.modernizr.com/. The examples are useful and extra functionality is used with jquery. I like the jquery way of life… to get things to work without jquery and enhance it with jquery, but some of the examples here need jquery to work, so the author proposes the idea of having completely independent html-only forms that post to the same server side script as the ajax actions – interesting idea, but could be a maintenance nightmare if you have a lot of them.

Chapter 6 is the first chapter that focuses on CSS. It covers these:

  • :nth-of-type [pay:nth-of-type(2n+1){color: red;}]  – Finds all an elements of a certain type.
  • :first-child [p:first-child{color:blue;}]  Finds the first child element.
  • :nth-child [p:nth-child(2n+1){color: red;}]  Finds a specific child element counting forward.
  • :last-child [p:last-child{color:blue;}]  Finds the last child element.
  • :nth-last-child [p:nth-last-child(2){color: red;}]  Finds a specific child element counting backward.
  • :first-of-type [p:first-of-type{color:blue;}]  Finds the first element of the given type.
  • :last-of-type [p:last-of-type{color:blue;}] Finds the last element of the given type.
  • Column support [#content{ column-count: 2; column-gap: 20px; column-rule: 1px solid #ddccb5; }] Divides a content area into multiple columns.
  • :after [span.weight:after { content: “lbs”; color: #bbb; }]  Used with content to insert content after the specified element.
  • Media Queries [media=”only all and (max-width: 480)”]  Apply styles based on device settings.

The chapter excels at showing how using some of the new features further separates content from presentation of that content. For instance, there is no need to specify that table rows are odd or even when you want to stripe the rows. It also does a good job presenting JavaScript options for adding these features to IE6-8. It introduced ie-css.js, which has morphed into selectivr.css http://selectivizr.com/ (author: Keith Clark).

Chapter 7 is all about improving accessibility and the parts of the WIA-ARIA spec that have made their way into HTML5. It covers the rolearia-live attribute, and aria-atomic attributes (ex.  <div role=”document” aria-live=”polite” aria-atomic=”true”> ).

  • role  – identifies responsibility of an element to screen readers. There are 2 types of roles, landmark roles and document roles. Landmark roles identify points of interest, such as navigation. Some html tags have default roles that can’t be overridden, such as the nav tag. It’s role is navigation. The landmark roles are: banner,  search, navigation, main, contentinfo, complementary, and application. The document roles are document, article, definition, directory, heading, img, list, listitem, math, note, presentation, row, and rowheader. ‘document’ is important because it means that the page is static content and not a web application.
  • aria-live – identifies a region that updates automatically, possibly by Ajax. Options are polite or assertive. Polite is designed to not interrupt the user’s workflow, so a screen reader will not stop because a section is updated. Assertive is designed to interrupt, as it signals that a high priority content update has occurred. This should be used only when necessary.
  • aria-atomic – identifies whether the entire content of a live region should be read or just the elements that changed. The true value instructs screen readers to read the entire contents of the changed region. A false value means to only read the nodes that have changed.

Chapter 8  covers the canvas tag. There is a nice example of using vector graphics to draw a logo, and I was happily introduced to the RGraph library, available at RGraph.net. I especially liked the example that uses the data-name and data-percent attributes along with RGraph and jquery to make a bar graph – a very useful technique to make your data available to everyone, but to have more interesting looking graphs for people who’s browsers support it.

Chapter 9 is the chapter on embedded audio and video and covers the, what-else?, audio and video tags. There is a nice, succinct overview of the challenges of audio and video in different browsers, on different devices, and then some good fallback tips. Some useful links are included for: Video For Everybody and Flow Player, which has an open source Flash media player. There is also a section on the limitations of HTML5 video. For instance, there is no provision for streaming video. (translation, the entire video needs to be downloaded to see any particular part of it) Also, there is no rights management.

Chapter 10 is entitled “Eye Candy”. It’s really about the extra, cool stuff in CSS3, including: border-radius, RGBa support, box-shadow, rotation (transform), gradients (linear-gradient), and @font-face. The example page is easy to play around with on your own. These are some of the useful references listed in this chapter for font support:

Chapter 11 is about client-side data, and more specifically Web Storage and Web SQL Databases which aren’t really part of HTML5. They have been spun off from it. It covers:

  • localStorage – stores data in key/value pairs, tied to a domain, and persists across browser sessions. 4kb max
  • sessionStorage – stores data in key/value pairs, tied to a domain, and is erased when a browser session ends. 4kb max
  • Web SQL Databases – fully relational databases with support for creating tables, inserts, updates, deletes, and selects, with transactions. It’s tied to a domain and persists across sessions.  Mozilla has vowed not to support Web SQL, so it may not survive, but it’s used in mobile browsers so may be useful for mobile web apps. The W3C is working towards implementing the IndexedDB specification.
  • Offline Web Applications – Defines files to be cached for offline use, allowing applications to run without an Internet connection. This is just touched on.

Chapter 12 covers other stuff outside of HTML5, history, cross-document messaging, web sockets, and geolocation. There’re simple succinct examples of each of these. I just wish these were in the spec today.

Chapter 13 is an introduction to what’s next and touches on CSS3 transitions, web workers (background processing for JS – yeah!), 3d canvas with WebGL, IndexedDB, drag and drop (dnd), and form validation. Some points taken away: dnd is not ready for primetime. IndexedDB may be the future of client-side data stores, but is not very far along.

Chapters 14-18 are really reference chapters. Chapter 14 is a quick reference of the new tags and attributes of HTML5, and of the new features of CSS3. Chapter 15 is a nice jquery primer, so you can skip it if you’ve used even a little jquery before. Chapter 16 lists some tools and techniques to encode audio and video for use with the new HTML5 audio and video tags. Chapter 17 is a list of external resources (links), and chapter 18 is a bibliography.

Advertisements
This entry was posted in Book Reviews, Web Development. Bookmark the permalink.

One Response to Book Review / Overview: “HTML5 and CSS3” by Brian P. Hogan

  1. I just found this review. Thanks so much for the kind words, and I’m glad the book was helpful to you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s