My website was rendering fine in all browsers until I tested it in the Internet Explorer. My menubar moved entirely to the left covering my logo and all the parts that used Grid did not show up anymore.

I figured out the exact replacements I would have to make in order to be IE browser compatible. However, just placing them in my CSS after my original nav and grid properties, overwrites them in general on my website, which I do not want as I still want my originally coded website on other browsers to stay the same.

Is there another way to create a fallback just for the IE browser or how to solve these issues?

E.g. my grid attached - my header code is quite long as it includes a responsive toggle menu as well - as well as media queries for both!

In summary - I want the browser to ignore the CSS properties I set before and paste new ones instead - in case of failure by the browser.

.grid {
  display: grid;
  grid-template-columns: 500px 500px;
  grid-gap: 10px;
  grid-column-gap: 100px;
}

.grid__item {
  background-color: var(--violet-lighter);
}

/*start internet explorer grid fallback*/
.grid {
  display: inline-block;
}

.grid_item {
  width: 50%;
}


/*end internet explorer grid fallback*/

I also tried the following without success - in this case IE ignores the changes all together:

.grid {
  display: inline-block; /*IE fallback*/
  display: grid;
  grid-template-columns: 500px 500px;
  grid-gap: 10px;
  grid-column-gap: 100px;
}

.grid__item {
  background-color: var(--violet-lighter);
}

CodePudding user response：

You could try browser duct-typing with javascript/jquery and giving the html or the body a class of that specific browser. In this case I have used classes:

• Opera = .is-opera
• Firefox = .is-firefox
• Safari = .is-safari
• IE = .is-internet-explorer
• Edge = .is-edge
• Chrome = .is-chrome
• E-Chromium = is-edge-chromium

Its important to notice that relying on duct-typing is not a good idea and if your website needs to be accessible by all the browsers, your original code should be written in a legacy browser compatible way. To know what you can and cannot use can be found here:

Can I use - Check CSS browser support

// Detect which browser is being used:

jQuery( document ).ready(function() 
{

    // Where the class will be set, in this case to the body:
    var body = $('body');

    // Opera
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    if(isOpera){
        body.addClass('is-opera');
    }

    // Firefox
    var isFirefox = typeof InstallTrigger !== 'undefined';
    if(isFirefox){
        body.addClass('is-firefox');
    }

    // Safari
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
    if(isSafari){
        body.addClass('is-safari');
    }

    // Internet Explorer:
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if(isIE){
        body.addClass('is-internet-explorer');
    }

    // Microsoft edge
    var isEdge = !isIE && !!window.StyleMedia;
    if(isEdge){
        body.addClass('is-edge');
    }

    // Chrome
    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    if(isChrome){
        body.addClass('is-chrome');
    }

    // Edge Chromium
    var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);
    if(isEdgeChromium){
        body.addClass('is-edge-chromium');
    }

});

After adding the javascript code, you can test it with your browser and see if the body gets a new class called .is-xxx. Then just make edits for problematic browsers like this.

.is-internet-explorer .myProblematicItem{
    /* Add your changes, with !important at the end */
}

CodePudding user response：

I don't know about fallbacks but you can write IE-specific CSS in a separate file and then use conditional comment in this way:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

You can refer to this article for a better understanding. https://www.browserstack.com/guide/create-browser-specific-css