I'm learning front-end and I came across on this site with a CSS property named user-select , I did not understand what it was for and could not find a good explanation.
I wanted you to explain to me what it's for, how and when to use this user-select . Not only in the case quoted on the above website.
In a simple way, user-selection is used to control the content that can be selected on the site.
User-select accepts four values:
text - text can be selected
element - text can be selected, being restricted to element boundaries
none - text can not be selected
auto - If the element contains editable text, such as an input element or element with editable content, the text can be selected. Other forms of selection are determined by the value of the parent node.
Examples
-moz-user-select: none;
-moz-user-select: text;
-webkit-user-select: none;
-webkit-user-select: text;
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
-moz , -webkit , -ms These "tags" in front of user-select are referring to each browser.
-moz to mozilla
-ms to internet explorer
-webkit for chrome
You can use it when you feel the need to control what content is selected on the site.
In this site it shows how the different types that user-select works with.
This site has a table showing which browsers are supported and their versions.
References:
Live!
The CSS property user-select is used to control which text the user can or can not select.
auto: Controlled by the browser, the behavior may be different depending on the browser being used.
element: The user can only select the content that is inside the element.
none: The user can not select any content.
text: The user can only select the text that is inside the element.
Chrome: All versions.
Safari: All versions.
Firefox: All versions.
Opera: Version 27 or higher.
IE: Version 10 or higher.
Android: Version 4.1 or higher.
iOS: Version 7.1 or higher.
An example where this property can be useful is when you want to offer the user a simpler way of doing copy | paste. This prevents us from selecting useless things such as images.
A site where you can read more about this property is: link .
I leave here a small practical example that I found, to try to facilitate the understanding of what I tried to explain:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}<p class="unselectable">Não vais conseguir seleccionar este texto!</p>