user-select

Свойство user-select в CSS управляет выделением текста и других элементов. Например, его можно использовать, чтобы сделать текст недоступным для выделения:

.row-of-icons {
  -webkit-user-select: none; /* Chrome / Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

Свойство бывает полезно в ситуациях, когда нужно предоставить пользователям возможность копирования более чистого контента без ненужных деталей в виде значков и других элементов оформления.

Однако это не всегда хорошо работает. WebKit позволяет копировать текст, если вы выделяете элементы вокруг него.

Вы также можете использовать это свойство, чтобы обеспечить выделение всего элемента:

.force-select {
  -webkit-user-select: all; /* Chrome 49+ */
  -moz-user-select: all; /* Firefox 43+ */
  -ms-user-select: all; /* до сих пор не поддерживается */
  user-select: all;
}

Значения свойства

  • auto – Для редактируемых элементов значение принимается contain. Если у родителя user-select равно all, то и для дочернего элемента оно будет all. Если у родителя user-select установлено в none, то для дочернего элемента оно тоже будет none. Во всех остальных случаях равно text.
  • none – Выделение запрещено.
  • text – Можно выделить только текст.
  • all – Выделяется весь текст внутри элемента, включая дочерние объекты.
  • contain – Позволяет выделит текст только внутри границ элемента.

Вот несколько примеров работы:

See the Pen
user-select
by Андрей (@adlibi)
on CodePen.

Некоторое время не существовало спецификации для этого свойства, но теперь оно рассматривается в модуле базового пользовательского интерфейса CSS 4-го уровня.

Значение по умолчанию – auto, это обеспечивает выделение, как обычно. «Обычно» не всегда понятно. Здесь стоит процитировать спецификацию:

  • Для псевдоэлементов ::before и ::after вычисленное значение равно none.
  • Если элемент является редактируемым, вычисленное значение – contain.
  • Иначе, если вычисленное значение user-select для родителя этого элемента равно all, тогда вычисленное значение – all.
  • В противном случае, если значение user-select для родителя равно none, то и для потомка оно равно none.
  • В противном случае значение – text.

Другими словами, свойство выборочно наследуется.

Оцените статью
Инструкции для Web
Добавить комментарии