CSS Secrets

Errata for CSS Secrets

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
Printed, PDF Page xxx
Both code blocks

In **both** code blocks in this page, each `90deg` should be `0deg`.

cssmagic  May 23, 2016 
PDF Page 10
third but last list entry, calc()

Link for CSS Values & Units Level 3 is missing:

Jørgen W. Lang  May 27, 2016 
Printed Page 13
first text paragraph

The colored box before the example color lightgoldenrodyellow is almost invisible. Maybe give it a small border or choose another color as example.

Gerhard Großmann  Jan 29, 2016 
PDF Page 20
3rd paragraph from from the end (3rd item in 2nd list on the page)

"The function calc() from CSS Values & Units Level 3 not only is very powerful for performing calculations, but also very well supported, even today."
the words "CSS Values & Units Level 3" should probably be in bold type.

E.Sh.  Oct 18, 2015 
Printed Page 30
outline solution code example

outline width should be 5px, not 15px.

Here's a demo:

Alberto Vena  Nov 29, 2015 
PDF Page 59
First code block

background-size: 2*$size 2*$size;
"background-size" should probably be in bold magenta type

E.Sh.  Oct 28, 2015 
Printed Page 59
last code block

Because of the line break in the code block there should be a backslash after “height="100"”, too.

Gerhard Großmann  Jan 29, 2016 
PDF Page 65
Code Block

linear-gradient(90deg, #655 41px, transparent 0);

should be:

linear-gradient(90deg, #655 23px, transparent 0);


background-size: 41px 100%, 61px 100%, 83px 100%;

should be:

background-size: 83px 100%, 61px 100%, 41px 100%;

In the online dabblet example the code is correct.

Anonymous  Dec 17, 2015 
Printed Page 65
bottom comment

"Relatively prime numbers have no common divisors"
=> Relatively prime numbers have no common divisors except 1

"a prime number is relatively prime with any other number"
=> PRIME NUMBER and RELATIVELY PRIME are two different concepts. It has no necessary connection about them.

Peng  Jun 13, 2016 
Printed Page 66
last link in last text paragraph

Dudley Storey’s website has now the adress instead of The old link is routed to the new one, so this is a minor problem.

To make typing the adress easier it’s also possible to omit the article title in the link and end at after the article number:

Gerhard Großmann  Jan 29, 2016 
Printed, PDF Page 71
The 2nd code block

`0` should be `0 0`. Because `0` of background-position means `0 50%`. (Originally submitted by @GalliLiu)

cssmagic  Aug 06, 2017 
PDF Page 81
1st paragraph in "Quarter ellipses"

"Following a similar thought process as before, we can notice that to create a quarter ellipse, one of the corners needs to have a 100% radius both horizontally and vertically, and the other four will have no rounding."
"four" should be replaced with "three" (one corner with 100% and the other three with 0, together four).

E.Sh.  Nov 02, 2015 
Printed, PDF Page 81
Last Paragraph

I suppose that "1/8th" should be "1/8" or "eighth".

cssmagic  Nov 11, 2015 
PDF Page 87
the code block part

transform: skew(45deg); should be transform: skew(-45deg);

sanqian  Jul 08, 2017 
Printed Page 99
Last code block / figure 3.29

The color declarations are different in the code (#58a and #655) for easier debugging. However, in figure 3.29 only #58a is shown as a gradient color.

Gerhard Großmann  Jan 29, 2016 
Printed, PDF Page 99
First code block

In the two `linear-gradient` code line, `#58a` and `#655` need to be exchanged for each other to match Figure 3.28. (Submitted by @ArvinTung)

cssmagic  Aug 18, 2016 
Printed Page 104
penultimate text paragraph

The colored box before the color example #58a shows the wrong color (#655?). It should be blue instead.

Gerhard Großmann  Jan 29, 2016 
Printed, PDF Page 119
First paragraph

"Yes, a negative `animation-delay` is not only allowed by the specification, but is very useful for cases like this:" cannot link up the following quotation of spec. The last part of this sentence ("... but is very useful for cases like this") should be removed, because those use cases have been moved to the side note of "Tip!".

cssmagic  Nov 11, 2015 
PDF Page 119
html example at end of page

Percentages as text content are missing.

Jørgen W. Lang  Apr 03, 2016 
PDF Page 131
before last paragraph

Missing headline "The Solution" just before last paragraph?

Jørgen W. Lang  May 29, 2016 
Printed Page 135f
codeblocks for figure 4.6 and 4.7

The figures don’t show the box-shadows specified in the code examples. With “box-shadow: 2px 2px 10px rgba(0,0,0,.5);” there a shadow on the top and the left side should be visible. If the code shall fit the figures it should say “box-shadow: .1em .1em .1em rgba(0,0,0,.5);” as the online example. (Four places to correct: caption to figure 4.6 and all code blocks on page 136).

Gerhard Großmann  Jan 29, 2016 
PDF Page 139
Last paragraph

This sentence:
"The first filter we will apply is sepia(), which gives the image a desaturated orange-yellow tint, with most pixels having a hue of around 35–40."
should probably refer figure 4.10

E.Sh.  Nov 11, 2015 
Printed Page 140
both code blocks

The filter sepia() seems to need a value to work, it should be sepia(1). That’s also true for the online example at

Gerhard Großmann  Jan 29, 2016 
Printed Page 147
last paragraph

In the code examples the background color is hsla(0,0%,100%,.3), thus white with 30% opacity. In the text it says “being 25% opaque”.

Gerhard Großmann  Jan 29, 2016 
Printed, PDF Page 149
First paragraph of "The solution" section

In this sentence "Provided that our element has a `background-attachment` of `fixed`...", "our element" should be "<body> element".

cssmagic  Oct 04, 2015 
PDF Page 156
Last paragraph

"Their main premise is usually adding two triangles on the top-left
corner: ..."
it should probably be "top-right corner"; in the previous paragraph is was stated that "usually the top-right or bottom-right one" get this style.

E.Sh.  Nov 13, 2015 
PDF Page 159
Last paragraph before Play!

"As you can see in Figure 4.28, this finally gives us a nice, flexible, minimalistic rounded corner."
instead of "rounded corner" it should be "folded corner".

E.Sh.  Nov 13, 2015 
Printed, PDF Page 160
Figure 4.31

In this figure, the last two formulas are incorrect. `sin` and `cos` need to be exchanged for each other. (Originally submitted by @peacelee)

cssmagic  Aug 18, 2016 
Printed, PDF Page 179
Side note

If there was something like ":nth-line()", it should be a "pseudo element", just like "::first-line".

cssmagic  Sep 19, 2015 
Printed, PDF Page 180
First line

In this sentence " each stripe accounts for two lines", instead of "each stripe", "each tile" might be more proper, because readers may consider one tile as two stripes.

cssmagic  Sep 19, 2015 
PDF Page 183
The only code snippet

In the code snippet we use "tab-size: 4;", but on the figure the code is "displayed with a tab width of two characters".
From the text in the following paragraph - "As you can verify in Figure 5.13, it now looks much easier to read." - it becomes clear, that the figure should reflect the value used in the code snippet. Therefore, in the code snippet it should be changed to "tab-size: 2;".

E.Sh.  Nov 20, 2015 
Printed, PDF Page 196
The brown box

The section of this brown box should be titled "Future", instead of "Trivia".

cssmagic  Sep 18, 2015 
Printed, PDF Page 236
The only code block

The code block misses this declaration `content: '';`. (Originally submitted by @OfficialYoungX)

cssmagic  Oct 01, 2018 
PDF Page 243
Play example

(Play!) example needs explicit background (color) in Safari 9.1 (OS X Mavericks).


dialog {
background: white;

solves the problem.

Jørgen W. Lang  May 07, 2016 
Printed Page 257
1st code block

slider.insertBefore(img, div);

should be

slider.insertBefore(div, img);

Otherwise console throws error: "Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

Tested on Google Chrome Version 49.0.2623.110 m

Vero Leon  Apr 07, 2016 
PDF Page 259
bottom of page

The Play! example is missing. :(

Jørgen W. Lang  May 09, 2016 
PDF Page 269
whole page

IMHO the text contained the table would better reflect the change to table-layout: fixed. Now there is a contradiction between content and its former self-explaining charcter on page 267.

Jørgen W. Lang  May 10, 2016 
PDF Page 279
2nd paragraph, 1st sentence

"Notice that if we comment out the width declaration..."

s/width/max-width/; # 2 times

Jørgen W. Lang  May 11, 2016 
Printed, PDF Page 289
Figure 7.23

The character ♥ is not rendered properly.

cssmagic  Oct 24, 2015 
Printed, PDF Page 289
Figure 7.23

The bottom part of this figure might be wrong. There can't be space on the bottom of viewport.

cssmagic  Nov 11, 2015 
Printed Page 289
Figure 7.23

The footer shown there does not stick to the bottom. It should, since the content is long enough.

Lea Verou  Feb 18, 2016 
PDF Page 291
Tip at the lower right corner of the page

Currently the tip says:

"when using flex: 2 for main and flex: 1 for footer, the height of the footer would be twice the height of the content”.

Shouldn’t it be the opposite: "the main will receive 2 pixels for every pixel that is received by footer”?

Or do I misunderstand the sentence?

Jurgen Van de Moere  Nov 04, 2015 
Printed, PDF Page 297
First line

"...We want the timing function of the main direction to be the accelerating one (ease-out) and the one of the reverse direction to be decelerating (ease-in)..." In this sentence, `ease-out` and `ease-in` should be exchanged for each other. (Submitted by @406298102 )

cssmagic  Mar 03, 2017 
Printed, PDF Page 308
First paragraph

"cartoon moving" should be "cartoon movie"?

cssmagic  Oct 24, 2015 
Printed, PDF Page 308
Last line

If an animated GIF is set "global palette", then all frames share the 256 color palette; but, if it's set "local palette", then each frame has its own 256 color palette. However, local palettes usually cause bigger file size.

cssmagic  Oct 24, 2015 
PDF Page 311
Sentence after “The what…",

Sentence beginning with "As we saw in the previous chapter…": should probable begin with "As we saw in the previous secret…"

Jørgen W. Lang  May 19, 2016 
PDF Page 335
figure 8.34

Unfortunately uses a different, much less fun, 404 page as of May 2016.

Jørgen W. Lang  May 23, 2016