Всем привет и сегодня будет рассмотрено свойство css с помощью которого мы можем управлять выделением контента на странице.

Допустим у нас на странице есть какой то текст:

<p> Какой то текст </p>

И мы его хотим выделить. Для этого достаточно зажать правую кнопку мыши и выделить его, это стандартное поведение выделения.

Теперь давайте используем свойство user-select, именно с помощью него мы можем управлять процессом выделения контента. Для поддержки во всех браузерах рекомендуется использовать данное свойство с префиксами(webkit,moz,ms)

Пример:

p{
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
}

С помощью значения all свойства user-select наш контент в элементе 'p' будет выделяться полностью при первом же клике мышкой. То есть пользователю не придется вручную выделать весь текст элемента, что может быть удобно, но отмечу что далеко не всегда.

Еще одним полезным значением данного свойства является none:

p{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

C помощью него мы вообще запрещаем выделение нашего контента. То есть просто так теперь скопировать ваш контент на сайте будет нельзя.

У данного свойства есть и другие значения, вот их полный перечень:

user-select: none; / * запрет выделения* /  
   user-select: auto; / * по умолчания браузера* / 
   user-select: all; / * выделять все * /   
   user-select: text; / * выделять только текст * /  
   user-select: contain; / *выделять, содержащийся в границах элементов * /

В принципе никаких новых эффектов при использовании значений (text, contain) я не обнаружил. Поэтому мы их рассматривать не будем.

На этом дорогие друзья данная статья подошла к концу. Надеюсь она оказалась для вас полезной.

Желаю удачи и успехов! Пока!