Skip to main content


  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #164818

    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?


    This reply has been reported for inappropriate content.

    I’ve used the method of adding classes a la Modernizr many times, but I’ve always kept page defaults without counting on JS to fire off.

    So basically, make page defaults without flexbox (eg. don’t use .no-flexbox) as if JS weren’t going to fire, and then overwrite down the cascade with the .flexbox parent specificity :)


    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


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

    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.)

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.