Using calculation functions within CSS variables has odd behaviour

Ignition
1

Is it normal practice to set CSS variables to calculations?
E.g.

:root {
    --font-size-0: clamp(0px, calc(0.8*(1.0vmin+1.0vmax)), 24px);
}

?

When I do this, it seems to work in the client, but in the Designer it's extremely flakey. I'm using the variable within Perspective Styles with var(--font-size-2) for example, and using the PStyles within component style.classes.

  • If I change the PStyle to use another font size variable, the open View with the style applied will not change unless I close it and reopen it.
  • If I have reponed the View and then modified the font size in the PStyle, it changes, but only the first time I change the PStyle. The second time it doesn't update.
  • If I change the CSS variable, it won't update in the View at all unless I reopen the View.

@victordcq perhaps?

Is this something to do with when root variables are defined and updated?
Edit: This seems to be it. I've defined these within my adv. stylesheet for now (to later move into theme CSS files):

image
image582×138 4.22 KB

When I modify these and save, I notice in the dev tools in the designer, that these root variables just disappear altogether.

image
image993×390 24.6 KB

This seems like a bug?

2

I see no problem in using these as variables.

Its just that css gets cached so doesnt always update instantly. With jx browser this means you have to reopen the view. Tbh this can happen in all browsers too (when using other web dev methods). When web deving i always hard refresh the page after edits out of habit.
I guess perspective could do that too, but that might force a refresh to often for most users that do not really interact with css stylesheet that much.

If you want to play around and test different styles or variants of var's, you should do that in that on a browsers inspector tool, and add in a custom stylesheet there, that way you have instant feedback.

this is how i access the inspector custom stylesheet.

Press the add style rule and than double click the instpector-stylesheet reference

2 Likes
3

In the Designer, you can shift + right click the view and do a hard refresh of the jxbrowser frame.

8 Likes