In my quest to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools. The JSON Viewer component needed some love so that was first on my list. While viewing the CSS for the JSON Viewer component, I saw something I hadn’t recognized: CSS user-select:
.heading { -moz-user-select: none; /* don't allow selection */ }
View Demo
After a bit of research, I found that you can control what content can be is selected using CSS:
.dont-select { user-select: none; } .control-select { user-select: none; /* don't select anything */ user-select: auto; /* let the browser decide */ user-select: all; /* select everything */ user-select: text; /* select only text */ user-select: contain; /* selection contained within element bounds */ }
When I think about it, there’s certainly an argument to be made that you’d prefer some content be selected and copied and others content not, like advertisements or images.
View Demo
This falls into the family of CSS pointer-events where CSS is used for something other than display. My first thought is that selection preference should be done via a HTML attribute, like autocomplete and autocorrect are. Anyways, give the demo a roll!