Floats, Flexbox or CSS Grid in 2018 for cross browser compatibility...

The company I am working with is about to update their web based software for our clientele. Currently the web site is using bootstrap 3.3 even though most of the site doesn't use bootstrap at all haha... We are moving away from the framework due to it being a little too loaded and not fitting our current needs. We ran some stats on our visitors/clients and to our (no) surprise they aren't exactly the type of people who update their software often. We still have users using IE 9 and IE 11. This is mainly due to their business's IT infrastructure and often is out of our their control.

In a meeting we were discussing laying out the design. With Bootstrap 3.3 it uses Floats. The rest of our site uses Floats. We have frontend devs advocating for use of CSS Grid with Flexbox fall back. However, it doesn't make sense to me to use BOTH methods to produce the same result when we can just use Flexbox.

However, my concern is if we choose Flexbox to move forward we may be creating a potential problem with our clients who can't upgrade their browsers. Flexbox doesn't seem to have strong support in IE which still holds a piece of the browser market share. Especially for us.

I'm interested in hearing others thoughts to weigh in on this. My choice would be to continue to use Floats knowing that it will be the most supported. Thoughts?

@deathshadow

 

You rang?

If you're worried about legacy clients, you have three options.

1) Forget BOTH flex and grid. Just don't go there. For the most part this is entirely viable and only about 10% more code than using those. Display:table for things like 100% min-height layout can get you back to IE8, and then let if fail gracefully. In terms of the columnar aspects of the layout you're not doing a blasted thing we haven't been able to do for two decades.

2) Let it gracefully degrade to a single column in legacy IE, including IE11.

3) do it grid, do it flex, fallback to single column.

REALLY if you're worried about IE 9 and 10, it's highly likely you have IE7 users being misreported and/or mis-tracked too. AT that point i'd go with option 1 and forget the fancy new stuff. It should NOT be a significant amount more code. This is what I do for my clients in the medical field, for whom accessibility and legacy support (sick people are POOR!) are important.

To the point I have clients for whom IE 5.x is still a concern just because some accessibility aids are still running Windows CE 4.x/earlier. Remember, IE6 didn't make it to windows CE until 2008. Then M$ wonders why their reputation in the mobile space is shit.

REALLY if classic float layouts and display:table cell for the two or three things it can't do is any 'harder' or significantly more code than need be, you need to kick your front-end developers and/or ignorant artists under the DELUSION they're 'designers' right square in the junk. In that case it's HIGHLY likely somebody's doing it wrong.

But then the same can be said of bootcrap, where if you THINK it's easier, or saving you time, or resulting in having to write less code, you weren't using vanilla HTML or CSS properly in the first damned place.