О web-разработке
и даже немного больше...

CSS свойство user-select

css-user-selectНедавно обратил внимание на одно интересное свойство в CSS, которое позволяет исключить выделение текста на элементах страницы. Опишу ситуацию, проблема была с блоком, который имел скроллинг рабочей области. Рабочая область содержала текст и другие элементы. При скроллинге иногда возникала неприятная вещь: некоторые элементы блока а так же текст в нём произвольно выделялись, что в действительности выглядело не очень. В итоге был поиск, и нашлось решение, оно пожалуй, было одним из простых — это воспользоваться свойством user-select в CSS. После этого всё что находится в блоке просто перестанет выделяться курсором мыши, это в принципе и было нужно.

Пример CSS:

.content {
	-webkit-user-select: none; /* для Chrome и Safari */
	-moz-user-select: none; /* для Firefox */
	-ms-user-select: none; /* для IE 10+ */
	-o-user-select:none;
	-khtml-user-select: none;
	user-select: none;
}

Стоит понимать, что данное свойство может не работать в некоторых браузерах, особенно, что касается старых IE. Официально оно пока не поддерживается, однако многие полезные свойства, которые уже сегодня расписаны в стандарты, начинали своё существование подобным образом. Во всяком случае, я воспользовался CSS-свойством user-select.

Браузеры которые поддерживают:

Chrome Safari Firefox Opera IE Android iOS
все все все 27+ 10+ 4.1+ 7.1+

Теперь что касается всеми любимого IE, то здесь немного всё иначе, делается таким образом в коде html:

<div unselectable="on" onselectstart="return false;">текст</div>

Посредством специального атрибута onselectstart, запрещаем выделение текста элемента. Для запрета выделения текста ключевым стало свойство user-select, данное свойство не кроссбраузерно, однако в каждом браузере есть своя реализация, которая работает. Собрав всё в кучу, мы получили запись, указанную выше.

Опубликован: 13.10.2015 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Комментарии

  1. Алексей пишет:

    Теперь что касается всеми любимого IE, то здесь немного всё иначе, делается таким образом в коде html:
    текст

    А он, родимый (IE) пишет - В целях безопасности IE не разрешает этому веб-узлу выполнение скриптов...бла-бла-бла. Щелкните для выбора нужного действия.
    Так вот - пока вы не разрешите скрипту отработать - можно копировать сколько душе угодно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта