Utilizing CSS, it’s doable to forestall customers from choosing textual content inside a component utilizing user-select: none. Now, it’s comprehensible why doing so may be thought of “controversial”. I imply, ought to we be disabling commonplace person behaviors? Usually talking, no, we shouldn’t be doing that. However does disabling textual content choice have some reputable (albeit uncommon) use-cases? I feel so.
On this article we’ll discover these use circumstances and check out how we are able to use user-select: none to enhance (not hinder) person experiences. It’s additionally value nothing that the user-select property has different values apart from none that can be utilized to change the conduct of textual content choice moderately than disable it utterly, and one other worth that even enforces textual content choice, so we’ll additionally check out these.
Attainable user-select values
Let’s kick issues off by working via the totally different user-select values and what they do.
Making use of user-select: none; to a component implies that its textual content content material and nested textual content content material gained’t be functionally selectable or visually selectable (i.e. ::choice gained’t work). For those who have been to choose that contained some non-selectable content material, the non-selectable content material could be omitted from the choice, so it’s pretty properly carried out. And the help is nice.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 2* | 10* | 12* | 3.1* |
Cell / Pill
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 105 | 104 | 2.1* | 3.2* |
Adversely, user-select: textual content makes the content material selectable. You’d use this worth to overwrite user-select: none.
user-select: include is an fascinating one. Making use of it implies that if a variety begins throughout the component then it should finish inside it too, containing it. This oddly doesn’t apply when the choice begins earlier than the component, nonetheless, which might be why no browser at the moment helps it. (Web Explorer and earlier variations of Microsoft Edge beforehand supported it below the guise of user-select: component.)
With user-select: all, choosing a part of the component’s content material leads to all of it being chosen mechanically. It’s all or nothing, which may be very uncompromising however helpful in circumstances the place customers usually tend to copy content material to their clipboard (e.g. sharing and embedding hyperlinks, code snippets, and so forth.). As an alternative of double-clicking, customers will solely have to click on as soon as for the content material to auto-select.
Watch out, although, since this isn’t all the time the function you suppose it’s. What if customers solely need to choose half of the content material (e.g. solely the font title a part of a Google Fonts snippet or one a part of a code snippet)? It’s nonetheless higher to deal with ”copy to clipboard” utilizing JavaScript in lots of eventualities.
A greater utility of user-select: all is to make sure that quotes are copied fully and precisely.
The conduct of user-select: auto (the preliminary worth of user-select) relies on the component and the way it’s used. You could find out extra about this in our almanac.
Now let’s flip to exploring use circumstances for user-select: none…
Stripping non-text from the choice
While you’re copying content material from an internet web page, it’s in all probability from an article or another kind of long-form content material, proper? You in all probability don’t need your choice to incorporate photos, emoji (which may generally copy as textual content, e.g. “:thinkingface:”), and different issues that you simply would possibly look forward to finding wrapped in an <apart> component (e.g. in-article calls to motion, adverts, or one thing else that’s not a part of the principle content material).
To forestall one thing from being included in alternatives, make it possible for it’s wrapped in an HTML component after which apply user-select: none to it:
<p>lorem <span model="user-select: none">🤔</span> ipsum</p>
<apart model="user-select: none">
<h1>Heading</h1>
<p>Paragraph</p>
<a>Name to motion</a>
</apart>In eventualities like this, we’re not disabling choice, however moderately optimizing it. It’s additionally value mentioning that choosing doesn’t essentially imply copying — many readers (together with myself) like to pick content material as they learn it in order that they’ll keep in mind the place they’re (like a bookmark), one more reason to optimize moderately than disable utterly.
Stopping unintentional choice
Apply user-select: none to hyperlinks that seem like buttons (e.g. <a href="https://css-tricks.com/no matter" class="button">Click on Me!</a>).
It’s not doable to pick the textual content content material of a <button> or <enter kind="submit"> as a result of, properly, why would you? Nevertheless, this conduct doesn’t apply to hyperlinks as a result of historically they type a part of a paragraph that ought to be selectable.
Honest sufficient.
We may argue that making hyperlinks seem like buttons is an anti-pattern, however no matter. It’s not breaking the web, is it? That ship has sailed anyway, so if you happen to’re utilizing hyperlinks designed to seem like buttons then they need to mimic the conduct of buttons, not only for consistency however to forestall customers from unintentionally choosing the content material as a substitute of triggering the interplay.
I’m definitely liable to choosing issues unintentionally since I exploit my laptop computer in mattress greater than I care to confess. Plus, there are a number of medical circumstances that may have an effect on management and coordination, turning an meant click on into an unintended drag/choice, so there are accessibility issues that may be addressed with user-select too.
Interactions that require dragging (deliberately) do exist too after all (e.g. in browser video games), however these are unusual. Nonetheless, it simply reveals that user-select does in reality have fairly just a few use-cases.
Avoiding paywalled content material theft
Paywalled content material will get a variety of hate, however if you happen to really feel that that you must defend your content material, it’s your content material — no person has the appropriate steal it simply because they don’t consider they need to pay for it.
For those who do need to go down this route, there are a lot of methods to make it tougher for customers to bypass paywalls (or equally, copy copyrighted content material such because the revealed work of others).
Blurring the content material with CSS:
article { filter: blur(<radius>); }Disabling the keyboard shortcuts for DevTools:
doc.addEventListener("keydown", operate (e) );Disabling entry to DevTools by way of the context menu by disabling the context menu itself:
doc.addEventListener("contextmenu", e => e.preventDefault())And naturally, to forestall customers from copying the content material after they’re not allowed to learn it on the supply, making use of user-select: none:
<article model="user-select: none">Another use circumstances?
These are the three use circumstances I may consider for stopping textual content choice. A number of others crossed my thoughts, however all of them appeared like a stretch. However what about you? Have you ever needed to disable textual content choice on something? I’d prefer to know!
