User select css что это

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

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

Пример CSS:

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

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

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

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

Источник