5 ms·

The Magic of CSS

104 points by reimertz 9y ago

LYAalways 9y ago
STILL MAGIC. Holds up remarkably well.
LYAalways 9y ago
STILL MAGIC. It hold up remarkable well.
andrewingram 9y ago
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.
chrismorgan 9y ago
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.
- masklinn 9y ago
  > 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.
  - cageface 9y ago
    IE still only supports an older, deprecated syntax, doesn't it?
    - chrismorgan 9y ago
      Say obsolete, not deprecated. It was all experimental (hence the prefixes), and got changed before being finalised. See https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid and https://caniuse.com/#feat=flexbox 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.
    - masklinn 9y ago
      IE is not a modern browser. ~30 Chrome versions have been released since IE11.
      - chrismorgan 9y ago
        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.
vinsingh0289 9y ago
there are more such magic of css.
bolololo1 9y ago
It doesn't mention flex at all...
Helloworldboy 9y ago
Might want to fix on safari, not very magical
- joseluisq 9y ago
  Yep, it's one of the big issues.
jordanlev 9y ago
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.

The Magic of CSS

104 points by reimertz 9y ago

LYAalways 9y ago

STILL MAGIC. Holds up remarkably well.

LYAalways 9y ago

STILL MAGIC. It hold up remarkable well.

andrewingram 9y ago

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.

chrismorgan 9y ago

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.

masklinn 9y ago
> 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.
- cageface 9y ago
  IE still only supports an older, deprecated syntax, doesn't it?
  - chrismorgan 9y ago
    Say obsolete, not deprecated. It was all experimental (hence the prefixes), and got changed before being finalised. See https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid and https://caniuse.com/#feat=flexbox 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.
  - masklinn 9y ago
    IE is not a modern browser. ~30 Chrome versions have been released since IE11.
    - chrismorgan 9y ago
      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.

vinsingh0289 9y ago

there are more such magic of css.

bolololo1 9y ago

It doesn't mention flex at all...

Helloworldboy 9y ago

Might want to fix on safari, not very magical

joseluisq 9y ago
Yep, it's one of the big issues.

jordanlev 9y ago

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.