Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

User select css

Всем привет и сегодня будет рассмотрено свойство 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) я не обнаружил. Поэтому мы их рассматривать не будем.

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

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

Оцените статью

Еще статьи

window location JavaScript

JS filereader

произношение javascript

SQL html

DOMParser

clip path css

отступ текста css

clipboard javascript

Как я пришел к этому.

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке