Variable from HTML to CSS with modifications

[YTN0]

Hi,

I am trying to figure out the cleanest way to do the following in RML. I need to create some CSS for a generic "button" class (just a div). I want to be able to set the actual image name in HTML and have that be passed to the CSS. For each of the different states (hover etc), I want to use a modified version of the name. See below for an example of what I mean. TIA!

<div class = "mybutton" MY-IMAGE-NAME="blah">
</div>

// CSS
.mybutton {
decorator: image(MY-IMAGE-NAME+'.png')
}

.mybutton:hover {
decorator: image(MY-IMAGE-NAME+'-hover.png')
`}

[mikke89]

You can't pass the name from HTML to CSS, however, you can set the style on the element directly. With data bindings you could e.g. do <div class="mybutton" data-style-decorator="'image(' + image_name + '.png)'">Click</div>. Usually, I would advise against this for performance reasons though, keeping the decorators in CSS helps with reusing resources and caching.

[YTN0]

Would this work to pass the name from HTML to CSS when it's rolled out?
#388

Regarding your suggestion above.. I might be missing something, since it's not clear how that would be better, since I would still need to handle the variations in the image name for hover, disabled etc, and that needs to be in the CSS, otherwise the HTML is going to get very messy.

[mikke89]

No, there is no way to pass a name from html to css. You're right that the suggestion does not work with hover and similar. You need to find another approach to this. What are you trying to solve?

[YTN0]

I will have a lot of different buttons and I want to create a generic button class with the different variants to support the button being disabled, clicked, hovered etc (with each variant having a different image).

In the HTML, whenever I need a button, I just need to be able to create a <div class="mybutton"><div> and want to be able to specify the "base" image name e.g. play, and the various CSS will load play-normal.png, play-hover.png, play-disabled.png, play-clicked.png etc. Ideally, something like <div class="mybutton" image-name="play"></div> and the image-name tag will be used by the CSS variants.

Currently, I would need to create each variant for every button (specifying every image name variant) in CSS, which is a lot of combinations of the exact same code, with only the image name being different in every case.

[mikke89]

Ah, I understand. Did you take a look at the @decorators feature? With this you can share decorator properties so you don't have to repeat them multiple times. Personally, I think a straightforward solution, even if it comes with some bloat, can be easier to work with in the end.