user-select css property governs if text is selectable for a given element.
user-select: none means that it is not selectable.
What’s interesting about this property is that while each browser supports it, they each require their own prefix, except Chrome, which does not need a prefix.
In create react app, what starts out as:
Gets expanded to:
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
But the default browserList configuration for development in your
package.json file is:
"development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ]
And so in development, it gets expanded to:
-webkit-user-select: none; -moz-user-select: none; user-select: none;
How does create react app know which prefixes to render? The
caniuse-lite npm package has up-to-date support data for each property and
user-select:none is defined here.
That data is compressed. Here’s how to uncompress it using the node cli to see what it represents:
const compressedData = require('caniuse-lite/data/features/user-select-none'); const caniuse = require('caniuse-lite'); const unpackFunction = caniuse.feature; unpackFunction(compressedData);
This is accomplished in create react app by the npm package autoprefixer;Tweet