User select css что это
CSS свойство user-select
Недавно обратил внимание на одно интересное свойство в CSS, которое позволяет исключить выделение текста на элементах страницы. Опишу ситуацию, проблема была с блоком, который имел скроллинг рабочей области. Рабочая область содержала текст и другие элементы. При скроллинге иногда возникала неприятная вещь: некоторые элементы блока а так же текст в нём произвольно выделялись, что в действительности выглядело не очень. В итоге был поиск, и нашлось решение, оно пожалуй, было одним из простых — это воспользоваться свойством user-select в CSS. После этого всё что находится в блоке просто перестанет выделяться курсором мыши, это в принципе и было нужно.
Пример CSS:
Стоит понимать, что данное свойство может не работать в некоторых браузерах, особенно, что касается старых IE. Официально оно пока не поддерживается, однако многие полезные свойства, которые уже сегодня расписаны в стандарты, начинали своё существование подобным образом. Во всяком случае, я воспользовался CSS-свойством user-select.
Браузеры которые поддерживают:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| все | все | все | 27+ | 10+ | 4.1+ | 7.1+ |
Теперь что касается всеми любимого IE, то здесь немного всё иначе, делается таким образом в коде html:
Посредством специального атрибута onselectstart, запрещаем выделение текста элемента. Для запрета выделения текста ключевым стало свойство user-select, данное свойство не кроссбраузерно, однако в каждом браузере есть своя реализация, которая работает. Собрав всё в кучу, мы получили запись, указанную выше.