When is it OK to Disable Textual content Choice? | CSS-Tips

Utilizing CSS, it’s potential to forestall customers from choosing textual content inside a component utilizing user-select: none. Now, it’s comprehensible why doing so is perhaps thought of “controversial”. I imply, ought to we be disabling customary consumer behaviors? Typically 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 instances and check out how we are able to use user-select: none to enhance (not hinder) consumer experiences. It’s additionally price nothing that the user-select property has different values in addition to none that can be utilized to change the conduct of textual content choice slightly than disable it fully, and one other worth that even enforces textual content choice, so we’ll additionally check out these.

Potential user-select values

Let’s kick issues off by operating by 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 received’t be functionally selectable or visually selectable (i.e. ::choice received’t work). When you had been to select that contained some non-selectable content material, the non-selectable content material could be omitted from the choice, so it’s pretty nicely carried out. And the assist is nice.

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 range 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 underneath 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 a substitute 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 at all times the characteristic you assume 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 software 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) depends upon the component and the way it’s used. Yow will discover out extra about this in our almanac.

Now let’s flip to exploring use instances for user-select: none…

Stripping non-text from the choice

Once you’re copying content material from an online 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 typically copy as textual content, e.g. “:thinkingface:”), and different issues that you just may look forward to finding wrapped in an <apart> component (e.g. in-article calls to motion, advertisements, or one thing else that’s not a part of the primary content material).

To forestall one thing from being included in alternatives, be sure that 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 slightly optimizing it. It’s additionally price 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 slightly than disable fully.

Stopping unintended 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 potential to pick the textual content content material of a <button> or <enter kind="submit"> as a result of, nicely, why would you? Nevertheless, this conduct doesn’t apply to hyperlinks as a result of historically they type a part of a paragraph that needs to be selectable.

Truthful sufficient.

We might 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 an alternative of triggering the interplay.

I’m actually liable to choosing issues unintentionally since I take advantage of 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 actual fact have fairly a number of use-cases.

Avoiding paywalled content material theft

Paywalled content material will get a whole lot of hate, however if you happen to really feel that it’s essential defend your content material, it’s your content material — no one has the best steal it simply because they don’t consider they need to pay for it.

When you do need to go down this route, there are lots 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", perform (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 instances?

These are the three use instances I might 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 wish to know!