CSS властивість user-select

Нещодавно звернув увагу на одну цікаву властивість CSS, яке дозволяє виключити виділення тексту на елементах сторінки. Опишу ситуацію, проблема була з блоком, який мав скролінг робочої області. Робоча область містила текст та інші елементи. При скролінгу іноді виникала неприємна річ: деякі елементи блоку а так же текст в ньому довільно виділялися, що насправді виглядало не дуже. В результаті був пошук, і знайшлося рішення, воно, мабуть, було одним з простих — це скористатися властивістю user-select в CSS. Після цього все що знаходиться в блоці просто перестане виділятися курсором миші, це в принципі і було потрібно.

Приклад CSS:

.content {
-webkit-user-select: none; /* для Chrome та Safari */
-moz-user-select: none; /* для Firefox */
-ms-user-select: none; /* для IE 10+ */
-o-user-select:none;
-khtml-user-select: none;
user-select: none;
}

Варто розуміти, що дана властивість може не працювати в деяких браузерах, особливо, що стосується старих IE. Офіційно поки не підтримується, проте багато корисні властивості, які вже сьогодні розписані в стандарти, починали своє існування подібним чином. У всякому разі, я скористався CSS властивість user-select.

Браузери, які підтримують:

Тепер що стосується всіма улюбленого IE, то тут все трохи інакше, робиться таким чином в коді html:

текст

За допомогою спеціального атрибута onselectstart, забороняємо виділення тексту елемента. Для заборони виділення тексту ключовим стало властивість user-select, ця властивість не кроссбраузерно, проте в кожному браузері є своя реалізація, яка працює. Зібравши все до купи, ми отримали запис, зазначену вище.

Додав: htmaker, 13.10.2015 р.
(1 голосів, середній: 5,00 з 5)

Завантаження…

Діліться з друзями:

См. також:

Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript

Коментарі

Олексій пише:
21.04.2018 у 20:27

Тепер що стосується всіма улюбленого IE, то тут все трохи інакше, робиться таким чином в коді html:
текст

А він, рідний (IE) пише — В цілях безпеки IE не дозволяє цього веб-сайту виконання скриптів…бла-бла-бла. Натисніть для вибору потрібної дії.
Так от, поки ви не дозволите скрипту відпрацювати — можна копіювати скільки душі завгодно.

Відповісти