Website Display Issues - IE11

HTML-CSS
1

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

Example
Example1218×949 15.4 KB

Any help would be appreciated.

2

IE doesn’t support CSS variables, you can check here: https://caniuse.com/#feat=css-variables
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
3

@toptech
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.

4

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

1 Like
5

@DanCouper
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.

6

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
7

@DanCouper

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.

8

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