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. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".
The following errata were submitted by our customers and approved as valid errors by the author or editor.
Color Key: Serious Technical Mistake Minor Technical Mistake Language or formatting error Typo Question Note Update
Version |
Location |
Description |
Submitted By |
Date Submitted |
Date Corrected |
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")."
Note from the Author or Editor: Change:
Similarly, the input element is also replaced—by a radio button, checkbox, or text input box, depending on its type.
to:
Similarly, the input element can also be replaced—by a radio button, checkbox, or text input box, depending on its type.
|
Yasir |
Mar 08, 2019 |
Jun 21, 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
Note from the Author or Editor: Change:
To successfully load an external stylesheet, `link` must be placed inside the `head` element but not be placed inside any other element.
to:
To successfully load an external stylesheet, `link `should be placed inside the `head` element, though it can also appear in the `body` element.
|
Anonymous |
Nov 28, 2018 |
Jun 21, 2019 |
Printed |
Page 22
last line of code |
"color-depth" is not a valid media feature.
To work as described on the next paragraph, instead of:
@import url(print-color.css) print and (color), screen and (color-depth: 8);
should be:
@import url(print-color.css) print and (color), screen and (min-color: 8);
Note from the Author or Editor: Both instances of 'color-depth' in Chapter 1 should be changed to 'min-color'. Thus:
<link href="print-color.css" type="text/css"
media="print and (color), screen and (min-color: 8)" rel="stylesheet">
...and:
@import url(print-color.css) print and (color), screen and (min-color: 8);
|
Alfred Myers |
Jun 04, 2019 |
Jun 21, 2019 |
ePub |
Page 32
4th paragraph |
(covered in later in this book).
change to:
(covered later in this book)
|
don matthews |
Mar 24, 2019 |
Jun 21, 2019 |
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.
Note from the Author or Editor: Yeah, agreed. Corrections made via Atlas.
|
AMS |
Jan 11, 2018 |
Jun 21, 2019 |
PDF |
Page 35
example below 2nd paragraph |
Wrong:
@media (min-resolution: 960dpi) {...}
Correct (for consistency with the previous line):
@media (min-resolution: 96dpi) {...}
|
Agt the Walker |
May 14, 2017 |
Nov 17, 2017 |
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.
Note from the Author or Editor: Agreed. Changes submitted via Atlas.
|
AMS |
Jan 12, 2018 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
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."
Note from the Author or Editor: Corrections made via Atlas.
|
Samir Saeedi |
Feb 13, 2018 |
Jun 21, 2019 |
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.
Note from the Author or Editor: Edits made via Atlas.
|
Samir Saeedi |
Feb 13, 2018 |
Jun 21, 2019 |
PDF |
Page 78
2nd paragraph |
"... to be absolute URLS, ..." --> "... to be absolute URLs, ..." (lowercase "s" in URLs)
|
Andreas Wachowski |
Jan 28, 2018 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
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)
Note from the Author or Editor: Correction made via Atlas.
|
Andreas Wachowski |
Jan 28, 2018 |
Jun 21, 2019 |
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)
Note from the Author or Editor: Correction made via Atlas.
|
Andreas Wachowski |
Jan 28, 2018 |
Jun 21, 2019 |
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?
Note from the Author or Editor: Agreed. Please do whatever one does to prevent this!
|
Andreas Wachowski |
Jan 28, 2018 |
Jun 21, 2019 |
Printed |
Page 106
5th paragraph |
It states that inherit is covered in the previous chapter; it's not, it's covered in the next chapter.
Note from the Author or Editor: Change the sentence:
Another way to get the same result is to use the value `inherit`, covered in the previous chapter.
to:
Another way to get the same result is to use the value `inherit`, covered in the next chapter.
|
Anonymous |
Apr 24, 2019 |
Jun 21, 2019 |
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.)
Note from the Author or Editor: Correction made via Atlas.
|
Andreas Wachowski |
Jan 28, 2018 |
Jun 21, 2019 |
Printed |
Page 110
first paragraph |
... is matched by four of the rules - :link, Lfocus, :hover and :active ...
Lfocus shoud be :focus
Note from the Author or Editor: This is definitely a typo.
Lfocus should be changed to :fous
|
Evertjan Garretsen |
Apr 09, 2021 |
|
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 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
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.
Note from the Author or Editor: Corrections made via Atlas.
|
Anonymous |
Feb 10, 2018 |
Jun 21, 2019 |
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 [...]
Note from the Author or Editor: Agreed, but that’s outside my scope of power. Whatever one does to prevent such things, please do!
|
Andreas Wachowski |
Feb 10, 2018 |
Jun 21, 2019 |
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".
Note from the Author or Editor: Sure, why not. Correction made via Atlas.
|
Andreas Wachowski |
Feb 10, 2018 |
Jun 21, 2019 |
Printed |
Page 179
1st paragraph |
I don't think you mean "Figure 5-12"; I think you mean Figure 5-15.
|
Anonymous |
May 08, 2019 |
Jun 21, 2019 |
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"
Note from the Author or Editor: Corrected figure submitted 2019-06-17.
|
Andreas Wachowski |
Mar 17, 2018 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
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 "{".
Note from the Author or Editor: Corrected via Atlas.
|
Andreas Wachowski |
Mar 17, 2018 |
Jun 21, 2019 |
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".
Note from the Author or Editor: I mean, yes, that would be consistent, although what was presented is not invalid—but I updated it in Atlas anyway.
|
Andreas Wachowski |
Mar 17, 2018 |
Jun 21, 2019 |
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" ...'
Note from the Author or Editor: Corrected via Atlas.
|
Andreas Wachowski |
Mar 18, 2018 |
Jun 21, 2019 |
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.)
Note from the Author or Editor: Correction submitted via Atlas.
|
Andreas Wachowski |
Mar 18, 2018 |
Jun 21, 2019 |
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".
Note from the Author or Editor: Change the code block to use the text “some text which is not tall”.
|
Andreas Wachowski |
Mar 18, 2018 |
Jun 21, 2019 |
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.).
Note from the Author or Editor: Change code block to:
p.one {text-decoration: underline;}
p.two {text-decoration: overline;}
p.three {text-decoration: line-through;}
p.four {text-decoration: blink;}
p.five {text-decoration: none;}
|
Andreas Wachowski |
Mar 18, 2018 |
Jun 21, 2019 |
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)
Note from the Author or Editor: I would say, bring the text "it as well.</p>" up to the previous line in the text block.
|
Andreas Wachowski |
Mar 18, 2018 |
Jun 21, 2019 |
PDF |
Page 270
2nd paragraph from bottom |
Change "first" with "last".
Sentence starts with:
The first of these attribute selectors ...
Though based on examples from Table 15-1 this should be:
The last of these attribute selectors...
Note from the Author or Editor: The reader is correct.
|
Pavel Savenkov |
Dec 18, 2016 |
Nov 17, 2017 |
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 |
Jun 21, 2019 |
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.
Note from the Author or Editor: Corrections made in Atlas. Please check for line-breaking in the produced PDFs; some of the code example lines may have to be reworked to avoid strange text wrapping.
|
Christoph Nahr |
Jan 18, 2018 |
Jun 21, 2019 |
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”.
Note from the Author or Editor: Corrections made in Atlas. Please check for line-breaking in the produced PDFs; some of the code example lines may have to be reworked to avoid strange text wrapping.
|
Christoph Nahr |
Jan 18, 2018 |
Jun 21, 2019 |
Printed |
Page 313
Table |
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.
Note from the Author or Editor: The reporter is correct. I don’t see how or why this happened, since the table markup looks correct. Production/editorial, any idea how this came to be?
|
Christoph Nahr |
Jan 18, 2018 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
Printed |
Page 456
2nd Paragraph |
2nd sentence should have "that" instead of "than".
So "This means than orange, green and blue will be evenly distributed between the explicitly defined positions to either side." should read "This means that orange, green and blue will be evenly distributed between the explicitly defined positions to either side."
|
Alejandro Franco |
Apr 03, 2020 |
Jun 12, 2020 |
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 |
Jun 21, 2019 |
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 |
Jun 21, 2019 |
PDF |
Page 669
3rd paragraph |
In the 3rd paragraph,
“In cases…minxmax() can be quite useful.”
"minxmax()" should be "minmax()".
|
Charles |
Mar 28, 2020 |
Jun 12, 2020 |
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
Note from the Author or Editor: Time overcomes all limitations. Corrections submitted via Atlas.
|
Anonymous |
Mar 08, 2018 |
Jun 21, 2019 |
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.
Note from the Author or Editor: The index is wrong. I don’t know how that is fixed, but it should be!
|
Andreas Wachowski |
Mar 17, 2018 |
Jun 21, 2019 |
|