[Solved] Flexbox with fallback

[ImStumped]

Now that flexbox has begun to be accepted across all major browsers, I’m happily getting to know it and love it. However, IE9 and lower being an issue still leaves me wanting to provide a fallback.

Currently the cleanest way I’ve figured out, without risking missing a CSS override someplace is to create two SCSS files, which are using the Modernizr classes .flexbox and .no-flexbox

layout-flexbox.scss .flexbox { .page-wrap { /* vendor specific flexbox stuff, etc / display: flex; } .main-sidebar { / vendor specific flexbox stuff, etc / flex: 1; } / etc */ }

layout-no-flexbox.scss .no-flexbox { .page-wrap { width: 100%; } .main-sidebar { float: right; } /* etc */ }

I have the non layout CSS in a separate file that works for both cases. I’m loading both layout stylesheets though.

Is this an efficient way to do this, or do any of you have any improved methods for a fallback?

[ImStumped]

Thank you for the reply. I went the route you did with a hybrid of a Modernizr feature. I learned that if you add the no-js class to html, it will remove the no-js if it runs.

So I was able to do exactly what you were suggesting, except I can apply the default style with the no-js and no-flexbox classes for both cases.

I’m probably being more pedantic about the CSS than is needed, but it would nag me if I didn’t.

Here is the gist of it

layout-no-flexbox.scss

.no-js,
.no-flexbox {
  .page-wrap {
    width: 100%;
  }
  .main-sidebar {
    float: right;
  }
  /* etc */
}

[rolfens]

Remember CSS fallback:

.myEl {
/* for older browsers /
display: table;
/ older browser will not understand flex and ignore it.
Newer browsers wont */
display: flex;
}

It’s limited but something it’s all that is needed (sometimes not, though, then you may need javascript, CSS tricks, conditional comments, etc.)

[Author]

Posts