Отключение возможности выделения текста в CSS
HTML&CSS

Отключение возможности выделения текста в CSS

Оригинал: Disable Text Selection with CSS, Jacob Gube

В некоторых случаях может возникнуть необходимость в отключении возможности выделять текст на стрнанице. Для этого можно использовать свойство CSS user-select.

Пример

Ниже показаны правила CSS для класса disable-selection, который можно применить к HTML-элементу, чтобы отключить возможность выделения текста в нем:


.disable-selection {
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

Немного подробностей:

  • свойство -webkit-user-select поддерживается Chrome, Safari и Opera (нет необходимости в -o-user-select)
  • версия без префикса намеренно пропущена
  • свойство -webkit-touch-callout отключает высплывающие меню на touch-устройствах (на iOS и Android), показанные на рисунке ниже

Демо

Демо

Важные вещи, которые нужно иметь в виду

Есть небольшая загвоздка в том, что user-select — это не стандартное свойство CSS, включенное в любую спецификацию. Хотя user-select имеет хороший уровень поддержки браузерами, тем не менее, требуется использовать вендорные префиксы.

В предыдущем примере я не использовал свойство user-select без префикса. Это потому, что нет такого свойства в стандарте.

Что еще следует иметь в виду:

  • Свойство user-select глючное и непостоянное. Иногда вы все-таки можете выделить текст, особенно, если вы уже начали выделять текст, выделение которое не запрещено.
  • Выделение с помощью «Выделить все» включает и запрещенный для выделения текст (Win: Ctrl + A / Mac^ Cmd + A). Эту ситуацию можно отчетливо наблюдать в Internet Explorer 11.
  • Это не пуленепробиваемая техника. CSS может быть отключен. Этот метод основан на нестандартном свойстве CSS, что означает, что есть множество неопределенностей в отношении его поддержки браузерами в будущем.
  • Отключение выделения раздражает. Я бы рекомендовал использовать его в рамках прогрессивного улучшения: используйте свойство user-select только там, где это действительно улучшает взаимодействие с пользователем. И я бы не рекомендовал применять его к широким селекторам, например, к универсальному селектору (*).
  • Свойство user-select может сделать ваши таблицы стилей невалидными. Если соблюдение стандартов важно для вас, из-за использования свойства user-select могут падать тесты на валидность CSS, такие как CSS Validation Service .

Поддержка браузерами

Обновлено: March 2015

Браузер:Версия
Chrome6
Firefox2
IE10
Safari3.1

Mobile

Браузер:Версия
Chrome (Android)2.1
Safari (iOS)3.2
Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться