Alex Rivera | Logout

Fallback for old (and annoying) browsers for a creative use of "Flex-Box"

Asked 2011-05-10T15:45:55.647
10

I'm not a big fan of questions that provide some criteria without reasoning for a solution to be acceptable but in this case, I have one too: No JavaScript for compatibility, except Modernizr. (The reason is that they slow the page down too much.)

I used the new and fancy CSS3 flex-box to create a menu, which displays some extra links, if there is some extra space. You can see a (hopefully) working demo here.

The big question is: How can I provide a fallback for the (cough)annoying(/cough) Internet Explorer and the old browsers without using the somewhat famous FlexieJS library? Is this achievable with just css2, other than setting a maximum percentage width for the menu (ul)s (which does not really work)? Could you at least point me in the right direction? Thanks!

UPDATE

I gave another try but still couldn't figure it out on my own. Any help is really appreciated! Thanks a lot =) You can find my attempt here.

html internet-explorer css
Edit
Report

1 Answer

10

I know this is an old thread, but I thought it deserved a proper answer to what you were asking for. Since you are using Modernizr, we can default to inline-block, but detect when flexbox is available and override (using good ol', or good new, progressive enhancement). To get this to work, you much switch #admin-links and #common-links. Below is the code, and it works in IE6+. A demo is also available.

HTML

<div id="wrapper">
    <div id="navigation">
        <ul id="admin-links">
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a href="#">Important Link</a>
            </li>
        </ul>
        <ul id="common-links">
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <p>Hello world.</p>
        <p>This is supposed to be content.
            But only thing we care is the menu (Sorry about that.)
        </p>
        <p>Page width decreases, some items magically disappear.<br />
            Which is <strong>intended</strong>.<br />
            You can do that by pulling the frame bars around.
        </p>
    </div>
</div>
answered 2011-12-31T08:47:14.200

Your Answer