Historical errata for HTML5 and CSS3

Footer covers some text

About halfway down, “am HTML” should be “an HTML”

Third paragraph from the end, “and and” should read “and”

First paragraph, “eachother” should be “each other”

Code bug:
server.rb, line 25 throws an Exception with 1.8.7. gsub! returns nil, and sorting nil is difficult. Try:
pages = pages.collect{|page| page.gsub(‘code/’, “”)}.sort
or some separate .sort into another line:
@pages.sort!

css3_print_links/index.html, line 37:

travel/guidelines is misspelled. Of course, the page doesn’t exist either.

The aside contains two periods (full stops), one inside the quotes, and one outside. I don’t think that is correct.

Should not we use the new tag time on

Posted by Brian on April 1st, 2010 at 2:39PM

? Something like

Posted by Brian on April 1st, 2010 at 2:39PM

Should we use

and tag instead "?

Footer covers some text

Maybe use $(document).ready(function(){…}); instead just $(function(){}); , because is more declarative, easy to read and understand. (in all pages with javascript)

color of the code on line with “<section id=”content’….. "

close to the end of page there is a typo error ( changes on the pag when ) “pag” should be “page”.

Second paragraph from the end: “fameworks” should be “frameworks”.

In the table row for “Calendar controls”, the “Use” column is a little confusing. Perhaps each example should appear on a new line?

In the row for “Color fields”, the “Use” column duplicates “” from the previous row.

Line 3 of the first CSS example contains an empty comment that seems to serve no purpose. It would be less confusing if it was not there.

The final sentence of the page reads “Let’s find out how we can soften up our web forms, shall we?”. I’m finding this confusing on two counts: firstly, I can’t see how “soften up” applies to web forms and, secondly, the rest of the chapter does not involve forms.

In the css3_pint_links/index.html HTML example, there is a link to a page called “guideliens.html”. Although this is not technically an error as it is consistent with the later example, it would look less odd as “guidelines.html”.

Line 3 of the css3_print_links/print.js JavaScript example displays a message box (‘alert(“gotit”)’) if the browser supports the “onbeforeprint” event. While useful when testing the code, this line probably shouldn’t be left in the final code.

The third sentence of the first paragraph reads “…across their monitor anymore than…”. “anymore” should be “any more”.

Two sentences in the second paragraph seem to repeat the same information, namely those starting “Some parts of the WIA-ARIA specification have been rolled into HTML5…” and “Some parts of WIA-ARIA have been incorporated with HTML5…”.

The title of Tip 15 is “Building a simple music with the Audio tag”. Should this read “Building a simple music player…”?

The first line of the second paragraph in the main text (starting “Then we loop…”) reads “( line12)”. This should be “(line 12)”.

First paragraph reads “with decendant selectors”. “Decendant” should be “descendant”.

Last sentence of the second paragraph reads “which you can see on [line] 10”. The code reference should be to line 18, not line 10.

The first paragraph refers to “JavaScript” but elsewhere in the book the language is usually referred to as “Javascript”. “JavaScript” is also used on pages 56, 102 and 117 of the PDF.

The second paragraph reads “a version of the AwesomCo logo”. This should be “AwesomeCo”, not “AwesomCo”.

The first code fragment contains closing tags for

,

and

but no opening tags. This could be a bit confusing.

The diagram in the “Drawing Lines” section does not appear to match the text. It looks like the first diagram on page 104 has been duplicated.

The third paragraph in the “Moving the Origin” section reads “It’s likea restore point…”. This should be “like a” instead of “likea”.

The first paragraph reads “Here we set the stroke and fill to white…”. However, in the preceding code fragment there is no mention of setting the color of either the stroke or fill.

This problem also affects the first paragraph of the “Adding Colors” section which again claims that we “saw briefly how to set the stroke and fill color”.

The last line of the page reads “We then declare a the method”. This should be either “a method” or “the method” instead of “a the method”.

The first paragraph reads “This fires off the loadnote method”. “loadnote” should be “loadNote” (i.e. capital N).

The code fragment following the sentence “This fires off the loadnote method” duplicates the code from the previous code fragment. This code fragment should contain the implementation of the “loadNote” method.

On page #24 I see that you have <!DOCTYPE HTML> .. the ‘HTML’ is in caps. Elsewhere in the book I see you have it lower case. For instance it is in lowercase in a lot of the linked code from the pdf. I’m sure both work, but it may be confusing to people.

The first paragraph of the “Falling back” section reads “no way to provide support to Internet Explorer uses natively”. This should read “users” instead of “uses”.

The first sentence of the page (“Another alternative is to use the Google Chrome Frame plugin”) does not end in a period. In addition, there is a space before the indicator for footnote 7 at the end of this sentence.

Within the page there are references to footnotes 5 and 6. However these footnotes do not appear until the bottom of the next page.

“browers”, second paragraph.

In the third paragraph, last sentence, you have used the word “application” instead of “applications”. It should read, “… lets us start building working applications that …”.

In the paragraph after the heading “Accessibility”, second sentence, you have an extra word “the” before the word “audio”. The sentence should read, “HTML5 introduces some new elements, like audio, video, and canvas.”.

The code excerpt for the header block is taken from html5newtags/index2.html but the code excerpt for the basic template and footer are taken from html5newtags/index.html. Since index.html contains the header block, it might be less confusing to the reader to use index.html for the header excerpt.

there is no code to rotate with css3, instead the code inserted was a copy of the shadow css code of 135 page.

A section title reads “Our formCorners plguin”. This should be “plugin”, not “plguin”.

The first paragraph, fourth line of the section “Our formCorners plugin” reads “…to cover that again .Instead…”. The period and space at the end of the sentence have been transposed.

The fifth line of the “Decide if it’s worth the effort” sidebar reads “…an idea of how may people…”. This should be “many”, not “may”.

The last line of the “Decide if it’s worth the effort” sidebar reads “…to write ad maintain”. This should be “and”, not “ad”.

missing closing

tag in the meter code snippet.

deices instead of devices.
“Our users must be able to interact with our web sites, whether they are visually impaired, hearing impaired, on older browsers, on slow connec- tions, or on mobile deices.”

Improper use of “bad rap”.
“Over the years, popup windows have gotten a bad rap, and often rightly so.”

Bad rap means “unjust accusation”. So unless you mean that popup windows have often been rightfully wrongly accused, there’s a problem somewhere ;)

First paragraph, second line of the “Shadows on Text” sidebar reads “It works just like box-shaodw”. This should be “box-shadow”, not “box-shaodw”.

First paragraph, second line of the “Rotating The Badge” section reads “much like ou can”. This should be “you”, not “ou”.

The first line of the last page paragraph reads “THe ultimate goal”. This should be “The”, not “THe”.

The last line of the last paragraph ends “too far one direction”. This should be “too far in one direction”.

The first paragraph of the “Transparent Backgrounds” section starts “Graphic designers have uses”. This should be “used”, not “uses”.

The fourth line of the second paragraph in “Transparent Backgrounds” reads ‘is“all on”’. There should be a space after “is”.

The first line of the last page paragraph reads “looks just pretty good”. This appears to be a confusion between “looks just right” and “looks pretty good”.

The first paragraph ends with a double period after “sine gets a negative value”.

The third paragraph in the “Adding a Shadow To The Badge” section starts “The box shadow rule has four parameters”. Shouldn’t this be “The box-shadow property”? i.e. “box shadow” hyphenated and “property” instead of “rule”.

I am an experienced WebDeveloper regarding the number of WebApps I have deployed until now. But considering the “proper use” of HTML as the GUI layer in WebApps I was always learning by doing and I am sure there are some serious misunderstandings and misdoings on my side. I think, surely I am not the only one and definitely not the only one who bought this book.

I would strongly suggest to incorporate a chapter describing the “proper use” of HTML starting HTML5 for WebApp GUIs. Like “how this whole thing should be done The Right Way™” from a concepts part and what best practise has evolved and will be used with HTML5 now. This would catch me where I am. Anyone else? ;-)
And: thanks for the writing and for the opportunity to beta test the content!

First paragraph, line 5 of the “Fonts and Rights” sidebar reads “logo an or images”. This doesn’t make sense.

The first line of the “Font formats” section reads “the browsers your targeting”. This should be “you’re”, not “your”.

The section “Changing Our Font” starts “THe font”. This should be “The”, not “THe”.

The first line of the “Falling Back” section reads “and other borwsers”. This should be “browsers”, not “borwsers”.

In the table listing browser support for fonts, the first row reads “Embedded OpenType(EOT)”. There is a space missing before “(EOT)”.

The last line of the page reads “format called Embedded Open Type”. There shouldn’t be a space between “Open” and “Type”.

The first line of the first paragraph reads “format called Embedded Open Type”. There shouldn’t be a space between “Open” and “Type”.

Footnote 9 on page 144 duplicates the link to the Garogier font found in the footnote 8 on page 143.

The “Font Services” sidebar on page 147 duplicates the description of and link to Typekit found in the “Fonts and Rights” sidebar on page 143.

“Create a new page called blog.html and paste in a basic HTML5 template.”… but after that the downloadable file is “index.html”, this can be confusing.

Downloadable index.html from this page contains some javascript that has not yet been explained at this point.

It would be good to explain how to link the stylesheet to the html using from the beginning so you can see how each css change behaves.

I thought this pledge example would be integrated on the blog, and tried to put it as another section… in this case, it doesn’t work as expected, might be confusing.

Better explain it’s a new file.

It should be explained that you need to include the jQuery library in order for this examples to work.

A stronger contrast for the gradient should work better on macbooks. At first I didn’t notice this was a gradient. I changed it to this:

color-stop(0.37, rgb(0,200,57)),
color-stop(0.69, rgb(14,242,30))

The bottom margin is smaller than the footer used by the Gerbels that put a footer on with my name designated.

“Opera is the only browser that currently supports the calendar picker. (…) Other browsers render a text field.”

This is not accurate, on Safari 5.0.1, calendar fields are rendered like number fields, with the increment/decrement controls. You can also give it a default value like “2010-01-01” and it will work fine, jumping dates up and down. If you don’t provide a default value, it will take 1582 as the starting year.

“Most browsers render this as a text field, but Opera adds a little icon within the field to help identify it more easily.”

This is not happening on Opera 10.60 for Mac OSX, neither on URL fields. They’re rendered as text fields, without any icon.

“you can’t use your meter for things with arbitrary minimum or maximum values like height and weight or temperatures because there’s no technical minimum and maximum value for those”

Actually, there is - absolute zero is −273.15°C and absolute hot is Plank temperature.

I see no color gradient in IE8, as it seems not to recognize the -moz or -webkit gradient syntax. In IE8 the colored bar just has the #999 background color. But by inserting the MS proprietary filter syntax (filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=‘0’,startColorStr=‘#00FF00’,endColorStr=‘#669900’);) it works just fine.

I know the book is not written for IE, but if you are including proprietary hacks for Firefox and the webkit browsers, it doesn’t hurt to mention the IE hack as well.

jQuery element creation section mentions “this is another example of chaining” except there’s no chaining example at all.

“In this example, we watch the clicks for links, display the innerHTML” - that’s not at all what the code listing does.

“jQuer” should be “jQuery”

In the callout “Keep An Eye On The Adult Entertainment Industry” at the top of the page, “ecommerce” is misspelled “ecommerse”.

Bottom of page 233, Appendix A, jQuery Primer are incorrect links to:
\t1. jQuery documentation - “docs.jquery.org”
and 2. jQuery library - “jquery.org”

A link to jQuery documentation is : “docs.jquery.com/Main_Page”
A link to downloading the jQuery library is : “docs.jquery.com/Downloading_jQuery”

In the content of the <time …> tag in the example at the bottom of the page “October” is spelled “Ocober”.

In the section “Asides and Sidebars”, in the content of the <time …> element, “October” is spelled “Ocober”.

The first word of the 5th paragraph on the page headed “Creating Popup Windows with Custom Data Attributes”, the first word, “Popups”, is misspelled “Popus”.

In the first paragraph of the page about Modernizr, the word “missing” is misspelled “missiing”.

The first mention of “jQuery” on this page is mis-capitalized “JQuery”.

In the first paragraph on this page, “XMLHttpRequest” is mis-capitalized “XmlHttpRequest”. This method is usually capitalized with “XML” in all caps.

In the section headed “Bolding the Last Row With :last-child”, the word “undesirable” is misspelled “undesireable”.

In the first paragraph of the section headed “Counting Backwards with :nth-last-child”, the word “the” is repeated in the penultimate sentence.

In the first paragraph of the section headed “Moving the Origin”, the word “the” is repeated in the first sentence.

At the end of the first paragraph of the page headed “Showing Progress with the Meter Element”, there is an unnecessary space before the period.

At the end of the paragraph following the example in the middle of the page, there is an unnecessary space before the period.

At the end of the first sentence of the paragraph following the example (after the link for Figure 4.5), there is an unnecessary space before the period.

At the end of the last paragraph of the page, there is an unnecessary space before the period. (It looks like someone did a global search/replace on “page.” with “page .”, because this same error occurs elsewhere and has been separately reported).

In the first paragraph after the example (middle of the page), the word “column” is misspelled “columm”.

It could be a style choice, but the word “screenreader” (and “screenreaders”) is generally spelled as two words, “screen reader” or “screen readers”.

This “word” occurs: 2x on page 99, 102, 104, 2x on 106, 3x on 107.

Only the first item in the “Role/Use” table is punctuated: it has a period at the end of the “Use” item. The others are unpunctuated.

The punctuation of the “Use” column entries of the “Role/Use” table is inconsistent. Some have periods at the end of the “Use” entry, some don’t.

In the first paragraph of Chapter 6, the word “programmatically” is spelled “programatically”.

In the last paragraph before the section headed “CSS and Classes”, the word “programmatically” is spelled “programatically”.

In last entry of the “Codec/Supported Browsers” table at the top of the page, the word “installed” is misspelled “instaled”.

In the second paragraph of the section headed “H.264”, the phrase “de facto standard” is misspelled and incorrectly punctuated “defacto-standard”.

In the second paragraph of the section headed “H.264”, the Google brand name “YouTube” is incorrectly capitalized “Youtube”.

In the partial paragraph at the top of the page, the word “encoded” is misspelled “endcoded”.

In the second paragraph of the section headed “Falling Back”, the subject of the present book, “HTML5”, is miscapitalized “hTML5”.

In the last paragraph on this page, under the heading “Falling Back”, the subject of the present book, “HTML5”, is miscapitalized “HTMl5”.

In the first paragraph of the section headed “Audio, Video, and Accessibility”, the word “usable” is misspelled “useable”.

In the callout headed “Media Content JavaScript API”, in the paragraph following the example, the word “of” is misspelled “o”.

In the first paragraph of the section headed “Browser Specific Selectors”, the word “specification” is misspelled “specifiaction”.

In the call-out headed “Decide if it’s worth the effort”, the words “are mostly” may be conjoined as “aremostly”.

In the same call-out, the words “it may” may also be conjoined as “itmay”.

Then again, it may be an artifact of extracting the text from the PDF.

In footnote 6, the word “transformation” is misspelled “transformatin”

In the first full paragraph, under the example, the word “except” is divided by a space as “exc ept”.

In the punultimate sentance of the last paragraph above the section headed “@font-face”, the acronym “sIFR” is misspelled “sFIR”.

In the “Joe Asks. . .” call-out at the top of the page, the word “provide” is misspelled “provde”.

[pedantryMode]
Throughout the book, the “LocalStorage” and “SessionStorage” methods are capitalized thus.

In the example in the call-out headed “SessionStorage” on this page, a “sessionStorage” object is so capitalized (I assume) according to coding conventions.

However, in the text preceding the example, the last sentence reads “Instead of grabbing the localStorage object, you grab the sessionStorage object.” It seems to me that “localStorage” and “sessionStorage” should be set in an alternate typeface (as it is in the last paragraph on this page). Unfortunately, it appears that the alternate typeface used in the last paragraph on the page happens to be the same typeface used in call-outs throughout the book. Perhaps the example font could be used in the call-out to highlight that you’re referring to “localStorage” and “sessionStorage” objects as opposed to the “LocalStorage” and “SessionStorage” methods.
[/pedantryMode]

Perhaps your style guide permits it, but the word “autoincrementing” in the “Field/Description” table at the top of the page appears to be missing a hyphen: it should be spelled “auto-incrementing”.

In the partial first paragraph on this page, the word “users” is misspelled “usesr”.

In the second full paragraph of this page, the word “manifest” is misspelled “manfest” (which sounds like it could be a very popular event in certain communities, but is probably not what you meant).

In the middle paragraph of the page headed “Getting Chatty with Websockets”, the word “to” is misspelled “ot”.

In the penultimate sentence of the middle paragraph of the page headed “Getting Chatty with Websockets”, an editing error has left left the sentence with the phrase “… by sending the a message like …”. I would guess that the indefinite article “a” is what’s wanted, rather than both “the” and “a”.

In the paragraph immediately after the example, the word “participate” is misspelled “particiapte”.

In the final sentence of the penultimate paragraph of the page, the word “port” is misspelled “por”.

In the first paragraph of the page headed “Finding Yourself With
Geolocation”, the word “device” is misspelled “deivce”.

In the first paragraph of the page headed “Finding Yourself With Geolocation”, the Wi-Fi Alliance brand “Wi-Fi” is misspelled and mis-capitalized as “WIFI”.

In the second paragraph of the section headed “Locating Awesomeness”, the word “and” is misspelled “adn”

In the paragraph directly above the example in the middle of the page, the word “longitude” is misspelled “logitude”.

In the paragraph just under the example at the middle of the page, the word “longitude” is misspelled “longitide”.

In the first partial paragraph of the page, under the illustration, the word “location” is misspelled “locatio”, which sounds like the name of a minor character in a lesser play of Shakespeare.

In the last sentence of the last paragraph above the section headed “The Future”, the word “exercise” is spelled “excercise”.

In the second sentence of the paragraph directly below the example, the word “specify” is spelled “specifiy”.

In the last paragraph of this page, the word “curves” is misspelled “curvers”.

In the first paragraph of the section headed “File Dragging”, the Google brand “Gmail” is mis-capitalized “GMail”.

At the end of the third paragraph of the page, there is an unnecessary period after the footnote marker “9”.

Instead of the line ending:

jQuery UI.[9].

It should end:

jQuery UI.[9]

Alternatively, the period could be after the footnote marker:

jQuery UI[9].

In the first paragraph of the page and the last paragraph before the section headed “11.6 Onward!”, the punctuation style for footnote markers is inconsistent:

In the first paragraph, the period follows the paragraph marker:

… of its own[12].

In the last paragraph before the section header, the period precedes it:

… in its development.[13]

In the second paragraph of the page, the “SessionStorage” method name is misspelled “SesionStorage”.

In the first sentence of the third paragraph, the word “impasse” is misspelled “impass.”

In the partial first paragraph at the top of the page, “jQuery” is misspelled “jQuer”.

In the last sentence of the last paragraph before the header “A.3 Methods to Modify Content”, the word “manipulate” is misspelled “maniuplate”.

In the first paragraph of the page (after the partial example), the word “the” is misspelled “hte”.

In the third normal paragraph of the page (after the one-line example), the word “programmatically” is misspelled “programatically”.

Popus aren’t all bad though
Should be
Popups aren’t all bad though

I don’t get it when you say “The counter is 1-based, not zero-based”. I think the “n” counter is zero-based and that’s why you specify “from the second row” as “n+2”, that is, “0+2”

as we’re talking about removing the bottom margin, I would do this instead, and leave the other margins untouched

#sidebar p:last-child{ margin-bottom: 0; }

On all this table example, sometimes you use styles like “tr” and sometimes like “table tr”. I find this not coherent and redundant, I suggest using the shorter versions, as tr, td and th are always within tables.

“When you open it in a modern browser” should be “When you print it from a modern browser”. Also I’s suggest to do a print preview to see it without the need to really print it on paper.

At the line 64 fix so that the default value is not submitted as the actual value: With the current default values of your form the name and last name fields would prevent users with first name John or last name Smith from having their data submitted. Since the default values are plain John and Smith

Suggest changing the default data in those fields to “John” / “Smith” or i.e. John / i.e. Smith

the link for videojs is wrong, it contains a www but only works without the three www letters

The last item on this page (Custom attributes) is cut off by the footer. All you can see in the second column is “Allows addition of custom attributes to any” and then it cuts off. Similarly, the third column contains only “All browser sup-” and the rest of the text is chopped in half horizontally.

In the first paragraph, first sentence, you have an extra word “a”. It should read, “… and while most of my friends, …”.

At the bottom of the page, you say that the page header will contain the blog’s title and subtitle. In the HTML that follows, there is only a title.

In the second paragraph, first sentence, you say that you should add autofocus=‘true’ to any form field and then you show the code for a form field but you have only added the word autofocus to it, not autofocus=‘true’. As boolean attributes are true by their presence and false by their absence, you should probably change the wording to say that you are setting the autofocus attribute to true by including the word autofocus in the input element.

In the last paragraph, third sentence, you have an “=” instead of a “-” between the word “in” and “place”. It should read, “We traditionally implement in-place-editing by …”.

The bottom of the CSS3 selector table seems to run off the bottom of the page.

You are missing a “;” from the end of the text-align: statement. It should read:

tr:nth-last-child(-n+3) td {
\ttext-align: right;
}

In the last paragraph, only sentence, it looks like the word “the” is missing making the sentence read awkwardly. It probably should read, “… but I prefer to use the DOMAssistant2 library because …”.

Footnote 3 extends off the right side of the page and needs to be wrapped.

In the paragraph after the css3mediaquery/style.css listing, first sentence, you have the term mediaquery. As there is no mediaquery attribute in css3, I think you meant to say “media query”. The sentence should read, “You can think of the code we put within the media query braces …”.

In the first paragraph, second sentence, there is an extra letter “i” after to period.

In the paragraph right before the Falling Back heading, second sentence, I believe you have a grammatical error. I think you should use the word “doesn’t” instead of “don’t” so that it reads, “However, Internet Explorer 8 and below doesn’t have any support …”.

In the paragraph right after the code listing for css3banner/index.html, first sentence, you misspelled the word “and”. It should read, “The DirectX filters work in IE 6,7, and 8, …”.

In the first paragraph, third sentence, you have repeated the word “called”. It should read, “It’s since been spun off into a separate specification called “ Web SQL Storage.”".

In the first paragraph after the heading “The Future”, second sentence, you have repeated the word “with”. It should read, “… and when we combine those with the HTML5 manifest file, …”.

In the first complete sentence on the page, you have left the “n” off the end of “location”. It should read, “… before we attempt to get the visitor’s location, …”.

At the end of the first paragraph, the last sentence is missing a period.

The A.3 table runs off the bottom of the page. It looks like there may be multiple problems here. If you click on the table of contents for section A.3, it places you on the previous page, page 240. Also, page 240 is completely blank which makes me thing there is something amiss in the markup that makes it skip a page.

It looks like section A.7 has the same kind of problems that I described in errata #44915 for section A.3. There is an unnecessary blank page and the table of contents is linked to it. Sections A.8 and A.9 also have the same problems.

In the last paragraph of section B.2, third sentence, the word JavaScript is hyphenated and there is an extra space to the left of the hyphen. Both of these should be removed so the the sentence reads, “… which is a special JavaScript object …”.

In the second paragraph after the “Hide and Show” heading, last sentence, you have used the word “need” when you should have used “needed”. It should read, “… to hide page sections that are only needed to appear …”.

In the second paragraph after the “html, val, and attr” heading, you need a space between “h1” and “tags”. It should read, “Here, we’re setting the content between the opening and closing h1 tags to ”Hello World“.”.

In the first sentence on the page, you need a space between “append( )” and “method”. It should read, “The prepend( ) method works the same way as the append( ) method but …”.

You are missing the period at the end of the sentence describing “Microsoft IE9 Test Drive”.

The html5_popups_with_custom_data/popup.html example does not work due to the missing holiday_pay.html file. It pops up a new window containing an error that the file can’t be found. It would be nice to have the examples work without errors.

maniuplate

In the first code snippet, selecting the wrong field when adding an item to the “#links” list. Pretty sure it should be $(“#task”).val() not $(“#email”).val()

On the same wavelength, it seems like #links should be renamed since it isn’t really a list of links .. it’s just a list of tasks in plain text.

“You’ll learn about elements for defining headings, footers …” Think you mean “headers” as you go on to describe on pg 34.

The contentEditable support detection won’t work for iPad OS 3.2. In iPad land, contentEditable exists and is set to “false”, but the browser doesn’t honor contentEditable=true. Any thoughts on detecting that?

Spelling: independant -> independent

Text disappearing in the end of the page.

Lists of features and what they do don’t flow to the next page properly. It seems like they might be in tables with justified font, and it sometimes word-wraps weirdly and I’m fairly certain I can’t see a large number of elements you think you’re telling me about, because the table extends below the page footer instead of flowing to the next page.

showPasswordPlaceHolder is defined with one variable, but on line 33 of the code it is passed two variables. It looks like in a prior version it was defined with the `reload` parameter, like its non-pasword cousin on the next page.

When viewed with evince on Ubuntu 10.04, the Bottom of the table falls into/behind the blue footer bar.

So I see the text:

Custom Allows addition of cus-
attributes tom attributes to any * All browsers sup-
=
BLUE FOOTER BLUE FOOTER BLUE FOOTER BLUE FOOTER

The paragraph which speaks of descendant selectors works as suggested in the book for firefox 3.6.13 and chrome 8.0.552.224, but not if the td is specified first as below:

td:last-child tr:last-child {
font-size: 24px;
}
Perhaps this should be commented upon?

#46179: in the methods.html sample (and in the printed extract) $(“#email”) is incorrect, it should be $(“#task”) instead.

in the methods.html sample (and in the printed extract) $(“#email”) is incorrect, it should be $(“#task”) instead.

in the code snippet for html5_meter/index.html, the opening meter tag is missing the syntax highlighting (the closing tag however is formatted)

the opening “a” tag in the snippet for html5_popups_with_custom_data/original_example_2.html should probably be formatted like in the rest of the code examples (bolded and reddish)

The following appears on line 14 of page 105:

The CSS on two lines is incorrect.

header#page_header nav ul, #page_footer nav ul {

should read:

header#page_header nav ul, footer#page_footer nav ul {

And the line:

#page_header nav ul li, footer#page_footer nav ul li {

should read:

header#page_header nav ul li, footer#page_footer nav ul li {

You’re missing a closing single quote in code sample. ‘width=300,height=300); should be ’width=300,height=300’);

Using uppercase “<!DOCTYPE HTML>” here may technically be correct, but it’s inconsistent with the lowercase “<!DOCTYPE html>” used elsewhere

In the first sentence, “We could use JavaScript to hide these videos if HTML5 video isn’t supported, like this:”, it should probably read “… video is supported…”. The script hides the video download links if video playback is available.

This is from the print version of the book.

“[<audio src=….]” does not belong here. This happens when you copy and paste from page121 :-)

In the example html5/index.html: the source-tags should be closed, some browsers don’t care, others do.

In the Drag-and-Drop Events table the ondragleave event should spell ondragleave and not ondreagleave.

In the Changing Styles snippet, the code refers to the dragend event while the paragraph is referring to the ondragenter and ondragleave events.

In the snippet at the top of the page the pattern attribute is missing. This is out of sync with the description of the code.

html5video/index.html won’t play in IE8. Error message is:

201, Unable to load stream or clip file, cannot access the video file (try loosening Flash security settings):
Error#2148, clip:‘[clip]’../video/h264/01_blur.mp4

My PDF says: Version: 2010-12-16

this run quite well in Chrome, so I can sure the path is correct.

YMMD with that aneswr! TX

This element should not be self closing in current schema (HTML5).

JavaScript-Function for autofocus doesn’t work here…

“all the links on a page with the class of popup”…
I think you want
var links = $(“a.popup”);
rather than
var links = $(“#links a”);

Placeholder text JQuery plug in offered in the book does not work in IE (9) nor in Firefox(3.6)

Creating Multicolumn Layouts - CSS does not work in Opera, nor does the jquery plugin

I think you meant (using ID selector):
$(“#message”).html(“Hello World!”);

also in the example jquery/methods.html:
var wrapper = $(“#message”).wrap("

").parent();

Or I misunderstood what the example was supposed to do.

It seems to me that Figure 8.3, on page 150, should be Figure 8.4, on page 151, and vice versa.

Last item on the page for the sidebar:

We’ll also need to float the sidebar and define its width.
Download html5newtags/style.css
section#sidebar{
float: left;
width: 25%;
}

In order to match the earlier sample look at the page, the float entry should be ‘right’ (not ‘left’).

sidebar should be floated right to match figure 2.2

style.css:
section#sidebar{
float: right;
width 25%;
}

In the following fragment at the top of page:
Form validation
Client-side validation of inputs. [C5, S5, 10.6]

It seems that you’ve forgotten to specify that it’s Opera 10.6

The fall back java script for IE 8 and less produces an empty screen whenever the structural elements are used. However, the script works if the structural elements are defined as blocks in css:

header, nav, article, footer, aside, section {display:block;}

BTW, I find your book very useful and I am converting the structural and behavioral layers of some of my clients’ web sites to html5 with a great level of computability success. Especially the structural redesign makes my life easier to maintain the sites for my clients.\t

In order to “make all the links on a page with the class of popup open in a new window”
var links = $(“#links a” );

Should read:

var links = $(“a.popup”);

The last example on customised pop-ups (popup.html) does not include the jquery script that is in the source code. It would be useful to include it with an explanation of where it should be placed or make a reference to the source code if not enough space.

At the end of the second paragraph in the “Joe asks” aside, it says:

… For example, if you
had a self-closing script tag above a div like this:

However, the tag that’s actually used is an ‘h2’, which is correctly referenced in the paragraph below the HTML sample.

“If the browser has support for the border-radius property” (last sentence of the “Invoking the Rounding” section), but the code (“if(!hasBorderRadius())”) really says “If the browser has no support for the border-radius property”. (Maybe the next sentence would have to be rewritten to avoid the (virtual) double negative “If not [has no support], then it’ll use the CSS we added earlier.”

- History API lists [IE8] support which is incorrect.
- Cross-document Messaging does not list IE at all, believe [IE8] should be listed?

Place holder for password field is truncated, turning “Type your password again” into “Type your password”. Designers should be cautioned to pay attention to this. In this case, perhaps “Retype your password” would be a good solution.

Page 31 says that the target attribute of the element has been deprecated. I found a link (that I can’t post in this forum) that says it is no longer deprecated.

In the following function the classes aren’t surrounded by “” and therefore the snippet doesn’t run.

function canPlayVideo() {
return !!document.createElement(‘video’ ).canPlayType;
}
if(canPlayVideo()){
$(#videos .downloads).hide();
}

jhgfkh

ffdfd