4 ms·

A bunch of those demos don't work on the Android browser. I also happen to know that calc() doesn't work on Safari 6.x, among others. I've been updating my web

A bunch of those demos don't work on the Android browser. I also happen to know that calc() doesn't work on Safari 6.x, among others. I've been updating my webapp software to use flexbox-based layouts, and I have to use a fair number of calc() styles to get the layout I want. (The newer css grid layouts would probably work better, but for now flexbox is the best available.) I've found that a combination of old and new flexbox syntax, Modenizr's flexbox detection, and javascript code that detects whether or not calc is available and runs a method to simulate all of my calc() styles when it isn't, is all necessary to give me good browser compatibility. IE7 and IE8 work surprisingly well, Safari 5 on Windows and 5+ on Mac work, Mobile Safari 5 on the original iPad 1 works, and Mobile Safari 6+ on newer iPads and iPhones work. Firefox, Chrome, and IE9+ work great as well, of course. It's a lot of additional effort, but it's worth it and definitely doable if you need the browser support and you want to use modern techniques.

mcot2 13y ago
The good news here is that IE11, Chrome, Firefox and Safari all support the newest Flexbox standard. It's pretty simple to bring in IE10 support with the older syntax. Forget about the older box layout in Firefox that was built for XUL and earlier implantations in WebKit and gecko. Those have some horrible and surprising bugs and incompatibilities.
recuter 13y ago
Wait, what? IE7 and IE8 work surprisingly well with Flexbox? I thought its only available starting with IE10, no?
- DougWebb 13y ago
  That'd be the surprising bit :) Modernizr's no-flexbox detection, plus javascript polyfills where needed, work very well. The polyfill is an amazingly useful invention.
  - recuter 13y ago
    What is this magical flexbox polyfill?! This isn't quite so simple as rewriting CSS gradient syntax to some defunct oldIE filters or something. Its a whole layout algorithm, I'd love to use this! Last I heard a flexbox polyfill was barely a concept. Please, my good man, link to the repo! Edit: I hoped the parent meant something new but I think he means https://github.com/doctyper/flexie https://github.com/doctyper/flexie "Flexie enables the 2009 Flexbox model. You're probably looking for the updated spec. There is currently no polyfill for the new spec." There's a bunch of caveats and it was finicky when I played with it. The beauty of flexbox is that you can throw complex layouts at the browser and it would handle it natively, this seems more for simple pages and didn't work out for me back when I tried it. :( Bah, humbug.
    - Samuel_Michon 13y ago
      http://modernizr.com/docs/#html5inie http://modernizr.com/docs/#html5inie
    - DougWebb 13y ago
      I may have overstated IE7 support; sorry. I just tested my site using IE10's developer tools to simulate older versions (which isn't a perfect simulation, but I don't have VMs available atm). IE10 renders perfectly. IE8 and IE9 in their respective Browser Mode and Document Standard Mode, are usable but not rendered the way they're supposed to be. Somewhat graceful degradation for those two. IE7 is rendered completely incorrectly, but the main functionality is still usable. For IE7-9, my UI design has a switch for one main feature that can be turned off, which would fix most of the brokenness. It's a side-panel navigation and tools area that's collapsible. Making it fixed, and also getting rid of a fixed footer, simplifies the layout a lot for the older browsers. I had looked at Flexie too. I think, because I'm making sure to include the 2009 syntax along with the current syntax everyplace I can, Flexie would allow IE7-9 to work better for me. Not perfectly, but better. That might've been my other option, besides turning the more advanced layout stuff off. But I just reviewed my code and I don't have Flexie anywhere, so I'm not currently using it. (This codebase is used to generate webapps for clients, so adding Flexie could be something that's done case-by-case if a client requires IE7-9 support.) BTW, here's an example. To make an element a Flexbox container, instead of using this: #elem { display: flex; flex-flow: row nowrap; } I have this: #elem { display: -ms-flexbox; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .no-flexbox #elem { display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; } To make things easier, all of my flexbox containers are defined in one place so I don't have to repeat all of that.
Samuel_Michon 13y ago
> I also happen to know that calc() doesn't work on Safari 6.x, among others. Works fine on Safari 6.x, you just need to add the prefix -webkit. http://caniuse.com/#feat=calc http://caniuse.com/#feat=calc
- DougWebb 13y ago
  Ah, good catch. It's 5.1 that doesn't support it at all. I was working on a new feature last week, and it looked great on Firefox and Chrome (my main dev browsers), but both my boss and UX designer use Macbooks so when I asked them to check it out they both said it's broken. It was because I was working quickly and didn't put in all of the backward compatibility hacks yet. So, my memory was a bit fuzzy about which versions supported what, exactly.

mcot2 13y ago

The good news here is that IE11, Chrome, Firefox and Safari all support the newest Flexbox standard. It's pretty simple to bring in IE10 support with the older syntax. Forget about the older box layout in Firefox that was built for XUL and earlier implantations in WebKit and gecko. Those have some horrible and surprising bugs and incompatibilities.

recuter 13y ago

Wait, what? IE7 and IE8 work surprisingly well with Flexbox? I thought its only available starting with IE10, no?

DougWebb 13y ago
That'd be the surprising bit :) Modernizr's no-flexbox detection, plus javascript polyfills where needed, work very well. The polyfill is an amazingly useful invention.
- recuter 13y ago
  What is this magical flexbox polyfill?! This isn't quite so simple as rewriting CSS gradient syntax to some defunct oldIE filters or something. Its a whole layout algorithm, I'd love to use this! Last I heard a flexbox polyfill was barely a concept. Please, my good man, link to the repo! Edit: I hoped the parent meant something new but I think he means https://github.com/doctyper/flexie https://github.com/doctyper/flexie "Flexie enables the 2009 Flexbox model. You're probably looking for the updated spec. There is currently no polyfill for the new spec." There's a bunch of caveats and it was finicky when I played with it. The beauty of flexbox is that you can throw complex layouts at the browser and it would handle it natively, this seems more for simple pages and didn't work out for me back when I tried it. :( Bah, humbug.
  - Samuel_Michon 13y ago
    http://modernizr.com/docs/#html5inie http://modernizr.com/docs/#html5inie
  - DougWebb 13y ago
    I may have overstated IE7 support; sorry. I just tested my site using IE10's developer tools to simulate older versions (which isn't a perfect simulation, but I don't have VMs available atm). IE10 renders perfectly. IE8 and IE9 in their respective Browser Mode and Document Standard Mode, are usable but not rendered the way they're supposed to be. Somewhat graceful degradation for those two. IE7 is rendered completely incorrectly, but the main functionality is still usable. For IE7-9, my UI design has a switch for one main feature that can be turned off, which would fix most of the brokenness. It's a side-panel navigation and tools area that's collapsible. Making it fixed, and also getting rid of a fixed footer, simplifies the layout a lot for the older browsers. I had looked at Flexie too. I think, because I'm making sure to include the 2009 syntax along with the current syntax everyplace I can, Flexie would allow IE7-9 to work better for me. Not perfectly, but better. That might've been my other option, besides turning the more advanced layout stuff off. But I just reviewed my code and I don't have Flexie anywhere, so I'm not currently using it. (This codebase is used to generate webapps for clients, so adding Flexie could be something that's done case-by-case if a client requires IE7-9 support.) BTW, here's an example. To make an element a Flexbox container, instead of using this: #elem { display: flex; flex-flow: row nowrap; } I have this: #elem { display: -ms-flexbox; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .no-flexbox #elem { display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; } To make things easier, all of my flexbox containers are defined in one place so I don't have to repeat all of that.

Samuel_Michon 13y ago

> I also happen to know that calc() doesn't work on Safari 6.x, among others. Works fine on Safari 6.x, you just need to add the prefix -webkit. http://caniuse.com/#feat=calc http://caniuse.com/#feat=calc

DougWebb 13y ago
Ah, good catch. It's 5.1 that doesn't support it at all. I was working on a new feature last week, and it looked great on Firefox and Chrome (my main dev browsers), but both my boss and UX designer use Macbooks so when I asked them to check it out they both said it's broken. It was because I was working quickly and didn't put in all of the backward compatibility hacks yet. So, my memory was a bit fuzzy about which versions supported what, exactly.