Errata

Not exactly typos in book content. On the copyright page, there are some mentions of "O'Reilly Media, Inc". Two of them don't have spaces and written as "O’ReillyMedia, Inc". In the parts "“O’Reilly Digital Studio” and related trade dress are trademarks of O’ReillyMedia, Inc." and "Where those designations appear in this book, and O’ReillyMedia, Inc. was aware of a trademark claim,"

Note from the Author or Editor:
It looks like there should be spaces between O'Reilly and Media in all instances, but I'm not sure if there is a legal reason for combining them in some instances (I did not write this copy). Please confirm and make corrections as you deem necessary.

The exercise materials:
LWD5e_materials/ch06/Exercise 6-8/glossary.html
LWD5e_materials/ch06/finished exercises/glossary-done.html

Are still marked up as XHTML 1.0, not HTML5.

Note from the Author or Editor:
These exercise files were carried over from the 3rd or 4th edition when XHTML was all the rage. No changes are needed to the book files. I have updated the two .html documents and uploaded them to the materials for 5e online.

Change "x-selectors" to "x-descriptors"

reason, x-descriptors are best used for images...

"table markup using Flexbox and Grid Layout techniques (see Chapter 1, CSS Layout with Flexbox and Grid)."

Should be

Chapter 16

not

Chapter 1

Note from the Author or Editor:
This is correctly "Chapter 16" in the print book, but it may be incorrect in the PDF. I don't have access to it, so please check and correct it if necessary.

"Name the text fields **customername**, **address**, **telephone**, **email** and **instructions**, respectively. "

pizza.php is actually coded for

emailaddress

not

email

Note from the Author or Editor:
Yep! There is a mismatch between the Figure instructions and what is in the .php file that processes the form.

Leave the book as-is. I think I'm going to just change the script to match the book. That way, it will work for people who already have the book.

I will just have to change the "final" .html file that is included in the materials for this chapter. I think this is the best way to handle this.

HTML5 introduced six

Typo: five

Only five new date- and time-related input types found in chapter: date, time, datetime-local, month, week

Note from the Author or Editor:
Please change "six" to "five"

The sentence "It is a bit dated, but I'm sure would be helpful, balanced with your up-to-date browser support knowledge" should probably read "It is a not dated, but I'm sure IT would be helpful, balanced...".

Note from the Author or Editor:
Confirmed. Please insert "it" between "sure" and "would" in the noted sentence.

The following example provides a video clip in the souped-up WebM/VP9 format for supporing...

Typo: supporting

Note from the Author or Editor:
Please change "supporing" to "supporting" as noted above.

For example, the h1, h2, p, ...

Typo: extra space before p

Note from the Author or Editor:
Confirmed. Please delete the extra space before the "p" in the first paragraph as described above.

“In this scenario, paragraph text will be green because (it is) the last rule....”

The 'it is' needs to be added.

h1 { color: red }

Typo: no semicolon after declaration:
h1 { color: red; }

A semicolon is not required but good to have for:
1. Consistency of coding
2. Reinforcing the NOTE on p.243, "...get into the habit of always ending declarations with a semicolon. "

Note from the Author or Editor:
Please add a semicolon after "red" as described above.

h1 { color: red;}

pc picas (1 pica = 12 points or 1/6 inch). Points are a unit commonly used in print design.

Typo: Picas are a unit commonly used in print design.

Note from the Author or Editor:
Confirmed. Please change "Points" to "Picas" in the description for pc as suggested abovel.

header {
width: 100vw;
height: 100vh; }

It’s also easy to specify a unit to be a specific percentage of the window size, such as 50%:
img {
width: 50vw;
height: 50vh; }
-----------------------------------
Logically, it should be

width: 50%;
height: 50%; }

Note from the Author or Editor:
This is not an error because the section is about vw and vh units, but the line of text introducing the second code example on the page could be clearer. Change to:

"It's also easy to use vw and vh units to set the width and height of an element to a percentage of the display size, for example to the equivalent of 50%:

“I want a fancy font for the “Black Goose Bistro, Summer Menu”.

The “,” comma needs to be removed between "Bistro" and "Summer".

Note from the Author or Editor:
Confirmed. On page 268, remove comma between Bistro and Summer in the first line of #3.

article {
font-size: .875em

Typo: no semicolon after declaration:
article {
font-size: .875em;

A semicolon is not required but good to have for:
1. Consistency of coding
2. Reinforcing the NOTE on p.243, "...get into the habit of always ending declarations with a semicolon."

Note from the Author or Editor:
Please add a semicolon after font-size: .875em;

"or if you’d like to turn of the underline under links",
should be "off", i.e.
"or if you’d like to turn off the underline under links"

Note from the Author or Editor:
Confirmed. Second line of text on this page. Change:
"of the underline..."
to
"off the underline..."

"font-size: small;" is shown. This was set to "font-size: 100%" in Exercise 12-2 on p.273 which matches /LWD5e_materials/ch12/finished exercises/menu-ex6.html

Note from the Author or Editor:
Good catch! Confirmed. In the first code block, change:

font-size: small;
to
font-size: 100%;

h1 {
filter:alpha...

Typo: missing space after semicolon (:)

h1 {
filter: alpha...

On page 242: The declaration...is made up of a property...and its value..., separated by a colon and a space."

Note from the Author or Editor:
Please insert a character space after filter:

filter: alpha(opacity=50);

For PDF purchased from eBooks.com:

Page number at the bottom of the page is 64 instead of 355 (First page of Chapter 14 - "page 374 of 809" as per macOS Preview). Similarly on the first page of Chapter 16 (page 438 of 809) the page number jumps from 126 back to 95. On the first page of Chapter 17 the page numbers are back on track with 485.

Note from the Author or Editor:
This sounds like an error in the PDF. Could someone check that the most recent version at eBooks.com has the proper page numbering?

I'm marking this as "confirmed" even though I can't personally confirm it.

"and the total element widh is 540px." Should be "width"

Note from the Author or Editor:
Confirmed. Change "widh" in 2nd line of 2nd paragraph to "width"

The code above Figure 15-16 doesn't match the description earlier. The text says that the ellipse has a 100px horizontal radius, and a 150px vertical radius. However, the code says ellipse(200px 100px at 50% 50%). I wonder if there is an error somewhere.

Note from the Author or Editor:
There is an error in the code. Change 200px to 150px in the 3rd and 4th lines

-webkit-shape-outside: ellipse(150px ...
shape-outside: ellipse(150px ...

(1) The "width 25%" rule selector needs to be ".box" not "box".

(2) Figure 16-12 "flex-end" is showing "flex-start" result. For "flex-end" the lower edge of the bottom border of "9" and "10" should "dock" with the upper edge of the bottom border of the container element.

(Levendel's Axiom: "Bugs Abhor Loneliness")

Note from the Author or Editor:
1) Confirmed. Add a period before "box" in the code block just above Fig.16-12.

2) Confirmed, but this figure was fixed and replaced in the most recent reprinting.

The "flex: 0 1 100px" rule selector needs to be ".box" not "box".

Similarly for the rule when changed to "flex: 1 0 auto;" on the next page.

Note from the Author or Editor:
Confirmed. In the code example just above Figure 16-20, add a period before "box" in the first line.

.box {

I think there is a typo with the numbering of the process for using the CSS Grid Layout. The description starts with "3", then "4", and "5". Where are "1" and "2"?

Note from the Author or Editor:
My copy (first printing) has the process numbered "1, 2, 3", so I'm not seeing this problem. There is a chance that an earlier fixed error caused this one in a later printing, so please check the file and set the numbering to start at 1.

I'm marking this "confirmed" to trigger the inquiry.

The second paragraph under "NOTE": the word "includes" is mis-spelled as "incudes".

Note from the Author or Editor:
Change "incudes" to "includes"

Exercise 16-5: "We can fix that by changing the measurement of the fifth row track to auto."

The rule has it's **fourth** row track changed. Changing the fifth row track to "auto"" has the unfortunate side effect of stretching the footer (rather than pushing it down).

Note from the Author or Editor:
Confirmed. In the second line of Step 5, change "fifth" to "fourth".

While the image is labeled as "transform: skew(15deg, 30deg);" the appearance is more consistent with "transform: skew(-15deg, 30deg);"

Thank You for providing the figures to experiment with!

Note from the Author or Editor:
Confirmed, however the code should stay the same and the figure should be replaced. When it is time for a reprint, see me for the replacement figures for the book (vertical) and the ebook (horizontal version).

The official "perspective" property requires units, so it should be "perspective: 600px;"

The prefixed "-webkit-perspective" property doesn't seem require units which is why Figure 18-16 still works with LWD5e_materials/ch18/figures/transitions.css even though "perspective: 600;" is marked as an "invalid property".

Note from the Author or Editor:
This errata is confirmed. The section on 3-D transforms (carried over from 4e) references the old version of the spec from 2009. This will require a fair amount of rewriting and figure replacement--more than I can do on this errata page.

O'Reilly production folks, let me know if we should fix something of this scale in a reprint or make a note for the next edition. If we fix it, let's arrange another method for me to submit the new material.

For readers who may be looking through errata, the description of the problem is well stated in this submission. More details can be found on the MDN site (https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)