Errata

CSS: The Definitive Guide

Errata for CSS: The Definitive Guide, Fourth Edition

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

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  Jan 21, 2022
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