Pass HTML variables to CSS

Question

I've done a fair bit of searching, but not come across any recent, useful answers.

My question is whether it's possible to pass variables from HTML (possibly using data attributes) into CSS?

My use case is that I have brand pages that I'd like to use a media query to show vendor-specific backgrounds for each brand using media queries. I know you can't use media queries in inline CSS, but I equally don't want to create ~100 media queries in my style sheet.

On my HTML page, I can access an object for the vendor background URL, so it would be great if I could pass these into a single CSS media query somehow without doing any JavaScript.

What do you envision that the CSS will look like? as pseudo code? — Doug, Mar 18 '19 at 14:30
You can't really pass html variables to css but you could target data attributes in css and with the right setup, it's almost like passing it to html — Huangism, Mar 18 '19 at 15:19
Use Javascript to change the style because you can't pass from html to css https://www.w3schools.com/Js/js_htmldom_css.asp — EnzoTrompeneers, Mar 18 '19 at 15:24
As suggested by Billie below, I set my 'variable' background images inline using CSS variables, which I could then reference from my style sheet in media queries and it's worked really well. — Gavin5511, Mar 18 '19 at 16:12

score 3 · Accepted Answer · answered Mar 18 '19 at 15:19

3

You could do that with CSS variables (a.f.a.i.k. there is no other way).

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

It would work something like this:

Attach a CSS variable to your HTML tag: <html style="--variable:'your_fallback_image.jpg'">
Populate that variable with the URL dynamically (doesn't matter how for this example)
Create CSS that would set a background (wrapped in the media-query)

Something like below:

@media screen and (width:64rem){
  background-image: url(--variable);
}

Now it should update accordingly when changing the URL, and set a default in case your dynamic solution does not wor. hope that helps.

answered Mar 18 '19 at 15:19

Billie Bobbel

304
1
8

Thanks Billie, CSS variables have worked perfectly. I've set my two image sizes (for desktop and mobile) inline, and called each within css depending on my media queries. Works a treat. – Gavin5511 Mar 18 '19 at 16:10
1

Also, for anyone interested, there are some caveats when interpolating URL's when using css variables (which is what i was doing in my specific use case), but this thread helps explain the best way of working around this. https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url – Gavin5511 Mar 18 '19 at 16:16

score 0 · Answer 2 · answered Mar 18 '19 at 15:16

You don't pass HTMl to CSS. When Liquid renders your theme into a big string of HTML, you can use the vendor of the product to affect the CSS you show to the customer. Either you set the specific crap you need in your CSS ahead of time, and just switch this way, or you suck the crap out of say product metafields and use it that way. In other words, since you can save a string as a metafield, and CSS is a string, you could do it that way too.

Pass HTML variables to CSS

2 Answers2