A CSS course to turn you into a magician.

CSS2 standards introduced pseudo-elements with the : syntax.

CSS3 standards revised the pseudo-element syntax. According to CSS3 standards, pseudo-elements should now use :: instead of :.

I believe this book should use the :: syntax for pseudo-elements. This is in the interest of representing modern best-practices.

A counter-argument involves the wider browser-support of :. While CSS3 introduced the new :: syntax, it also required all user-agents to maintain backwards-compatibility with the : syntax. Therefore, : has wider-browser support.

One could argue that we should represent the syntax with wider browser-support.

I think this counter-argument is weak because

1. :: syntax is supported in IE 9+, Firefox 3.5+, Opera 12.1, Safari 5.1, and Chrome 9+
2. IE 8 has ~0.27% browser market-share. IE 6 and IE 7 have ~0.01%. Prior versions of FF, Opera, Safari, and Chrome have ~0%, ~0.01%, ~0.02%, and ~0.01% browser market-shares respectively.
3. Thus, the unsupportive browsers' cumulative market-share is negligible.
4. Using :: syntax is important for distinguishing pseudo-elements from pseudo-classes, which still use the : syntax as of CSS3.
5. The same backwards-compatibility argument can be made for using floats instead of flexbox or grid. Yet, the consensus is that technological progress is more important than backwards-compatibility. I believe the same principle applies here.

(Source for browser market-share data: caniuse.com)

Really trivial change that eliminates the div with "The Magic Of" ... this is just something that came to mind when I looked at your truncation examples, in that here's a case where not using ellipsis but letting a word get chopped off would be ok.

The overlay that be named "contextual-display" isn't work well in chrome(My Version 62.0.3202.89), cz "document.body.scrollTop" always return 0 in chrome.

a quick note to say thank you. Your chapter 2, Layout: "Grid with text-align justify" has clearly and succinctly just solved an issue I was grappling with... I look forward to any new chapters

Sorry for making an issue for this, but I've read the "magic of css" and I love it, for the first time I've read something about css that had sense.. and humour, yet I see that since several months there was no updates, so I was wondering if you will find time to write next chapters, or this project is RIP?..

If not and you are planning adding new chapters soon, I would love to translate the whole text into polish , with your permission, because I think that it is worth to spread the magic of css around the globe ;)

thank you for excellent work so far and good luck with eager.io!

Error: Element section (<section class="b">) not allowed as child of element rt in this context. Contexts in which element section may be used: Where flow content is expected. Content model for element rt: Phrasing content.

(Also, tangentially, just FYI, <rb> isn't currently part of HTML5; see also http://www.w3.org/html/wg/tracker/issues/172 )

While playing around with the 3 Pane App, depending on the size of my browser window / if I added too much content to the middle section, the content would get cut off and become unreadable beyond the bottom of the browser window.

I found adding the following css to the .middle selector fixed the issue.

.three-pane-app .bottom .middle { height: 100%; overflow: auto; }

however, if the point of the middle column was to not vertically scroll, then never mind :)

Thanks

_site/chapters/2-layout/index.html:

• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 136
• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 137
• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 138
• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 154

In the '...and not the human eye' section, skeuomorphism is misspelled.

Even more minor, the last sentence of the 'color tools' has a typo: 'you app' was used instead of 'your app'.

With the rise of Flexboxes and Grids. This resource is quickly being outdated, unfortunately. I think it's worth forking, maintaining or reinventing.

For example, reliable center alignment with two lines:

display: grid;
place-items: center;

Likewise, lots more potions with css grids would be amazing. CSS Framework-style abuse of inline-blocks for grid layout becomes unnecessary.

Rachel Andrew wrote an excellent book on the topic: https://abookapart.com/products/the-new-css-layout

I think an updated magic of css online resource that distils the same teachings would be invaluable.

The Mozilla bug referenced in the text is not about absolute positioning in the cells, but about relative positioning of the cells themselves. Shouldn't this reference be replaced with the link to the bug that is specifically about positioning in the cells?

Also, both these Mozilla bugs have been fixed in 2014. Shouldn't it be mentioned in the text?

Great project! One request:

Over the years, footers have really given people a heck of a time, myself included. Would you mind adding idiomatic footers to your app potions? I'm hoping there's an opportunity for some applied magic. :)

Thanks!

Given best practices in accessibility, it's probably a good idea to have keyboard focus states for your buttons. Pretty commonly forgotten by newbies, but makes a great deal of difference to those who rely on them.