🏠 back to Observable

images in j-f1’s “data cards” notebook

I noticed that in @j-f1’s notebook …

… the images show up in chrome but not firefox. They are specified using

<a style="--src: url('${image}'); --fit: ${imageFit || 'cover'}" ...

I have not seen this CSS attribute set on an anchor element before, and a quick google search isn’t turning up much. Is this a new CSS/HTML feature? Some Chrome-only thing?

These are custom properties, basically CSS variables. There are referenced further below inside the <style> element.

Btw, can you share a screenshot and your Firefox version? Because I’m seeing the image in FF.

1 Like

I’m using Firefox 66 on a Mac. Could be if I update to 68 it would work. Is this a very new feature?

Nope: https://caniuse.com/#feat=css-variables

Hmm, in the inspector it says “could not load the image”

But if I navigate to that image directly in the browser it loads fine. No idea what the issue is.

I can replicate it in a private window. The reason is tracking protection:

2 Likes