Introducing HTML5 by Bruce Lawson and Remy Sharp, The Book of CSS3 by Peter Gasston

Due to procrastination I am writing about two books at once again!

In planning out my Node.js experiment, I realized that to really learn Node.js, I would need to learn JavaScript for real – and to learn JavaScript for real, I would need to go back and re-learn HTML and CSS.  In re-learning HTML and CSS, I discovered I was stuck in the past and really needed to catch up to HTML5 and CSS3, which led to the purchase of these two books.

To learn about all the cool new stuff in HTML5, I decided on Introducing HTML5 by Bruce Lawson and Remy Sharp.  This book was perfect for me – it describes the cool new features of HTML5 (plus some extras) in enough detail to allow the reader to use them, assuming you are already familiar with HTML, but leaves the really in-depth information for your own further exploration.

The book includes a short history of HTML5, which was really fascinating to me.  I never realized there was so much drama and conflict behind it all – the W3C deciding to freeze HTML at 4.01 and move to XHTML 1.0 in 1998, people from Opera and Mozilla disagreeing with work on a new XHTML 2.0 specification and creating the WHATWG to create their own specification, the W3C deciding they may have been wrong and starting to use the WHATWG’s specification as the basis of a new version of HTML, the W3C finally dropping XHTML 2.0 and moving to HTML5, the tension between the W3C and the WHATWG (pages xi-xiii)… It’s like high school drama!

I also never knew how haphazardly new features get implemented in browsers, and how much competition there is among browsers.  The example the book gave is XMLHttpRequest (page xiv).  It was created by Microsoft, and to implement something similar the other browsers had to reverse-engineer it, so there was never any standard.  Browsers all implement things in such different ways – it’s so interesting how there has to be a delicate balance between specifying how browsers should handle things (such as invalid markup or errors) and browser individuality (or else all browsers would be the same and there would be no competition!).

The biggest thing I learned in reading this book is HTML’s emphasis on accessibility.  When I taught myself way back when, I had no idea – I just used it to make my page look how I wanted.  I never realized that specific HTML tags are so important, not just for accessibility, but also for search engines.  I feel like this as been increasingly emphasized recently, hence the very strong opinion these days that HTML should purely be for structure and CSS should do all the styling.  Also, apparently there are laws about a website’s accessibility?!  The book says that some old screen readers don’t handle the specification correctly, so it’s not your fault if they can’t deal with your content, but “it’s your responsibility to know your users and the law in  your area” (page 53).  It didn’t go into any further detail – does anyone know anything about that?

I also learned some interesting fact tidbits.  Apparently the HTML5 shiv was named by John Resig, but later realized he used the wrong word and really meant shim.  The name stuck, however, so now it’s known as the HTML5 shiv (page 276).  Also, apparently “even today Microsoft Internet Explorer claims to be a Mozilla browser” (page 281).  Learning more about browsers’ history really makes me understand people’s disdain towards IE!

My favorite part is the tone of this book.  Both authors use a very colloquial writing style, and there are so many little pokes and teases at each other.  Here are some of my favorite text selections:

New browser features are very exciting and some people have made websites that claim to test browsers’ HTML5 support.  Most of them wildly pick and mix specs, checking for HTML5, related WHATWG-derived specifications such as Web Workers and then, drunk and giddy with buzzwords, throw in WebGL, SVG, the W3C File API, Media Queries, and some Apple proprietary whizbangs before hyperventilating and going to bed for a lie-down. (page xvi)

HTML5 browsers must still render these dear departed elements, of course, as there are plenty of them still out there in the wild.  But you must avoid them as if they were tarantulas, zombies, man-eating tigers, plutonium sandwiches, or Celine Dion songs. (page 70)

You don’t need us to explain what our old chum id is.  But now you can begin the value of id with a digit, just like you always have been able to do with class.  Yay to the max, that’s phat, as people a quarter of my age probably say. (page 74)

Say for instance you had created a real-time charting application that tracked every time Bruce mentions his favourite pink cuddly toy on Twitter.  This charting app will plot Bruce’s sentiment against the current time – so you know if he’s happy with the colour, texture, and general feel of the thing or not. (page 270, obviously written by Remy)

To catch up on CSS3, I picked The Book of CSS3 by Peter Gasston.  To be honest I was pretty skeptical about the book at first.  The cover has a robot mannequin on it, being measured by smaller robots… what in the world does that have to do with CSS3?!  I never found out, but the book was very useful, so I guess it’s good I didn’t judge it by its cover!  This book is similar to the last – it assumes you’re familiar with CSS, and teaches you enough about the new CSS3 features to be able to use them, but doesn’t throw extraneous details at you.

I was very surprised to learn that CSS2 isn’t even an official W3C recommendation yet, and that work began on CSS3 way back in 1998 (page 2).  These things take so long!  It’s understandable though, I guess, since so many people give their opinions and they all have to agree in the end.  I wonder why CSS3 popped up as such a popular topic recently, though?  Same with HTML5, actually – at what point did they all of a sudden gain visibility?  Is it because browsers now have implemented so much of them that we can use them even if they’re not finalized?

I never realized the recommendation process was so complicated.  Working Draft, Last Call, Candidate Recommendation, Proposed Recommendation, and finally Recomendation (page 3).  I wonder what the average length of time it is for a module to make it through all the stages?  Years, probably!

I was pretty impressed with how much research seemed to have been done by the author in terms of browser support.  At the end of every chapter, there is a table listing the features discussed in that chapter and which browsers (among WebKit, FireFox, Opera, and IE) support it, which support it with browser prefixes, and which are expected to support it in a future version.  The examples in the chapters also include browser prefixes, so you know exactly which features are support in what way.

Something that made me think was the following sentence, which is related to something I mentioned earlier:

We think of web pages as having three layers: content (HTML), presentation (CSS), and behavior (JavaScript), and it’s generally understood that these layers should all be kept absolutely separate – we don’t use presentational or behavioral rules in the content layer (in other words, no CSS or JavaScript inline in the markup). (page 163)

I wonder when this shift came about?  From what I’ve understood after reading around, people make a big emphasis on separating layers precisely because people never used to do that.  Even I remember using <font> and style=”position:absolute” in my HTML.  What was it that caused this shift?  I personally do believe it’s easier to understand and maintain if everything is split.  However now the Transitions and Animations modules kind of take a step back – they add animation, which is usually seen as behavior.  I wonder how things will change now?

The book also went into some proposed CSS3 that may or may not ever come to reality.  One interesting one is the CSS Haptics proposed by Nokia (page 248).  I can’t really wrap my head around the fact that they are simultaneously filling in the gaps of features web developers wanted long, long ago and had to implement with workarounds (such as rounded corners done with images), and thinking way far ahead to propose CSS that defines the haptic feedback of a touchscreen.  The example was “haptic-tap-type: latched-button-down”.  Will a touchscreen one day really be able to make me feel like a physically pushed a button down?!  I still can’t get my brain around it.

Fun fact – to get around a certain @font-face drawback, you need to add a “null” value which only needs to be a single character.  It’s become convention to use a smiley face! (page 55)

These two books were awesome, and I definitely learned a lot.  I’ve now already started on my next set of books (which will most likely be written about together, since I’ve already finished one of them but don’t feel like writing about it yet…) to continue my learning for the Node.js project.  I’m also working on a separate “project” at the same time though – getting through Seven Languages in Seven Weeks by Bruce Tate.  All this stuff is so exciting!

Share Your Thoughts

Leave a Reply