Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox alternative for IE9

I have developed a website with Chrome initially (easiest to design for) but now am getting to IE support model.

That being said, I started with IE11 and made the necessary changes for the quirky differences between IE & Chrome. But now I am stepping down the IE versions. I was able to get 90% of the webpages to display correctly with CSS for IE10. But now most of the CSS elements that I have for these two browsers, are for the most part irrelevant for IE9.

I would like to keep from needing to have multiple browser specific style sheets, if possible.

First problems is converting IE10+ implementation of the flexbox model of CSS.

Current Implementation for the flexbox container:

div#navContainer{
    display: flex; //Current browsers (IE11, Chrome, etc)
    display: -ms-flexbox; //IE10 implementation
}

div#TeamsSection {
    text-align: center;
}

div.NavSection {
    margin: 0px 7px;
    padding: 4px 0px 0px 0px;
}

div#teams {
    margin: 0px;

    select {
        margin: 0px;
    }
}

HTML:

<div id="navContainer" class="float-left">
    <div id="LogoSection" class="NavSection">
        <div id="Logo">
            <img src="Images/Logo.png" />
        </div>
    </div>
    <div id="TeamsSection" class="NavSection">
        <label>Select a Team:</label><br />
        <div id="teams"></div>
    </div>
    <div id="UserSection" class="NavSection hidden">
        <label>Select a User:</label><br />
        <div id="requestor"></div>
    </div>
</div>

I know IE9 does not implement Flexbox, so please don't insult the research I have already done. I need an equivalent implementation that will allow me to change the HTML as little as possible.

like image 822
GoldBishop Avatar asked Jun 23 '14 17:06

GoldBishop


People also ask

Does ie10 support flexbox?

The two browsers you should still keep in mind for cross-browser compatibility are: Internet Explorer 10, which implemented the display: flexbox version of the specification with the -ms- prefix.

Does flexbox work in Safari?

Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents.

Is flexbox gap supported in all browsers?

As you see, the gap works perfectly for both CSS grid and flex - on the browsers that support them. However, for the non-supporting browsers like old versions of Chrome and Safari, the result will look like the figure below.


3 Answers

Use modernizr to detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox, no-flexbox, and flexbox-legacy to the html element, so in your styles you can use:

    .container {
        display: flex;
    }
    .no-flexbox .container {
        display: table-cell;
    }

I highly recommend reading through Zoe Gillenwater's (@zomigi) presentations on the subject, particularly Leveling Up With Flexbox (Smart Web Conference - September 2014)

  • slide 21: horizontal navigation spacing > display: inline-block;
  • slide 62: pinning elements without flexbox > display: table-cell;
  • slide 70,71: aligning forms fallbacks
  • slide 88,91: example with and without flex order

Also, in her presentation CSS3 Layout, there are a few good sideby side previews of layouts with and without flexbox:

  • slide 73: Using inline-block with flexbox: horizontal form
  • slide 79: Using inline-block with flexbox: horizontal navigation

Some of takeaways for me:

  • browser support ie10+ is pretty good caniuse
  • use auto-prefixr to handle browser prefixes
  • use modernizr to provide fallbacks
  • "flexbox is not all or nothing" @zomigi
like image 144
ptim Avatar answered Oct 18 '22 02:10

ptim


I like the above answer but you don't have to use modernizr. You could simply use table layout for ie9 and flexbox for others.

.container {
    display: table-cell; // ie9
    display: flex;       // others
}
like image 35
Scott Romack Avatar answered Oct 18 '22 03:10

Scott Romack


One year later, this solution, using JavaScript to adjust the layout in older browsers, seems interesting => https://github.com/10up/flexibility

Almost 2000 stars on Github but the last commit was 3 months ago, I don't know if it still actively maintained.

like image 9
Michael Rambeau Avatar answered Oct 18 '22 02:10

Michael Rambeau