The content is dated, using hacky techniques to work around deficiencies that no longer exist.
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.
> The content is dated, using hacky techniques to work around deficiencies that no longer exist.
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].
Still a wonderful resource, along with You Might Not Need jQuery. Fun fact: I interviewed with you for a front-end developer job in 2013(?) when you worked at a different company in Cambridge. Let's just say: I didn't get the job. You asked me about if I was familiar with X in CSS, and I said something like "well, I've never implemented it, but I've read about it." Your response stuck with me to this day, and I'll paraphrase: "I don't care if you've read about something 'til your face turned blue, you'll never actually learn something until you do it." It stung at the time, but it was the best kick in the ass I've ever received. I took your advice, and am now gainfully employed as a senior frontend developer. Thanks.
I wrote several versions of that sentence and ended up deciding on one of the stronger ones, because I feel that the float/absolute/ruby stuff is sufficiently terrible advice these days—and that flex is sufficiently valuable in understanding how things work. I confess I didn’t pay too much attention to chapters 1, 3, 4, 5 and 6 after that; with a little updating of some of the advice in chapter 3 they’re pretty sound.
I apologise for not being more specific in that sentence.
> CSS Grid is also an option in such cases for slightly more advanced layouts, though with less support.
"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.
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.
IE 11 is, however, still the current version of a mainstream browser. Just because Edge version numbers start at 12 doesn’t mean IE is gone. IE is still alive and kicking, so to speak, and commonly more widely-used than Edge. In my own work I can now ignore older versions of IE 11 (though even that liberty only started this year, because we had quite a few IE 9 users until earlier this year), but things must still be at least functional on IE 11.
Part of the magic of CSS to me is that it doesn't require javascript to work. But loading this site with localStorage disabled just shows a blank white page. So I guess not only is javascript required to render the page, but if it can't store some (what exactly?) data locally then it entirely fails without any kind of warning. Weird.
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.
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.