1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Fall-backs are a waste of time?

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, May 10, 2020.

  1. #1
    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.
    SEMrush
     
    Web_Dev_Chris, May 10, 2020 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,410
    Likes Received:
    1,369
    Best Answers:
    24
    Trophy Points:
    400
    #2
    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.
     
    qwikad.com, May 10, 2020 IP
  3. mmerlinn

    mmerlinn Prominent Member

    Messages:
    2,576
    Likes Received:
    508
    Best Answers:
    6
    Trophy Points:
    320
    #3
    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.
     
    mmerlinn, May 10, 2020 IP
    qwikad.com likes this.
  4. sarahk

    sarahk iTamer Staff

    Messages:
    26,241
    Likes Received:
    3,867
    Best Answers:
    108
    Trophy Points:
    665
    #4
    lol, My husband has a 20 year old copy of PageMaker that he uses for one task for one client once a month. He has a lovely laptop that he uses for everything else and a $20 XP computer that sounds like a 747 taking off for that task.
     
    sarahk, May 10, 2020 IP
    mmerlinn likes this.
  5. mmerlinn

    mmerlinn Prominent Member

    Messages:
    2,576
    Likes Received:
    508
    Best Answers:
    6
    Trophy Points:
    320
    #5
    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.
     
    mmerlinn, May 10, 2020 IP
    sarahk likes this.
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,339
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, May 10, 2020 IP
  7. mmerlinn

    mmerlinn Prominent Member

    Messages:
    2,576
    Likes Received:
    508
    Best Answers:
    6
    Trophy Points:
    320
    #7
    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.
     
    mmerlinn, May 10, 2020 IP
  8. K.Meier

    K.Meier Well-Known Member

    Messages:
    281
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    110
    #8
    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.
     
    K.Meier, May 10, 2020 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,339
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #9
    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. :D

    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...
     
    deathshadow, May 10, 2020 IP
  10. sarahk

    sarahk iTamer Staff

    Messages:
    26,241
    Likes Received:
    3,867
    Best Answers:
    108
    Trophy Points:
    665
    #10
    Take into account what the site is about.

    Are you selling something that everyone will use? or just "early adopters"?
    Are the early adopters in your niche also tech early adopters?
    If they are, then you can be more "bleeding edge" about the html/css/js and the Ux you deliver.

    If they're a broader cross-section - looking for a plumber, looking for funny memes etc then you have to be more conservative and allow for older systems.

    A funny wee example:

    My husband until recently had an iPhone 4 and was perfectly happy with it except that a couple of key apps had upgrades weren't available on the really old phones. He was unimpressed, even more so when I pointed out that if you're not spending on your phone you're probably not a valuable customer to those companies either.
     
    sarahk, May 10, 2020 IP