CSS Fall-backs are a waste of time?

Let's say css flexbox or css grid for example. We know that these are not fully supported across older browsers so to make sure our code displays correctly we need to use fallbacks. Doesn't it make sure to just use the code that works across all versions of browser to avoid code bloating and time-wasting?

For example:

.heading-text {
  text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
}

Code (CSS):

Wouldn't it just make sense to go. Instead of using flex to center than adding a fall-back:

.heading-text{
  text-align:center;
}

Code (CSS):

This might be a bad example but you get the point.

 

I still refuse to use css properties that are not supported by all browsers. Someday, maybe. Call me old-fashioned. We have people on DP still using XPs, Vistas. Some old timers will never update their browsers. I don't know why but folks in the US love their old machines.

 

Some reasons:

1) Not cost effective either due to lack of funds or cannot justify the expense
2) If everything works as wanted, why go through the hassle of upgrading
3) Not all old programs will work on newer machines and often there are no upgrades
4) Every upgrade comes with infuriating issues that are hard/impossible to solve

Basically it comes down to: If it ain't broken, DON'T FIX IT.

 

My primary program that I use every day is a copy of FoxPro Mac 2.6b that I bought in the 1990's before MS bought FoxPro. I have a copy of VFP Mac 3.0, but I only bought it to get the Language Reference Manual which was never updated from FPM to VFPM.

MS never provided an upgrade path for FPM and neither did Apple when they tossed MAC OS9, so I am pretty much stuck with FPM until I die. Fortunately, I have something like 3 dozen old Apple computers (before OSX) that will run FPM so I probably won't have any problems continuing as I am.

 

Your example makes no sense without context... since the text-align wouldn't/shouldn't do dick that the flex is being used for... part of which being VERTICAL centering in addition to the horizontal that text align MIGHT provide if you made the child element inline-block... though that means nothing if you've got multiple elements. Again, CSS without the markup it's changing is meaningless trash.

Though these days, my idea of a fallback for IE9/earlier is to block them from even getting CSS/layout anymore and letting the defaults of semantic markup do their job.

Well, unless it's for a client who's willing to pay double the labor... and I'm often considered a holdout in terms of legacy support; my articles about IE8/earlier even four or five years ago being oft ridiculed for not having "modern" enough an attitude. So many "why are you still caring about anything prior to IE11" responses when I defended at least making pages work back to even just IE9.

But now, I just can't justify the extra time and effort to bend over backwards when things like Flex and Grid make my life so much damned easier, hence I've changed my tune the past year. I write and test for IE10 and later, expecting 10 to fail at flex and grid, but for anything older?

<!--[if !IE]>-->
	<link
		rel="stylesheet"
		href="screen.css"
		media="screen"
	>
<!--<![endif]-->

Code (markup):

IE9 being the last one to recognize CC's, it won't get that stylesheet. Oh noes, unstyled default markup appearance, not that.

I do warn people about it

<!--[if IE ]>
	<p style="color:#C00; font-size:1.5em;">
		<strong>WARNING!</strong> You are viewing a stripped down version of this site because you are using an outdated and insecure version of Internet Explorer. We recommended you upgrade to a modern browser such as Chrome, Firefox, Opera, Vivaldi, etc, etc. <em>Please, join us in THIS millennium.</em>
	</p>
<![endif]-->

Code (markup):

Yes, I normally bitch about inlined style, but there are ALWAYS exceptions.

I've even been doing the same with JavaScript, using IE CC's so that old browsers don't get the scripting -- since I write everything to work without scripting FIRST, then use JS to enhance the already working page instead of going full Gungan making JS the only way the page works. Meesa sayz yews nevah goes FULL Gungan.

In any case, that "fallback" is likely a shit appearance compared to what flex is doing. Layered progressive enhancement is what gives you graceful degradation, so coding the page that way might simply be no different than what we do with media queries for responsive design.

In many cases, if making such fallbacks is "so much code" or "so much effort" that it has a negative impact on your production, you're likely doing everything else wrong in the first place. Like non-semantic markup, lack of separation of presentation from content, presentational classes, and all the other damned things I'm always talking about that people scoff at as "unnecessary" whilst they s*** their own pants with bootcrap, tailwind, HTML 3.2 style methodologies, and all the other half-witted manure people pack their own fudge with.

 

In general, most businesses want the WIDEST possible audience at the least cost in money and time. Keeping up with the latest and greatest in most industries narrows the audience to cutting-edge customers, which in many cases is not enough customers to support the business. That said, some industries, like banking, medical, and so on, must be on the cutting edge to stay ahead of government edicts, hackers, etc.

 

CSS flexbox is actually a good example. For newer CSS features that were only implemented 1-2 years ago by the first browser and not yet supported by all browsers, I would definitely not yet use the new CSS features. However CSS flexbox is 11 years old and has been supported by all browsers for over 5 years now. (Except IE11, that has a few bugs with flexbox but IE11 has stopped development 7 years ago, so web developers need to stop supporting all IE versions anyway). If web developers have a conservative mentality of not wanting to push toward new technology and prefer to support browser that have not received an update in 5 years and are used by less than 1%, then sure, go ahead. This way you will hurt your own skills by not moving forwarding and learning how to use new technology, and you're also downgrading the experience for other 99% of modern users.

The only reason you should still support IE in a website is if you work for a company where you create internal web apps that specifically require IE support. The global stats that show IE11 has a 1.4% global stats are mainly from companies where employees browse the internet while they're on a break, public libraries or bot networks. These are not target demographics that you want to support by downgrading the experience for 99.9% of your modern users to accommodate the 0.1% of outdated users.

Private users who use a 10 year old outdated browser are a security risk in the first place and should not be supported. These users will not be able to browser many websites anyway. Simply place a javascript code that creates a little notification telling users that they are using a 10 year old browser which is not supported. And if you think you're losing out on customers by not supporting visitors who use a 10 year old browser that most major websites don't even support anymore, where they can't even use payment processors, think again.

The rule of thumb is, if you check CanIUse.com, ignore all versions of IE completely, then check if the feature has been supported by all browsers for 2+ years.

Keep in mind, all modern desktop, tablet and phone browsers have automatic updates. That's why it has become much easier for web developers in recent years to support new features, because users will automatically be updated to the latest version of their browsers. I remember the nightmare of supporting different browsers in the late 90s and early 2000s. You either optimized your website for IE6 or for Netsape/Mozilla. In the mid 2000s until early 2010s we additionally got Firefox (independent from Mozilla) Safari, Opera, Chrome and worst of all IE7, IE8, IE9, IE10 (all IE versions with different HTML/CSS implementations, different JavaScript interpretation and different render engines, hell on earth) automatic browser updates were still a seen as invasive, and therefore many users didn't update browsers for years, creating this mentality across web developers to be very conservative and never push for new technology. Only for about the past 8 years it has been widely accepted that browsers have automatic silence updates. It's great for everyone involved, users and web developers.
It took myself several years to accept that I don't need to be so sensitive with implementing new CSS features anymore. It's 2020 and not 2001 anymore Do yourself a favor, ignore IE and use new technology that is widely supported for 2 years or more. Improve your skillsets by learning new CSS features. Your users will be thanking you.

 

So you don't use CSS at all since Opera 5/earlier, IE4 and Netscape 3 don't support them properly if at all? You're leaving out all the people using Windows 3.1, BeOS, and System 5.

You have to draw the line somewhere. How old is old enough to no longer care? IE 5.x and Netscape 4 support was acceptably ditched by 2005... The only reason I kept IE 5.x support as long as I did was that it was the only browser for many Mac users, thin clients, and CE devices. (see the infamous 6 on 6 party, where M$ was celebrating getting IE6 on Win Mobile 6, the same year IE8 was introduced... then they wonder why they failed so hard in the mobile space)

So why bend over backwards for the now 9 year old IE9? Five or six years ago, yeah I'd still be defending it... but now? No. Just... no. Hell, IE11 is now older than Netscape 4.x and IE5 were when we stopped giving a damn about them.

Unless of course, the client absolutely positively needs it -- because their own offices are filled with such relics. Sadly, far, FAR too common a case in a lot of medical clinics.

FFS, I'm providing occasional support to a place that's still storing patient records on a ASA-400...