Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #36930 > unrolled thread

Edge and CSS vars

Back to article view | Back to comp.lang.javascript

Contents

  Edge and CSS vars Andrew Poulos <ap_prog@hotmail.com> - 2019-06-18 14:21 +1000
    Re: Edge and CSS vars Andrew Poulos <ap_prog@hotmail.com> - 2019-06-18 14:29 +1000
      Re: Edge and CSS vars "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-06-18 10:12 +0200
    Re: Edge and CSS vars Martin Leese <please@see.Web.for.e-mail.INVALID> - 2019-06-18 13:10 -0600

#36930 — Edge and CSS vars

In a stylesheet I have this

background: no-repeat left center var(--panebtn-img);

and in my code when I call this

document.documentElement.style.setProperty('--panebtn-img',
   'url("../images/dark.png")');

Chrome and Firefox duly show the background image but not Edge.

For Edge the URL needs to be changed to
   'url("images/dark.png")'

If I make the change then Chrome and Firefox won't show the image even 
though Chrome's developer tools shows that the element has the correct 
full URL to the image.

I've been testing on Edge but I've only noticed this since the last 
major Windows update installed late last week.

The site is laid out like this

index.htm
scripts
  -- scripts.js
  -- styles.css
images
  -- dark.png

Is there one expression that works correctly in Edge et al.?

Andrew Poulos

[toc] | [next] | [standalone]

#36931

On 18/06/2019 2:21 pm, Andrew Poulos wrote:
> In a stylesheet I have this
> 
> background: no-repeat left center var(--panebtn-img);
> 
> and in my code when I call this
> 
> document.documentElement.style.setProperty('--panebtn-img',
>    'url("../images/dark.png")');
> 
> Chrome and Firefox duly show the background image but not Edge.
> 
> For Edge the URL needs to be changed to
>    'url("images/dark.png")'

A minute after I posted I found a workaround.

I've set the value to
   'url("images/dark.png"),url("../images/dark.png")'
If a browser can show one of the images it can't show the other.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#36932

Andrew Poulos <ap_prog@hotmail.com> wrote on 18 Jun 2019 in 
comp.lang.javascript:

> I've set the value to
>    'url("images/dark.png"),url("../images/dark.png")'
> If a browser can show one of the images it can't show the other.

Nice.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#36934

Andrew Poulos wrote:
> In a stylesheet I have this
> 
> background: no-repeat left center var(--panebtn-img);
> 
> and in my code when I call this
> 
> document.documentElement.style.setProperty('--panebtn-img',
>   'url("../images/dark.png")');
> 
> Chrome and Firefox duly show the background image but not Edge.
> 
> For Edge the URL needs to be changed to
>   'url("images/dark.png")'
> 
> If I make the change then Chrome and Firefox won't show the image even 
> though Chrome's developer tools shows that the element has the correct 
> full URL to the image.

Are you setting the <base> tag?  Perhaps
that will bring the different browsers into
concurrence.

-- 
Regards,
Martin Leese
E-mail: please@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web