Skip to main content

Forums

This topic contains 3 replies, has 3 voices, and was last updated by  rolfens 3 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #164818

    ImStumped
    Participant

    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?

    #164838

    shaneisme
    Participant

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

    #164898

    ImStumped
    Participant

    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 */
    }
    
    #209904

    rolfens
    Participant

    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.

icon-link icon-logo-star icon-search icon-star