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

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

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

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

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

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

Еще статьи

datalist HTML

gitignore GIT

JavaScript cookie

JS filereader

CSS валидация

библиотека tkinter

goto php

output html

javascript время

Комментарии

Проверочный код

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

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.