Join the Webstudio community

Updated 4 months ago

Micro-interactions with css variables

At a glance

The post is a positive review of the new CSS variables feature, with the community member asking if it's possible to use a selector like :nth-of-type() with this feature. The comments discuss the capabilities and limitations of CSS variables, with community members suggesting using a combination of variables and custom code, or a data-driven approach with collections and expressions, to achieve the desired functionality. While there is no explicitly marked answer, the community members provide helpful suggestions and insights on how to approach the problem.

@John Siciliano, I've watched all the new variables videos a few times now (including on your site). Great stuff! I found the micro-interactions video particulary helpful. Would there be a way to use a selector like :nth-of-type() using this new feature?

CSS vars is an amazing feature, nice work Webstudio team! Love it so far.
J
O
J
27 comments
Thank you Jeremy! The team absolutely crushed it with this feature.

HMM. Not that I can think of though I the CSS vars are available in custom code so you could combine the the two... ie get the maintainability of vars and consistency through the UI and extra functionality in code
all custom selectors are waiting for a ui to be able to add them, then it would be possible to use any of them
but with variables, you basically set the variable on the parent, then on children you decide where you want to use it

so hard to imagine a practical use case where you need to select the child from the parent
these selectors are gneerally ok on the same instance, but when it comes to selecting oother elements, same with just nested selectors .a .b etc it tends to break abstractions
With variables, the logic is this:

  1. you hover a card, card sets variables that communicate it's own state
  2. children have ability to change their own styles according to that state.
instead of

  1. you hover the card, card decides to set styles on child elements.
  2. children don't know anything about the styles being set from above, children can set styles that are incompatible with those changes
This is a broken abstraction on principle
Here's what I was trying to do.

article.one
article.two
article.three

Each article has children with different highlight colors (I was able to do this easily with vars while maintaining the same structure & tokens).

I've staggered the article content so the 2nth would be reversed. I added a token of "reverse" onto it manually. I was wondering if there was a way to do that without adding a token... I think I have an idea how to do it now that I'm writing it out...
are you talking about a hypothetical list that is made of dozens of items where you can't set it manually?
in that case I would use a collection, data and expression
so items come from an array
each item is just one item tempalte
ideally you would be using a binding in the style panel for this to set the expression
That sounds exactly what I'd want to do. I'm unsure on how to implement the "binding in the style panel" though.
but since there are right now no bindings on the style panel, I would set a data attribute conditionally, then use html embed and use an expression to set the style on that element using attribute selector
to keep the styyles all in the style panel, I would create html ebmed with style like thiat:

[data-something=123] {
--my-variable: 123;
}
ah.. Ok, I get that. Makes sense.
so basically you would use attribute binding to set the css variable
would be much more straight forward with bindings on styles directly
"right now no bindings on the style panel" does this mean that's in the plans for the future?
data will be bindable everywhere
from properties, to page settings and style panel
You guys truly rock!
I mean its already in all properties and page settings, style panel is the last piece
we do our best to not suck at this πŸ™‚
Thanks for the ideas/assist.
Add a reply
Sign up and join the conversation on Discord