Errata

In the last example on this page:

[[Alpha || Baker || Cray ], ]{2,3} and Delphi

The explanation begins with:

Two to three of Alpha, Baker, and Delta must be followed by and Delphi.

I believe the explanation should read:

Two to three of Alpha, Baker, and Cray must be followed by and Delphi.

The description in that section:
If you use an incorrect property or value in a declaration, the whole rule will be ignored.

may should be:

the declaration will be ignored.?

The error:
"In the case where all three properties are set to something other than auto—or, in CSS terminology, when these formatting properties have been overconstrained—then margin-right is always forced to be auto. This means that if both margins and the width are set to 100px, then the user agent will reset the right margin to auto. The right margin’s width will then be set according to the rule that one auto value “fills in” the distance needed to make the element’s overall width equal that of its containing block. Figure 7-11 shows the result of the following markup:"

explanation:
If all properties are defined and none of them are "auto", the user agent will not reset the right margin to "auto".

The source code is missing the closing </tr> tag

Note from the Author or Editor:
I can’t tell if this is correct or not, since apparently he’s talking about the actual source markup in the ePub version.

@import url(../special/toppings.css);

should be

@import url(../toppings/special/toppings.css);

div {width: 50vh; height: 33vw; background: gray;}

should be

div {width: 50vw; height: 33vw; background: gray;}


"A div! It is half the width of the viewport and a third the height." from https://github.com/meyerweb/csstdg4figs/blob/master/04-values-and-units/css4_0407.html

div {height: 50vh; width: 33vh; background: gray;}

should be

div {height: 50vw; width: 33vh; background: gray;}

From https://github.com/meyerweb/csstdg4figs/blob/master/04-values-and-units/css4_0407.html

The div's width should be half of "width" and div's height should be third of "height".

There is needless space at the end. So,

local("SwitzeraADF-Regular ")

should be

local("SwitzeraADF-Regular")

The stylesheet below lacks quotation marks here and there:

h1 {font-family: 'SwitzeraADF Extra Bold, sans-serif;}
h2 {font-family: 'SwitzeraADF Bold, sans-serif;}
h3 {font-family: 'SwitzeraADF Bold', sans-serif;}
h4, p {font-family: SwitzeraADF Regular, sans-serif;}
small {font-family: 'SwitzeraADF Light', sans-serif;}

It should be like this as recommended in this book:

h1 {font-family: 'SwitzeraADF Extra Bold', sans-serif;}
h2 {font-family: 'SwitzeraADF Bold', sans-serif;}
h3 {font-family: 'SwitzeraADF Bold', sans-serif;}
h4, p {font-family: 'SwitzeraADF Regular', sans-serif;}
small {font-family: 'SwitzeraADF Light', sans-serif;}

body {font-family: Verdana;}

should be

body {font-family: Futura;}

the font-feature-settings descriptor
->
the font-feature-settings property

padding-inline-end is repeated three times. It should read padding-inline-end, border-inline-end, margin-inline-end.

According to https://www.w3.org/TR/css-text-3/#text-indent-property

"Gives the amount of the indent as a percentage of the block container’s own logical width."

The text-indent property's percentage value refers its own block(text's containing block), not its parent element.

In justified text, both ends of a line of text are placed at the inner edges of the parent element

->

In justified text, both ends of a line of text are placed at the inner edges of the its element

The CSS specification has at least one <color> value type while the book uses all <length> value type.

In

Chapter 7 (Basic Visual Formatting) - Section 2 (Altering Element Display) - Subsection (Using auto) - Paragraph 3:

it says:

"In the case where all three properties [margin-left, margin-right and width] are set to something other than auto—or, in CSS terminology, when these formatting properties have been over-constrained—then margin-right is always forced to be auto. This means that if both margins and the width are set to100px, then the user agent will reset the right margin to auto. The right margin’s width will then be set according to the rule that one auto value 'fills in' the distance needed to make the element’s overall width equal that of its containing block."

Unfortunately I couldn't replicate this behavior on any browser. Is this claim still true for newer browsers? I would be happy if you could have a look at it.

The following line of text :
"For top-to-bottom languages, writing-mode: horizontal-tb is in effect"

should be replaced by :
"For top-to-bottom languages, writing-mode: vertical-rl is in effect"

The caption beneath figure 12-10 should be :
"The four values of flex-direction property when writing mode is vertical-rl"

It says: "The only difference in the CSS between this and Figure 12-35 is the height of the flex container. Here, the flex containers have been reduced to a height of 240 pixels, so as to create flex containers not tall enough to encompass all their flex lines"

But the height of the flex container in Figure 12-36 is exactly enough to encompass all the flex lines. Figure 12-35 and Figure 12-36 is almost the same(12-36 has one more example than 12-35). I suppose 12-36 should replace 12-35, and 12-36 itself should be corrected to what it looks like in the example code files.

The last paragraph says:
In the third example, with no shrink factor, the text doesn’t wrap at all and the flex items overflow the container by quite a bit.

But in the third example, the shrink factor is set to 0 actually. And as the book says, "when omitted in the shorthand flex property value or when both flex and flex-shrink are omitted, the shrink factor defaults to 1", in which the text will wrap to fit the flex container. So to be more accurate, "with no shrink factor" shoule be "with shrink factor set to 0".

The following calculation :

--------------------------
280px + 995px + 480px = 1615px
(0.5 × 280px) + (1 × 995px) + (1 × 480px) = 1235px
X = 1235px ÷ 1615px = 0.7647
--------------------------

should probably be :

--------------------------
280px + 995px + 480px = 1755px
(0.5 × 280px) + (1 × 995px) + (1 × 480px) = 1615px
X = (1755px - 520px) ÷ 1615px = 0.7647
--------------------------

This calculation is incorrect:

"Thus, if the browser window is 900 pixels wide, the side columns will each be 175 pixels wide, and the center column 550 pixels wide."

The flex basis for the nav and aside elements is 200px, and for the article element it is 600px (note that the text reads "The main element, on the other hand, has these styles" when it should say "The *article* element, on the other hand ...")

The negative space for a 900 pixel wide window will be 900px - (200px + 600 px + 200px) = -100px, i.e. 100 negative pixels. The shrink factor for the nav and aside are both 1, and for the article it's 2. Thus the shrink factor = -100px/(1*200px + 2*600px + 1*200px) = -1/16 = -6.25%.

So the shrinkage for the nav and aside is 1*(-1/16)*200px = -12.5 px each, and for the article it's 2*(-1/16)*600px = -75px, for a total shrinkage of 2*(-12.5px) + (-75px) = -100px, as expected.

Finally, the nav and the aside will each be 200px - 12.5 px = 187.5 pixels wide (not 175 pixels), and the article (i.e. the center column) will be 600px - 75px = 525 pixels (not 550 pixels).

I tested this out in dev tools, and this is indeed the result when the window is 900 pixels wide.

// Quote:
You might assume that the flex: 0 item with the text “flex: 0” in the third and fourth examples will be zero pixels wide, like in the fourth and fifth examples

// Correction
You might assume that the flex: 0 item with the text “flex: 0” in the third and fifth examples will be zero pixels wide, like in the fourth example

Thus, to place an element into the bottom-right grid cell of a defined grid, regardless of how many columns or rows it might have, you can just say this:
grid-column-start: -1;
grid-row-start: -1;

it should be

grid-column-start: -2;
grid-row-start: -2;

OR

grid-column-end: -1;
grid-row-end: -1;

#grid {display: grid;
grid-rows: repeat(4, 2em); grid-columns: repeat(5, 5em);}

should be:

#grid {display: grid;
grid-template-rows: repeat(4, 2em); grid-template-columns: repeat(5, 5em);}

.three {
grid-row-start: 9;
grid-column-start: col-A -2;}

should be:

.three {
grid-row-start: 4;
grid-column-start: col-A -2;}

This code :

#sidebar { grid-row-start: 2; grid-row-end: 4;
grid-column-start: leftside / span 1;
}

should be replaced by :

#sidebar { grid-row-start: 2; grid-row-end: 4;
grid-column-start: leftside;
}

or maybe :

#sidebar { grid-row-start: 2; grid-row-end: 4;
grid-column-start: span 1;
}

.box04 {grid-column: 4; grid-row: span 2 / 5;}
.box05 {grid-column: 5; grid-row: span 4 / 5;}

should be

.box04 {grid-column: 4; grid-row: span 4 / 5;}
.box05 {grid-column: 5; grid-row: span 6 / 5;}

It seems that in these two pages, the code, the figure and the relative description don't match each other. The following correction is based on the figure 13-38 on page 695.

______

The last paragraph, Page 695:

box4 is where...It spans back three lines.

should be:

box4 is where...It spans back four lines.

______

The second paragraph, Page 696:

Similarly, box5 ends on line 5, and spans back four lines, which means it starts on row-line –2.

should be:

Similarly, box5 ends on line 5, and spans back six lines, which means it starts on row-line –2.

Probably, this code :
--------------------------
code[type="BASIC"] line::before { counter-increment: linenum }
content: counter(linenum 10) ": ";}
--------------------------

Should be replaced by :
--------------------------
code[type="BASIC"] line::before { counter-increment: linenum 10}
content: counter(linenum) ": ";}
--------------------------

The 4th paragraph introduces the "not" keyword for media queries. It says:
For example, not (color) and (orientation: landscape) and (min-device-width: 800px) means that...

But in fact, the "not" keyword must be used with a media type, so the example above is not valid syntax. (I tested it in Chrome.) It should be used like: not screen and (color) and blahblah.

This syntax is also mentioned in MDN docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#logical_operators