There is a non-standard CSS property - user-select - which determines whether the text of a given element is selectable (ie, can be high-lighted by the user). I don't see this CSS property getting used very often. So, I wanted to write up a quick post about how I think the user-select property can be leveraged to create a better user experience (UX).
First, this is not an issue of security. I would never use the user-select property to try and prevent "theft" of content. That's just a silly concept. That's like when people, in the early 2000s, used to attach an alert() prompt to the right-click action of an image in order to prevent the "Save As" functionality. Or, even more ridiculous, overlaying a transparent GIF on top of an image in order to intercept the click action. Just silly. Don't do these things.
To me, user-select is about providing a better user experience for the end user. I know, as a user myself, when I interact with an application, and some of the text is inappropriately high-lighted, it leaves a bad taste in my mouth. Now, I'm not suggesting that all text selection be prevented; but, rather, that "unintended" text selection be prevented.
Now, "unintended" is certainly a matter of interpretation. So, I tend to paint with a fine brush rather than with broad-strokes. For the most part, I find that preventing text selection on "action items" is a fairly safe bet. And, it's also one of the interaction points that is most likely to result in accidental text selection.
The user-select property is simple, but requires vendor-prefixes at this point:
user-select: none ;
-moz-user-select: none ;
-ms-user-select: none ;
-webkit-user-select: none ;
To demonstrate this, I've put together a small app in which a user can toggle an area of the page. If the user were to initiate the toggle action in a quick enough sequence, the browser may interpret that as a desire to select the text. One of the action links, in the demo, will allow that; the other action link will prevent accidental text selection using user-select.
As you can see, one of the action links uses "user-select: none". This prevents the text of the action link from being accidentally selected during user interaction. However, since the first action link does not have this CSS property, clicking it in rapid succession leads to an unfavorable user experience:
I know this might seem really knit-picky; but, to me, adding the user-select property is a really easy way to prevent some fairly unfavorable user experiences. And, it can be done with fine-enough control so as to not accidentally prevent a desirable user interaction.
Want to use code from this post? Check out the license.