Errata

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
Other Digital Version Optionality pseudo-classes
HTML code sample

The boolean attribute `required` has been used in wrong manor in the code `<input type="email" placeholder="optional email address" required="false">`.

> The values "true" and "false" are not allowed on boolean attributes.
-- html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes

Anonymous  Jun 04, 2023 
Other Digital Version The :has() pseudo-class
CSS code for :has() usage section

In code

```css
header:has(nav, form.search) {…}
/* headers containing either nav or a form classed search */
```
It is rather inclusive OR, as it also works if both `nav` and `form.search` are present.

Onkar  Jun 04, 2023 
Other Digital Version The Cascade
The 8 point cascade rule list

a. The statement "This is reversed for rules marked !important, where user agent styles override author styles, and both ovedrride reader styles."
The important reader styles are not overridden by important author's styles.

b. Only text is hard to wrap head around. An illustration, something like this would help:
Normal: author > reader > browser
!important: browser > reader > author
Or
!browser > !reader > !author > author > reader > browser

c. Typo in "ovedrride".

Onkar  Jun 04, 2023 
Other Digital Version revert-layer
The example code

The example and demonstration doesn't use `revert-layer` value.

Onkar  Jun 04, 2023 
Other Digital Version Keywords, Strings, and Other Text Values
URLs section, relative path section

In the code
```
@import url(http ://web.waffles.org/toppings/special/toppings.css);

@import url("../special/toppings.css");
```
The last line is incorrect it needs to be:
@import url("../toppings/special/toppings.css");

Also include following to the code:
@import url("/toppings/special/toppings.css");

Onkar  Jun 04, 2023 
Other Digital Version Height and Width
Figure 6-11. Sizing elements’ width

In the figure width of second and third paragraphs are not the same as first one.

Onkar  Jun 04, 2023 
Other Digital Version Handling Content Overflow
3rd paragraph

Regarding paragraph:
"If overflow is set to hidden, the element’s content is clipped at the edges of the element box. With the hidden value, there is no way to get at the parts of the content that are clipped off."

There is a way to get the text/content. Select 2-3 characters and press `shift+arrow down` keys the content scrolls down and you can select it.
If you set `contain: paint` then it doesn't scroll but you can still select it and copy it.

Onkar  Jun 04, 2023 
Other Digital Version Flex item margins and alignment
CSS code

In code `.D, .I {margin-top: 1em;}` doesn't match with the figure 11-25.
It needs to be `.D, .I {margin-bottom: 1em;}`.

Onkar  Jun 04, 2023 
Other Digital Version Opening Gaps Between Flex Items
Code samples

`.gallery {display: flex; flex-wrap: wrap; row-gap: 15px; padding-block: 15px;}`
The CSS syntax highlighter is not consistent it can't handle multi word properties properly: i.imgur.com/cByO8oj.png
In dark mode it gets worse.

Anonymous  Jun 04, 2023 
Other Digital Version Flex Item Features
Figure 11-37. Five flex items in an aside

Regarding text below the figure, "The text nodes containing “some text” and “and more text” are wrapped in anonymous flex items, represented in Figure 11-37 by the dashed boxes (the dashes having been added for illustrative purposes) with no background."

In actual the figure doesn't have dashed boxes for anonymous items, there is only one dashed border around entire container.

Onkar  Jun 04, 2023 
Other Digital Version The flex-shrink Property
last paragraph

In following sentence there is double negation:
"If all three flex items contained non-wrappable text or media 300 pixels or wider, the none of the three flex items would not shrink,"

Did you mean "If all three flex items contained non-wrappable text or media 300 pixels or wider, none of the three flex items would shrink"?

Onkar  Jun 04, 2023 
Other Digital Version The flex-shrink Property
Second last paragraph

Typo in "The remaining 146 pixels of negative space would then be distributed the among the 4 remaining shrink".

Anonymous  Jun 04, 2023 
Other Digital Version Proportional Shrinkage Based on Width and Shrink Factor
3rd paragraph

Regarding the paragraph
"If this were a flex-grow situation, we would simply divide 250 pixels by 5, allocating 50 pixels per growth factor. If we were to shrink that way, we would get flex items 200, 550, and 100 pixels wide, respectively. But that’s not how shrinking actually works."

The 550 value should be 450. As 200+450+100 = 750.

Onkar  Jun 04, 2023 
Other Digital Version Auto-filling tracks
Last 2 paragraphs

"It’s not possible to auto-repeat multiple fixed track sizes,"

Following works in Chrome and Firefox at moment:
div {
border: 1px dashed gray;
display: grid;
grid-template-columns: repeat(auto-fill, 5px 50px);
}

div span:nth-child(2n+1) {
background-color:wheat;
}
<div>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
</div>

Onkar  Jun 04, 2023 
Other Digital Version Placing Elements in the Grid
code for "Figure 12-35, for an idea of how this works"

In following rule
```css
.three {
grid-row-start: 9;
grid-column-start: col-A -2;}
```
It needs to be `grid-row-start: 4`

Onkar  Jun 04, 2023 
Other Digital Version Aligning and Justifying Individual Items
second last code sample

In code:
```
.exel {align-self: last-baseline;}
```

value should be `last baseline`
```
.exel {align-self: last baseline;}
```

Onkar  Jun 04, 2023 
Other Digital Version Distributing Grid Items and Tracks
first code block

In code line:
```
.grid {display: grid; padding: 0.5em; margin: 0.5em 1em; inine-size: auto;
```

there is typo in `inine-size`.

Onkar  Jun 04, 2023 
Other Digital Version Border collapsing
Figure 13-9. Manipulating border widths, styles, and colors leads to some unusual results

Regarding explanation text:
"The 13-pixel bottom silver border of cell 3-3 not only overrode the top border of cell 4-3, but it also affected the layout of content within both cells and the rows that contain both cells."

The cell 3-3(#r3c3) has only 1px borders. It is actually 4-3(#r4c3) that has 13px top border.

Onkar  Jun 04, 2023 
Other Digital Version Font-face Descriptors
Last paragraph

Regarding the suggestion "One of the best known is Font Squirrel’s @Font-Face Kit Generator."
The kit generator is no longer available they took down the feature due to legal concerns.

Onkar  Jun 04, 2023 
Other Digital Version Font Stretching
Figure 14-17

In the code above for the figure font "Futura" is not used. It is the same code for "Vardana".

Onkar  Jun 05, 2023 
Printed Page Page 606
Third paragraph

The text says
'let's change the rule to the following'
but there is no CSS rule in the text to which 'the following' refers.

Ron Mitchell  May 19, 2024 
Printed Page 58/0
CSS before Fig. 12-35 and CSS in 2nd last para

In class definition .three
grid-row-start: 9;
should be
grid-row-start: 4;
in both instances of .three on the page.

Ron Mitchell  May 17, 2024 
Printed Page 60
End of page

I'm new to Css and I'm reading your book.
It is well done and clear and I appreciate it.

I'm at the third chapter and I'm quite confused on the :first-child:last-child example
Maybe is my comprehension that's wrong but this example wont work on the html given just before.

I find that kind of troubling, but again I may have misunderstand the chapter.

Catia  Oct 05, 2023 
Printed Page 109
1st paragraph

"sixth rule" should be "fifth rule"

Raymond Shanley   Feb 20, 2024 
PDF Page 428
Last paragraph above the inset box

In the last paragraph above the inset box. Instead of "top, bottom, left and right", shouldn't the last part of the paragraph be "top, right, bottom and left"?

And the "#popup..." examples, 2nd paragraph below the inset box seem to show the correct usage.

Pls clarify.
Thank you

Andy Chen  Dec 23, 2023 
PDF Page 430
On the max-width and max-height box

Shouldn't percentage value be "Refer to the width of the containing block" ?

Instead of what's there, "Refer to the height of the containing block" ?

Should it be width, instead of height?

Andy Chen  Dec 23, 2023 
Printed Page 507
4th paragraph

"The fourth scenario...this results in the flex items' final widths being 175, 250, and 425 pixels, respectively."

The last width should be 325 pixels, not 425.

Ron Mitchell  Apr 26, 2024 
Printed Page 516
1st para, line 2

"...we would get flex items 200, 550, and 100 pixels wide..."
should be
"...we would get flex items 200, 450, and 100 pixels wide..."

Ron Mitchell  Apr 27, 2024 
Printed Page 517
1st paragraph

"...in the first example...all content wraps over four lines."

Figure 11-47 in fact shows content wrapping over 6, 5 and 5 lines in the respective items. (I take 'wrapping over' to count the first line; perhaps the author does not.)

Also,
"In the second example, the first flex item...wraps the content over (roughly) half the number of lines."
In the figure, the first item wraps over two lines, and the other items over seven and eight lines. Two is not "roughly half" of seven or eight! (When I run the code into my Firefox, the line counts are 2, 8, and 9.)

I'm really enjoying the book, by the way :-)

Ron Mitchell  Apr 27, 2024 
Printed Page 536
5th paragraph, starting "flex: <number>"

"It also sets both the shrink factor and the flex basis to 0".

In fact, as confirmed at the bottom of page 539, the shrink factor is set to 1 in this case (although it says there that the shrink factor is actually "moot").

Ron Mitchell  May 12, 2024 
Printed Page 561
Figure 12-15

This isn't actually an error in the printed book, but in the sample source code at github, in grid-flexible-minmax.html.
The illustration in the printed book is correct, but running the sample source code produces a misleading picture. The "1fr" column appears to be about 35px wide (instead of zero) and the "500px" column appears to be 465px wide (instead of 500px). In fact the column widths are correct; it's the dimension labelling which is creating the misleading impression. Unfortunately I can't post a screenshot to demonstrate.

Ron Mitchell  May 16, 2024 
Printed Page 584-585
CSS at foot of page 584 and illustration and explanation on page 585

The CSS shown at the foot of page 584 for items .box 4 and .box 5 does not create the output shown in Fig. 12-38 on page 585.
.box4 {grid-column: 4; grid-row: span 2 / 5;}
.box5 {grid-column: 5; grid-row: span 4 / 5;}

The CSS in the github code for Fig. 12-38 /does/ create the illustrated effect in Fig. 12-38, but this is only because the CSS in github has been altered to
.box4 {grid-column: 4; grid-row: span 4 / 5;}
.box5 {grid-column: 5; grid-row: span 6 / 5;}

In both cases the placing of the boxes can be explained simply by counting back the span length from the given end row-line (5), with no account at all taken of 'having to start within the explicit grid'. If there really is an issue about starting to count within the explicit grid, I think it needs a different example to illustrate it. If not, the explanatory text on page 585 needs revision.

Ron Mitchell  May 18, 2024 
Printed Page 602
'Using Subgrids' paras 4,5,6 and following figures 12-55 to 12-58

The CSS on p.602 at 'First we add the following CSS:' has
grid-template-columns: repeat(15,1fr);
and the accompanying text talks about '15 columns separated by 14 gutters'.
However, the following figures all show 16 columns, and the CSS on github used to generate them has
grid-template-columns: repeat(16,1fr);

Ron Mitchell  May 19, 2024 
Printed Page 951
3rd paragraph

"This happens because paused is a valid animation name." should be "This happens because paused is not a valid animation name."

Evan Lai  Dec 22, 2023