user-select
Контролирует возможность выделения текста пользователем.
Зачем нужно
Предотвращает нежелательное выделение текста при кликах на UI-элементы или, наоборот, упрощает выделение кода одним кликом.
Где используется
- Кнопки и иконки — запрет выделения (
none) - Блоки кода — выделение всего блока (
all) - Drag-and-drop интерфейсы
Code example
/* Запрет выделения */
.button, .icon, .badge {
user-select: none;
}
/* Выделить всё одним кликом */
.code-snippet {
user-select: all;
}
/* Обычное поведение (по умолчанию) */
.article-text {
user-select: text;
}
/* Только содержимое, без вложенных */
.container {
user-select: contain;
}
/* Практика: drag-and-drop список */
.sortable-item {
user-select: none;
cursor: grab;
}
.sortable-item:active {
cursor: grabbing;
}