Is it really necessary to include all of the fallbacks for flex derived properties?

Question

I normally declare my flex properties in a simple manner:

.flex-item {
    display: flex;.
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}

All of the fallbacks for this are:

.flex-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;.
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

Repeated over hundreds of elements, this increases the file's size by a lot. Is this really, really necessary, assuming:

I care that as many people get to experience the site.
I care about bandwidth.

Since _a lot_ can be done w/o Flexbox, do that and the problem will go away being a lot less elements needing it. Also, consider reusing the classes properly and that will as well decrease the size — Asons, Nov 26 '17 at 18:29
Furthermore, a website does not _have_ to look exactly the same for all users...and especially the ones with older browsers, who already know this :) — Asons, Nov 26 '17 at 18:30
@LGSon Great input! I wanted to stay away from Flexbox because I thought it was unsupported, fast forward a year or so, according to netmarketshare / w3 statistics and caniuse, flexbox is safe to use for the majority of the users and I believe these matter. Though my question was really if I have to use all of these crazy prefixes. — Daniel Moss, Nov 26 '17 at 18:33

score 0 · Answer 1 · answered Nov 26 '17 at 17:11

0

Yes it's necessary for all kinds of browsers, but you can try the autoprefixer of postCSS if you don't want to write them everytime by your own http://postcss.org/

answered Nov 26 '17 at 17:11

Luca Spezzano

371
2
14

I'm using: https://autoprefixer.github.io/ But this doesn't really answer my question of whether this is necessary GIVEN my requirements, which are a possible tradeoff. – Daniel Moss Nov 26 '17 at 17:11

score 0 · Answer 2 · answered Nov 26 '17 at 17:17

If you care that as many people get to experience the site as intended as possible (i.e. with flex layout), even the fringe users who use somewhat outdated versions of browsers that use old versions of flexbox with behavior that isn't 100% compatible with the current standard, then you don't really have a choice.

If you're worried about bandwidth, consider alternative layout models (such as float layout or table layout) as fallbacks.

Is it really necessary to include all of the fallbacks for flex derived properties?

2 Answers2