[вёрстка] Как запретить выделение текста при помощи CSS

Бывает так, что на сайте желательно запретить выделение некоторых элементов страницы. Это можно сделать при помощи CSS.

Выделение текста можно запретить при помощи нестандартного (не описанного в спецификации CSS) свойства user-select.

Так как свойство нестандартное, следует использовать свои префиксы для каждого браузера:

.unselectable {
    -ms-user-select: none !important;  /* IE, начиная с версии 10 */
    -moz-user-select: none !important; /* Firefox, начиная с версии 2 */
    -khtml-user-select: none !important; /* Konqueror */
    -webkit-user-select: none !important; /* Chrome с версии 6, Safari с версии 3.1, Opera с версии 21 */
    user-select: none !important; /* На случай, если в будущем user-select будет стандартизирован */
    -webkit-touch-callout: none !important; /* Отключаем высплывающее меню на Android и iOS */
}

Некоторые аддоны, такие как Select like a Boss, могут переопределять значение user-select. Поэтому я добавил везде !important.

Вот пример, в котором вы не сможете выделить третий абзац, если используете один из перечисленных выше браузеров:

В этом примере третий абзац невозможно выделить. Это первый абзац.

Это второй абзац.

Это третий абзац.

Это четвёртый абзац.

Надо сказать, что user-select не является защитой от копирования. Его основное назначение — сделать так, чтобы различные вспомогательные элементы страницы не попадали в скопированный текст, когда пользователь выделяет и копирует содержимое страницы. Конечно, вы можете использовать его и в качестве защиты от копирования, но получится довольно ненадёжная защита.