Token with custom CSS?

At a glance

The community member wants to add the .unselectable class to most elements on their site, which includes various vendor prefixes for the user-select property. However, they are unsure if this is the best approach, as some of the prefixes may not be supported. The comments suggest that the user-select property is widely supported without prefixes, and the community member can use it directly in the advanced section of their web platform. Another community member mentions that they can also use an HTML embed and a CSS selector to achieve the same result. The discussion also covers the automatic prefixing of the -webkit-user-select property to support Safari, which the community members agree is a good approach.

Useful resources

NNateaúx

I would like to add the following class to the majority of elements on my site:

Plain Text

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Of course it should be a token, but none of these are supported and likely won't be for a long time.
What would be the best way to add these? Surely using a HTML embed for a majority of elements can't be a good solution.

22 comments

OOleg Isonen

Who in the world tought you you need to use all those prefixes, this is widely supported without a prefix

https://caniuse.com/?search=use-select

OOleg Isonen

And already supported from advanced section

OOleg Isonen

you can also do this with a html embed and a selector

NNateaúx

Ah good point I've just been using this one for some years since they were all required, I can't seem to find user-select in the advanced menu, though:

Attachment

OOleg Isonen

make a bigger screenshot

NNateaúx

Attachment

NNateaúx

There is very little configuration so far as its a fresh project

OOleg Isonen

now look exactly at your screenshot in advanced panel

NNateaúx

Im going to cry

OOleg Isonen

you should

NNateaúx

I assume in cases where something like this is actually unsupported, though, a javascript selector from an html embed is the only real way to go, though right?

OOleg Isonen

I have no idea what you are talking about now

NNateaúx

for example user-select doesn't work on webkit, it requires -webkit-user-select, which isn't supported. If I want to use that too, the best way would be with a javascript selector

OOleg Isonen

I will just ignore that your sentence doesn't make any sense.

Here is what you are asking: in case there is a property we don't support in adnvanced panel but you still want to use - you can use html embed component and write any css there.

It has nothing to do with javascript, its a css selector - which is why your sentence is confusing.
user-select is supported, so there is no reason to write a prefix for it like I said before

NNateaúx

Alright, I'm just figuring out how webstudio works in general and how regular css would be inserted

NNateaúx

The user-select support on webkit, however, is a problem, though

NNateaúx

On caniuse it confirms it

Attachment