Flexbox Patterns: Build user interfaces with CSS flexbox(flexboxpatterns.com)
flexboxpatterns.com
Flexbox Patterns: Build user interfaces with CSS flexbox
http://www.flexboxpatterns.com
22 comments
Flexbox is great, but honestly I'm not going to spend any time trying to master it until IE supports it well. I know there are workarounds with conditional styling rules and other fallbacks, but that just means I would need to write more code instead of less. Hopefully IE11 will patch some of the bugs and then when IE 8+9 finally drop to a small enough percentage of share in another year or so, it will be time to jump on the flexbox bandwagon.
Every time I run into this or look up something on caniuse[1], I get a (most likely irrational) annoyance that we're comparing things like IE9 which came out in 2011 (predating the official flexbox spec) against modern versions of Chrome and Firefox. I think the way caniuse's interface is set up, IE9 currently lines up next to Firefox 44 and Chrome 49.
My though process goes something like: Is it because Internet Explorer is sucky? Partially. Is it because people/companies aren't updating? Absolutely. Is it because Microsoft made it hard to update? Partially.
I can't help but think that if a lot of people/companies didn't update their iPhones or Linux desktops for 5+ years, we'd be seeing the same issue and blaming Apple for being so shitty.
BTW, looks like all the flexbox bugs in IE11 have been fixed in Edge[2]. I doubt that IE11 will get patched.
[1] http://caniuse.com [2] https://github.com/philipwalton/flexbugs
My though process goes something like: Is it because Internet Explorer is sucky? Partially. Is it because people/companies aren't updating? Absolutely. Is it because Microsoft made it hard to update? Partially.
I can't help but think that if a lot of people/companies didn't update their iPhones or Linux desktops for 5+ years, we'd be seeing the same issue and blaming Apple for being so shitty.
BTW, looks like all the flexbox bugs in IE11 have been fixed in Edge[2]. I doubt that IE11 will get patched.
[1] http://caniuse.com [2] https://github.com/philipwalton/flexbugs
You could always use a polyfill: https://github.com/10up/flexibility
I understand what you're saying about making more work for yourself (when a big selling point of flexbox is that it will simplify your layout code). But, there are some situations where flexbox lets you achieve things you can't otherwise do. (Some vertical centering situations; making equal height sibling divs; etc)
I tend to wait a long time before I take up new browser features, but as of 2016 I've decided that flexbox has enough support. As long as I have some kind of fallback for IE8-10 (usually "display: inline-block" or some basic floating/clearing does the trick).
I tend to wait a long time before I take up new browser features, but as of 2016 I've decided that flexbox has enough support. As long as I have some kind of fallback for IE8-10 (usually "display: inline-block" or some basic floating/clearing does the trick).
I've just been using the meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
More Info: https://stackoverflow.com/questions/6771258/whats-the-differ...
Works fine for me in new projects as long as there's no need for those conditionals and specific legacy code.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
More Info: https://stackoverflow.com/questions/6771258/whats-the-differ...
Works fine for me in new projects as long as there's no need for those conditionals and specific legacy code.
I use it for stuff that would be impossible to do without javascript. For me, I'm willing to accept graceful degradation and the technical debt involved in making it graceful outweighs the technical debt (and bugginess) in using javascript for layout.
Of course, there's other approaches, such as removing design elements that would require this in the first place.
We all have our own tolerances for this type of stuff, and I'm probably more of an early adopter than most, but I find that lately flexbox has been starting to help my code more than hurt it.
Of course, there's other approaches, such as removing design elements that would require this in the first place.
We all have our own tolerances for this type of stuff, and I'm probably more of an early adopter than most, but I find that lately flexbox has been starting to help my code more than hurt it.
Is Microsoft still putting that much effort into IE? I thought they were transitioning to Edge. Regardless, I'm in the same boat as you. I have to target IE11, and my friend got me really hyped about flexbox until the cross-browser support came to light.
This is a great tutorial, but why obfuscate the CSS as SCSS? In most cases here there’s essentially nothing gained.
Hey, author here. You make a great point. I'll update the examples to be in CSS. Thanks!
How exactly is SCSS an obfuscation of CSS?
'Obfuscation' might be taking it a bit far, but demonstrating a CSS feature in anything other than vanilla CSS is, in my opinion, a really poor choice.
It's like having an explanation of a JavaScript feature...in TypeScript.
It's like having an explanation of a JavaScript feature...in TypeScript.
I'll happily agree. I was only pointing out that obfuscation of CSS was not happening.
Since you _italicized_ I guess I better answer!
The tutorial is ostensibly about flexbox, not about CSS precompilation. So, if the you happen not to know SCSS, then it’s obfuscated.
Er, then it’s _obfuscated_.
The tutorial is ostensibly about flexbox, not about CSS precompilation. So, if the you happen not to know SCSS, then it’s obfuscated.
Er, then it’s _obfuscated_.
Except it's not, because even though SCSS may alter the presentation of some of the rules, it does not render them unintelligible to the reader.
My italics were to call out you specifically saying SCSS was obfuscating the CSS, when it isn't. None of the styles rules shown are made incomprehensible to the reader.
My italics were to call out you specifically saying SCSS was obfuscating the CSS, when it isn't. None of the styles rules shown are made incomprehensible to the reader.
& + & {
margin-left: 5px;
}Alright, a fair enough example of making this rule confusing for someone who doesn't know SCSS to immediately intuit what element this rule is being applied to. But that still doesn't mean the CSS rule itself is obfuscated (anyone familiar with CSS will know this is applying a left margin of 5px to something). Far different from, say, something like:
wsze2NfA3sjX0eKampvYIZbUISElk+AhNvIs2iYnISsh/fP1MjvHODcrODXA68T5xgcMyDAwPwQ5DQ8WDAfNBAkLFxPYwwsfCwge
I get it, you don’t like my choice of adjective.
Not quite. Obfuscation means something, particularly within the realm of software development. It's not like you chose a synonym, and I'm over here being an asshole, pedantically quibbling over why my choice of synonym is the better choice. Obfuscating something in code means rendering it un-parseable by humans.
There's a huge difference between SCSS and obfuscated CSS.
There's a huge difference between SCSS and obfuscated CSS.
Christ, I get it.
Flexbox Froggy: A game for learning CSS flexbox
https://news.ycombinator.com/item?id=10652909
https://news.ycombinator.com/item?id=10652909