user-select: управление выделением текста в интерфейсе
User-select влияет на возможность выделять текст обычным взаимодействием. Его применяют точечно к интерфейсным деталям, но учебный текст и примеры кода обычно должны оставаться копируемыми.
Назначение
User-select влияет на возможность выделять текст обычным взаимодействием. Его применяют точечно к интерфейсным деталям, но учебный текст и примеры кода обычно должны оставаться копируемыми.
Как это работает
Text разрешает выделение, none препятствует ему, all помогает выбирать содержимое элемента целиком. Поведение на разных устройствах нужно проверять, особенно если правило назначается большому контейнеру.
Пример
<style>.reference-code{user-select:all;padding:.6rem;border:1px solid #799886;display:inline-block}.hint{user-select:text}</style>
<p>Код учебного примера: <code class="reference-code">LESSON-HTML-07</code></p>
<p class="hint">Выделите код, затем скопируйте его обычной командой браузера.</p>Что должно получиться
При поддержке user-select:all взаимодействие помогает выделить код целиком. Свойство не копирует данные в буфер автоматически и не требует доступа к Clipboard API.
Граница применения и частая ошибка
User-select:none не является защитой от копирования: содержимое остаётся доступным в документе и другим программам. Запрет выделения всей статьи мешает чтению и работе с примерами. Не используйте его вместо корректной обработки жестов.
Самостоятельная проверка
Сравните выделение мышью, клавиатурой и на сенсорном устройстве. Проверьте, что обычный текст вокруг кода выделяется независимо. Для настоящей кнопки копирования потребуется отдельная реализация и обратная связь пользователю.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.