По умолчанию любой пользователь, просматривающий веб-страницы, может выделять текст с помощью клавиатуры или мыши. Сегодня мы рассмотрим, как отключить эту возможность, что сделает вашу веб-страницу больше похожей на приложение, а не на обычный документ.
Для реализации этой функции нам понадобится CSS-свойство user-select: none.
Поддержка Браузерами
Изучив поддержку этого свойства в различных браузерах на ресурсе Can I Use, можно сделать вывод, что для устаревших версий наиболее популярных браузеров могут потребоваться префиксы:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;Применение Свойства
Чтобы отключить возможность выделения текста на всем сайте, можно применить user-select: none для тега body. Однако, в некоторых случаях может понадобиться включить возможность выделения текста для определенных элементов. Это можно сделать, используя user-select: text для этих элементов.
Примеры Применения
Отключение выделения текста на всем сайте:
body {
-webkit-touch-callout: none; /* для поддержки iOS Safari */
-webkit-user-select: none; /* для поддержки Chrome, Safari, Opera */
-khtml-user-select: none; /* для поддержки Konqueror */
-moz-user-select: none; /* для поддержки Firefox */
-ms-user-select: none; /* для поддержки Internet Explorer и Edge */
user-select: none; /* стандартное свойство */
}Включение выделения текста для определенных элементов:
selectable {
-webkit-user-select: text; /* для поддержки Chrome, Safari, Opera */
-khtml-user-select: text; /* для поддержки Konqueror */
-moz-user-select: text; /* для поддержки Firefox */
-ms-user-select: text; /* для поддержки Internet Explorer и Edge */
user-select: text; /* стандартное свойство */
}Заключение
Использование свойства user-select: none позволяет сделать ваш сайт более похожим на приложение, улучшив взаимодействие с пользователем. Применяйте это свойство разумно, чтобы не ограничивать функциональность там, где это может быть неудобно.
