Website Display Issues - IE11

Good afternoon,

I am building a website and have an issue that has me a bit stumped. A little additional information that might be useful, I use VSCode and view the live server in Chrome. When viewing my project in Chrome it displays as expected, but if I use IE11 I experience multiple issues such as backgrounds not being displayed and some CSS items (i.e. span’s not being implemented). My project can be found here. This is what my project looks like when I open the index.html in IE11

Any help would be appreciated.

IE doesn’t support CSS variables, you can check here:
You can fix that by setting hex color with property below:

background-color: #color;

with your color for each element. :slightly_smiling_face:

1 Like

Ah gotcha, that’s a really easy fix. Any ideas why my showcase background isn’t being loaded? Is it because I used background positioning with “center center/cover”? Thank you so much for your assistance.

Yes, exactly that, you can’t use most newer CSS features if you want it to work in old browsers.

1 Like

Is there a way to setup a fallback(similar with how we assign fonts) for browsers that don’t support CSS Variables? I found out about “polyfill” through some google searching but looks to be a bit more advanced than I am. What is the recommended way to resolve this issue? Is it worth changing my code to support IE11? Sorry for all the questions and thank you for your help.

CSS variables cannot be polyfilled, it’s not possible; if it’s really important that you need IE11 support, you’ll have to change your code.

1 Like


This is the link that I found that suggested polyfills would work. It’s possible that this doesn’t address what I am trying to do. In any case I will rewrite the code and assign the colors directly. Thank you for your help.

That works like a string replace: it looks for any --vars in the :root element and replaces them in the code. This might be that that is all you use them for, in which case the polyfill would work, although it may make your site slightly janky. For anything else (you can declare and override CSS variables anywhere in the CSS, based on things like media queries and keyframe animations), it won’t work.

1 Like