1

For my responsive site I need to support IE9 meaning that I cant use felxbox yet. However ive got a breakpoint at 500px targeting phones. Is it safe to use flexbox within this media query? The mobile browser support seems good.

This is a new site so I dont have any existing analytics data to make this decision with.

Evanss
  • 23,390
  • 94
  • 282
  • 505

3 Answers3

2

It's safe to use Flexbox at any breakpoint with supported browsers, as long as you use all the necessary old prefixes, please do. Android & iPhone browsers that don't support flexBox are essentially dead.*

*Except that Opera Mini doesn't (quite yet) have FlexBox support in 2014, and is used by 250 million users, which is a higher market share than IE9 on older Windows Phones 7. Probably a dying breed at this point, IE 9 Mobile now only account for 0.29% of the mobile market. However having a table fallback solution to a Flexbox layout is still rather important, especially if your site cater to the Asian or African continents or Eastern Europe for Opera Mini, or if still need to target IE8 or IE9 users.

Know that technically you can use Flexbox with a IE8-9 compatibility fallback using table + table cel/row. It depends on your context, and as to which Flexbox features are being used... If you don't use flexWrap nor reordering, a table fallback should work reasonably well on IE8-9, even on mobile.

Here is an example production site I did using flexBox + table fallbacks, working in IE8+, Opera 11 and Opera Mini (Presto). Opera Mini gives a rather crappy layout, but at least it's mobile compatible.

Update: Opera Mini servers now support Flexbox at Opera Presto 2.12 levels which is unprefixed.

hexalys
  • 5,177
  • 3
  • 31
  • 56
0

Not perfectly safe, no. There are some situations where a desktop or notebook browser might be smaller than 500px wide.

Patrick Szalapski
  • 8,738
  • 11
  • 67
  • 129
  • If its chrome or firefox this would be fine. AM I right in thinking the only issue would be (as always) IE users? – Evanss Dec 10 '14 at 11:31
  • 1
    Yes, it sounds like that is your only concern. Might be best to detect IE9 or lower and put up a "Your browser might not support this site" message to be safe. – Patrick Szalapski Dec 10 '14 at 16:07
0

One suggestion could be to use IE conditional statement to include the appropriate CSS, but this approach might fail in IE10 as IE conditional include support is removed. The safest bet is to use feature detection library like moderniser and then write your css accordingly.

If IE9 and mobile browser class is added to the body by moderniser you can write your media query accordingly to apply felxbox styles only when the browser is not IE desktop and have fallback css acoordingly

Deepu
  • 1,241
  • 1
  • 11
  • 24