Custom HTML tags and CSS pseudo-classes

[TiagoSLoureiro]

Hello there! Awesome project!

It would be awesome if the ability to change the HTML tag of elements into custom ones was implemented. There is always a need for that kind of stuff. Also, I saw that there is only a little list of Pseudo-classes, and would be awesome if you allowed us to write our own custom pseudo-classes (:nth-of-type for example).

The other thing that would be awesome is allowing to use CSS variables.

Cheers!

[kof]

Hi

1. Custom html elements - html element being used depends on the component, component is in charge. Box right now supports all semantic tags. If you see something particular that isn't supported let us know!

2. Pseudo-classes are also driven by components meta config, it defines which pseudo-classes are supported. Having a complete list of them would blow up the list https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes since there are many and most of them aren't used, so our plan is to allow adding a pseudo class directly in the UI if its missing. Custom CSS states via attributes and pseudo classes  webstudio#1926

3. CSS variables - we haven't discussed yet how exactly and when, but maybe could support as part of the theme manager

Thanks for the feedback, looking forward to hearing about your particular use cases.

[TiagoSLoureiro]

Hey there,

I understand that the elements have html tags predefined, and some of them have even a dropdown list of them.
The thing is, what if I want to create a figure? Or a canvas? Giving the possibility to write our own custom html tag is huge. I am not saying that every single element needs this, but if you give the box element this capability, it would solve a lot. Exactly what you want to do with pseudo classes!

Another thing that would be interesting, in the breakpoints, maybe give us the possibility to write a custom css media query, like for example "@media (hover: hover) and (pointer:fine)", which I personally use in every single website, since this allows me to be sure that the device has indeed a pointer device that can hover, and is not dependent on screen width.

Just some ideas. Cheers :)

[kof]

Figure is literally supported: add a Box, change the tag to Figure

[kof]

Adding an additional media query right inside the style panel, maybe even bound to a design token is definitely an interesting idea, created an issue webstudio-is/webstudio#1929