
The Magic of CSS - reimertz
http://adamschwartz.co/magic-of-css/
======
chrismorgan
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.

~~~
adamschwartz
> 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].

[1]: [https://github.com/adamschwartz/magic-of-
css/pulls](https://github.com/adamschwartz/magic-of-css/pulls)

~~~
dlo83
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.

------
Helloworldboy
Might want to fix on safari, not very magical

~~~
joseluisq
Yep, it's one of the big issues.

------
jordanlev
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.

------
andrewingram
This looks like a good resource.

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.

------
LYAalways
STILL MAGIC. It hold up remarkable well.

------
LYAalways
STILL MAGIC. Holds up remarkably well.

------
bolololo1
It doesn't mention flex at all...

------
vinsingh0289
there are more such magic of css.

