You’re Unselectable
This block of code came across my Twitter timeline today framed as a CSS tip to prevent text selection on a web page:
html {
user-select: none;
}
For funsies, I dropped that CSS on this very page you are reading (assuming you are reading it in the browser). It abuses user-select to prevent you from selecting the text.
The user-select property is not inheritable, despite the implication in the original tweet and how it may behave in Chrome and Safari (Can I Use does not note the open bugs, 761433 and 764316). Also, this property is not final and may change. Probably do not use it.
If you have draggable controls on your page and you find it annoying when its text content gets selected on drag, then only use this property after confirming users never need to select that text. Also, confirm that your draggable feature is also keyboard operable. If it does not work with a keyboard and/or it has no keyboard equivalent, you need to dump the feature. At which point this property will be mooted.
If, however, you are a Chrome/Safari user who has encountered this in the wild, I have a bookmarklet to re-enable text selection.
Copy or drag this link to your bookmarks: Re-enable Text Selection. Activating the link now should re-enable text selection on this page.
You should visit my bookmarklets page for others that can get you around some poor development practices.
Update: 30 August 2022
With WCAG 2.2 getting closer to completion, both Success Criterion 3.3.7: Accessible Authentication and Success Criterion 3.3.9: Redundant Entry identify the user’s ability to select and copy text as a method to satisfy them. Disabling the ability to select text, despite being user-hostile, could also produce WCAG errors in some contexts.
3 Comments
Reply In Safari, selection was initially not being prevented. DevTools told me
user-selectis an unsupported property and helpfully replaced it with-webkit-user-select.It seems like a property that would be seldom useful.
user-select: allcould make it easier to select text that’s expected to be copied (serial number, confirmation code, etc.) but even that could be misused (“I don’t want my bad takes to be tweeted out of context so I’ll adduser-select: allto all my posts”).I didn’t need the video to get the page title’s reference but I appreciate it.
In response to . Reply I didn’t add the
-webkit-or-ms-prefixed versions to the page or content because I don’t want them adopted. That being said, I updated the page so it should now block selection in Safari.Adding the video was a nod to Steve Faulkner’s brief posts that often include referential music. I figured if it is in my head, I could stuff it on others’.
Reply Longpress actions on draggable elements in iOS cause text selection, and I think it’s fair to call that undesirable in context, because it produces conflicting UI hints. The blue text-selection bars appear on top of the element, at the same time as it enters the draggable state.
So I think this is reasonable:
[draggable]:active { -webkit-user-select: none; }
Leave a Comment or Response