CODEWITHSUNDEEP
htmlcssmicrosoft-edge
RikRak
RikRak

Reputation: 963

Use of URLs in CSS vars with Edge Browser

Example: https://github.com/rikrak/EdgeUrlVar

We're trying to improve our use of CSS by implementing vars. We've hit a problem whereby Chrome and Firefox work fine, but Edge (and IE11) appear to interpret the paths in the CSS relative to the page, rather than the css file. I can't find a way to work around this without resorting to absolute paths, which I'd rather avoid.

Structure:

+-Accounts
|    +-index.html
+-Resources
|    +-ClientOne
|    |    +-css
|    |    |    +-client.css
|    |    +-images
|    |         +-logo.png
|    +-Shared
|         +-css
|              +-common.css
+index.html

client.css:

:root{
    --logo:url('../../../Resources/ClientOne/Images/logo.png');
}

common.css

.title{
    background-image: var(--logo);
    background-repeat: no-repeat;
    height: 80px;
}

index.html

<html>
    <head>
        <title>Demo of CSS vars</title>
        <link href="Resources/Shared/Css/common.css" rel="stylesheet" type="text/css" />
        <link href="Resources/ClientOne/Css/client.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="title"></div>
        <h2>Home Page</h2>
        <p>Go to <a href="Accounts/index.html">Accounts</a></p>
    </body>
</html>

Accounts/index.html (both are similar)

<html>
    <head>
        <title>Demo of CSS vars</title>
        <link href="../Resources/Shared/Css/common.css" rel="stylesheet" type="text/css" />
        <link href="../Resources/ClientOne/Css/client.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="title"></div>
        <h2>Accounts Page</h2>
        <p>Go <a href="../index.html">Home</a></p>
    </body>
</html>

Upvotes: 0

Views: 415

Answers (1)

Yu Zhou
Yu Zhou

Reputation: 12961

If you just browse the page through local file path, then the logo can't show in IE and Edge. But if you publish it as a website, it can work well in Edge and Chrome.

Besides, IE doesn't support CSS variables, you could add a polyfill to make it work in IE. You just need to import ie11CustomProperties.js into the page where you use the CSS variables. In this case, we can add the JavaScript file to index.html and Accounts/index.html.

I add the polyfill and publish the website to IIS and it can work well in all browsers: result in IE, result in Edge.

-------------------------------------------------------------Edit------------------------------------------------------------------

You could use root-relative path with "/" to avoid the issue. Please try to change client.css into this:

:root{
    --logo:url('/Resources/ClientOne/Images/logo.png');
}

Upvotes: 1

Related Questions