CSS: The Definitive Guide

Errata for CSS: The Definitive Guide

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious Technical Mistake Minor Technical Mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date Submitted
Safari Books Online

In the chapter "CSS and Documents" , the book states "Similarly, the input element is also replaced—by a radio button, checkbox, or text input box, depending on its type." However, according to https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element : "HTML spec also says that an <input> element can be replaced, because <input> elements of the "image" type are replaced elements similar to <img>. However, other form controls, including other types of <input> elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "Widgets")."

Yasir  Mar 08, 2019 
Printed Page 8
Last paragraph

"To successfully load an external stylesheet, link must be placed inside the head element but not be placed inside any other element." The link element does not need to be placed inside the head element, it can be placed in the body https://html.spec.whatwg.org/multipage/links.html#body-ok Test with https://validator.w3.org/#validate_by_input+with_options

Anonymous  Nov 28, 2018 
PDF Page 35
2nd paragraph in the section titled The universal selector

In the following sentence: "Beware, however: although the universal selector is convenient, with a specificity on 0-0-0; and because it targets everything within its declaration scope, it can have unintended consequences, which are discussed later in this book." The phrase "with a specificity on 0-0-0" might as well have come from outer space! The concept of specificity has not been defined yet. The only earlier reference (p. 32) says the topic will be covered later, but the actual coverage is in Chapter 3, and this highly specific reference here in Chapter 2 (something about 0-0-0) is way too early and totally out of the blue.

AMS  Jan 11, 2018 
PDF Page 38
3rd paragraph

Concerning the following paragraph: "It’s possible to add even more expression to selectors and to apply styles in a way that cuts across elements in favor of types of information. To get something so powerful, you’ll have to do a little work in return, but it’s well worth it." The section ends without a description of the powerful technique. What is the technique? It's as if the reader is reading a thriller-type novel.

AMS  Jan 12, 2018 
PDF Page 39
2nd paragraph

Concerning the following sentence: "For example, say you’re drafting a document that discusses ways of handling plutonium." The examples involving the text with plutonium started much earlier in this chapter (p. 30). It seems that content rearrangement happened along the way, and suddenly, the example about the plutonium text is being introduced as if it was just mentioned.

AMS  Jan 12, 2018 
PDF Page 43
Line after 1st paragraph

In the following line: *#first-para {font-weight: bold;} It's not clear if there is a space after the universal selector (*) and the following # character. It looks as if there is no space, and the text does not say.

AMS  Jan 12, 2018 
Printed Page 48
Last paragraph

The description of an item in the list of confirmed errata is incorrect. That errata says: Page 270 2nd paragraph from bottom It should be page 48, last paragraph on the page. The errata also references "Table 15-1", which should be "Table 2-1".

AMS  Jan 12, 2018 
PDF Page 48
Last section heading

Could it be that the section titled "A Particular Attribute Selection Type" wasmeant to be instead titled "A PARTIAL Attribute Selection Type"? After all, the section describes partial attribute selection.

AMS  Jan 12, 2018 
PDF Page 53
last paragraph

The paragraph begins with "Again, that's in langauges ..." "langauges" should of course be "languages"

Andreas Wachowski  Jan 28, 2018 
PDF Page 57
Immediately before the figure on the page.

The concept of a:link has not yet been defined. The sidebar says it will be defined on p. 77. The example would have worked just as well without the added complexity introduced with an as-yet-undefined construct. E.g.: .sidebar a {color: white} Not at all helpful, especially combined with the fact that the source HTML for the example is not shown either.

AMS  Jan 12, 2018 
ePub Page 63%
Opening Grid Spaces

Percentage is considered as a valid value for grid-row-gap and grid-column-gap in their declaration boxes correctly, but under that it is incorrectly stated: "Right up front: as the value syntax shows, ... It’s not possible to supply a percentage, a fractional value via fr, nor a minmax of some sort."

Samir Saeedi  Feb 13, 2018 
ePub Page 65%
Table Formatting > Table Display Values > Columns > Visbility

The book reads: "A declaration of any visibility value other than hidden is ignored for a column or column group." Hidden should be replaced by collapse.

Samir Saeedi  Feb 13, 2018 
PDF Page 75
12th Line

li:nth-last-child(4n - 1) {border-right: 5px solid black; background: silver;} li:nth-last-child(3n - 1) {border-right: 5px solid black; background: silver;}

Fzhw  Jan 04, 2018 
PDF Page 78
2nd paragraph

"... to be absolute URLS, ..." --> "... to be absolute URLs, ..." (lowercase "s" in URLs)

Andreas Wachowski  Jan 28, 2018 
PDF Page 78
beginning of general note

The note begins "Styled visited links enables visitors to know ..." Instead of "enables", it should be "enable": "Styled visited links enable visitors to know ... " (Unless, of course, one had an alternative wording in mind, like "The feature "styled visited links" enables ...", but then in my opinion that should be articulated explicitly.)

Andreas Wachowski  Jan 28, 2018 
PDF Page 83
paragraph above figure 2-39

The paragraph contains '[...] which are not checked with input[type="checkbox]:not(:checked).' The closing double quote after 'checkbox' is missing: input[type="checkbox"]:not(:checked)

Andreas Wachowski  Jan 28, 2018 
PDF Page 84
Optionality pseudo-classes

<input type="email" placeholder="optional email address" required="false"> It not means this input element has a required attribute with a value of false.in fact in html required attribute has no value but itself. Sorry for my poor English!

Fzhw  Jan 05, 2018 
PDF Page 87
code after 3rd paragraph

This is just a tiny stylistic improvement. It says: textarea:read-only { opacity: 0.75;} The space that follows the opening brace is inconsistent with how other rules are formatted. Hence it should be textarea:read-only {opacity: 0.75;} (without the space)

Andreas Wachowski  Jan 28, 2018 
PDF Page 102
last paragraph, last character

Another tiny stylistic remark. The "!important" keyword is split across pages 102/103. The exclamation mark "!" appears as the last character on page 102, while "important" is on the next page. Perhaps unicode U+2060 (word joiner) can be used to avoid this?

Andreas Wachowski  Jan 28, 2018 
PDF Page 110
1st paragraph

The paragraph refers to the LVFHA pseudo-classes a:link, a:hover, etc. and says "the specificity of all of these selectors is the same: 0,0,1,0" The specificity of those selectors is, however, 0,0,1,1 (due to the "a"-element). (With this change, it will also be consistent with the example on page 111, where the selector "a:visited:hover:active" is mentioned with specificity 0,0,3,1.)

Andreas Wachowski  Jan 28, 2018 
PDF Page 124
2nd paragraph

"If a display's resolution is set to 1024 pixels wide by 768 pixels tall, its screen size is exactly 10 2/3 inches wide by 8 inches tall, and the screen it is filled entirely by the display pixels, then each pixel will be 1/96 of an inch wide and tall." I think the "it" in "... and the screen *it* is filled ..." is superfluous.

Andreas Wachowski  Jan 28, 2018 
PDF Page 130
1st par of section "Calculation values"

"The permitted operators are [...] multiplcation [...]." This should of course read "multiplication".

Andreas Wachowski  Jan 28, 2018 
Printed Page 144
2nd paragraph, before "Custom Values" heading

The text reads: "If you declare three values, the rules are the same as for four, except the last offset is set to be zero (no offset). Thus right 20px top is the same as right 20px top 0 ." Instead of saying "[...], except the last offset [...]" I would suggest using "[...], except the missing offset [...]" as using a value structured thusly: right top 20px; is perfectly valid based on the position values rules specified in the standard. I tested my value in both Firefox and Chrome with success.

Anonymous  Feb 10, 2018 
PDF Page 167
next to last paragraph

The paragraph above "How Weights Work" (starting with "What's really happening") includes an unfortunate hyphenation of "TimesBold": [...] Time- sBold [...]

Andreas Wachowski  Feb 10, 2018 
PDF Page 171
3rd paragraph

The paragraph beginning with "As you can see" has a phrase reading "[...] and then evaluate to the next-heaviest face, [...]". I believe that should have been "next-heavier".

Andreas Wachowski  Feb 10, 2018 
PDF Page 190
Figure 5-29

The sentence inside the figure lacks a word: Actual: "If there one thing" Expected: "If there is one thing"

Andreas Wachowski  Mar 17, 2018 
PDF Page 190
1st sentence in "The font-stretch Descriptor" section

The sentence starting with "Much as with ..." uses inconsistent formatting: "font-weight descriptor": "font-weight" is formatted monospace "font-stretch descriptor": "font-stretch" is not formatted monospace. It should be monospace, too.

Andreas Wachowski  Mar 17, 2018 
PDF Page 198
2nd paragraph

Typo in "Similarly, a font family that lacks an italic face an have one [..]" "an have one" should be "can have one"

Andreas Wachowski  Mar 17, 2018 
PDF Page 198
last paragraph

There's a typo in "You can block it for the whole document with html (font-synthesis: none;}" The opening parenthesis "(" should be an opening brace "{".

Andreas Wachowski  Mar 17, 2018 
PDF Page 200
Code example at end of page

The first CSS comment in the four declarations at the end of the page reads "/*no problem here */", where, for stylistic and consistency reasons, there should be a space between the opening comment tag "/*" and "no".

Andreas Wachowski  Mar 17, 2018 
PDF Page 216
1st line in section "The Height of Lines"

The last word on the line beginning with "The distance between lines" is lowercase, it should be uppercase (since it starts a new sentence). Actual: 'note that "height" here is with respect to ...' Expected: 'Note that "height" ...'

Andreas Wachowski  Mar 18, 2018 
PDF Page 218
Markup at end of page

The CSS at the end of the page begins with "body {line-height: 18px; font-size: 16px;}" But the markup afterwards uses different sizes: "<p>This paragraph inherits a 'line-height' of 14px from the body, as well as a 'font-size' of 13px.</p>" (Figure 6-11 on the following page is correct with regard to the CSS.)

Andreas Wachowski  Mar 18, 2018 
PDF Page 223
Figure 6-16

The figure contains "some text which is not tall", whereas the related markup reads "some text that is not tall".

Andreas Wachowski  Mar 18, 2018 
PDF Page 224
Figure 6-18

The visualization for "vertical-align: text-top" in figure 6-18 is not clear. I'd prefer it to be analogous to figure 6-17 and style the tall image with "vertical-align: middle" instead of the textup-class.

Andreas Wachowski  Mar 18, 2018 
PDF Page 233
Figure 6-29

The figure refers to classes named "one", "two", "three", etc., but the corresponding markup uses different class names ("emph", "topper", "old", etc.).

Andreas Wachowski  Mar 18, 2018 
PDF Page 234
Figure 6-30

There is an unnecessary line break in the markup, the word "beneath" stands by itself in a new line, followed by a line break and "it as well.</p>" (cf. figure 6-31)

Andreas Wachowski  Mar 18, 2018 
Printed Page 270
Caption Figure 7-14

"What happens when both the width and right margin are auto". "right margin" should be "left margin"

Bart  Dec 04, 2017 
Printed Page 293
Bottom HTML example and screenshot

The bottom screenshot shows “strong” elevated by 4px as in the top screenshot, yet the corresponding HTML code is missing the “vertical-align: 4px” from the top HTML code. Either code or screenshot should be corrected for both to match.

Christoph Nahr  Jan 18, 2018 
Printed Page 294
Both HTML code examples and screenshot

Same error as on p.293. Screenshot shows an elevated “strong” element yet HTML code does not contain any corresponding “vertical-align: 4px”.

Christoph Nahr  Jan 18, 2018 
Printed Page 313

The second and third table rows are misformatted. The long list of values should be on the left in the second row, and the value “block” here put in the third row should be on the right in the second row.

Christoph Nahr  Jan 18, 2018 
Printed Page 346
4th paragraph

Sentence "If there are two, the third is copied form the first..." should read "If there are two, the third is copied from the first..."

Greg Brain  Nov 30, 2017 
Printed Page 347
2nd paragraph

Sentence "There, we can see an element that's bee floated to the left..." should read "There, we can see an element that's been floated to the left..."

Greg Brain  Nov 30, 2017 
Printed Page 430
First line of last paragraph

"the image is attached ot the local" should read "the image is attached to the local" Also, should the next word in the sentence be "content" rather than "context"?

Alyce Hoggan  Aug 28, 2018 
Printed Page 598
bottom of page

in other words, if an element has an explicitly should be: In other words, if an element has an explicitly ("I" needs to be capitalized.)

Anonymous  Jul 19, 2018 
PDF Page 646
section heading: "Numeric flexing"

where: ====== * CSS - The Definitive Guide (4th edition) - book page: 646 - pdf page: 674 * Flexbox in CSS - book page: 102 - pdf page: 112 quote: ====== Numeric flexing When the value of the flex property is a single, positive numeric value, that value will be used for the growth factor, while the shrink factor will default to "0" and the basis will default to "0". The following two CSS declarations are equivalent: flex: 3; flex: 3 0 0; correction: =========== shrink factor will default to "1": flex: 3 1 0; caveat: ======= ..as indicated, shrink factor is moot when basis is "0".

Warren Bank  Jan 01, 2018 
PDF Page 781
first example "em"

generated content for "em" with "display: block" works. Tested in Firefox and Chrome https://codepen.io/anon/pen/xWxgOp

Anonymous  Mar 08, 2018 
PDF Page 1042
"box-shadow" index entry

The index entry for "box-shadow" only points to pages 886 and 887. The main section for those starts on page 485, which, I think, the index should (also, primarily) refer to.

Andreas Wachowski  Mar 17, 2018