The Magic of CSS
adamschwartz.co
adamschwartz.co
Using ruby for content reordering is a ghastly idea, quite apart from Firefox mangling it. The best way to do this nowadays is flexbox’s `order` property. Browser support is very good (in the IE world, it was introduced in version 10). Do bear in mind that this is purely a visual reordering; screen readers, tab indexes and so forth still operate on DOM order.
CSS Grid is also an option in such cases for slightly more advanced layouts, though with less support. Flexbox and Grid share most of their magic functionality (e.g. align-content et al. apply to both); most things that you can do with CSS Grid can be done with flexbox as well. (When people say “CSS Grid lets us do this magic thing!” my first action is to rewrite it in flexbox; I can almost always do it without much thought, and only occasionally is it not possible at all—and those are the cases I wish people would focus on!)
The other layout examples use absolute positioning also, and they’d be much nicer and more flexible with flexbox (or grid, if you’re OK with the reduced support). Doing so lets you adjust the layout much more easily for varying viewports, not need to hardcode header dimensions and so forth.
And flexbox would help the Layout chapter enormously.
"Younger" is probably a better way to put it than "less": all modern browsers support the Grid, but only in very recent versions (Firefox 3 versions back , Chrome 5 versions back, Safari 2 versions back-ish) while Flexbox has much older (and debugged) support going back multiple years.
See https://caniuse.com/#feat=css-grid and https://caniuse.com/#feat=flexbox for information about browser support.
I recommend using autoprefixer so that you can write the final syntax and have it be translated into the obsolete, -ms- prefixed syntax used by IE 10 to Edge 15. (I like to use it via postcss-cssnext, letting you use a bunch of other nice modern and up-and-coming things as well.)
Note also that IE 10 and 11 have quite a few potentially severe bugs with their grid and flexbox support (you may or may not run into them; I have a couple of times). See the Known issues tabs on caniuse.
While I certainly agree that a lot has changed in the 4 years since Magic was authored, I think this statement is a little strong. I’d argue that chapters 1, 4, 5, and 6 hold up quite well and that 2 and 3 still contain useful information for newcomers to CSS—despite the absence of flex.
A chapter on flex is long overdue, no doubt, and chapters 2 and 3 should be written with this in mind. I’ll definitely get to it at some point, but I’d also be happy to collaborate with the community if anyone were interested in submitting a first draft [1].
I apologise for not being more specific in that sentence.
However, it's really talking about the magic of the layout and styling model. I know this feels like a nitpick, but in the era of CSS-in-JS (still a terrible name), I feel it's worth being more specific.