Нещодавно звернув увагу на одну цікаву властивість 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.
Браузери, які підтримують:
всі | всі | всі | 27+ | 10+ | 4.1+ | 7.1+ |
Тепер що стосується всіма улюбленого 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 не дозволяє цього веб-сайту виконання скриптів…бла-бла-бла. Натисніть для вибору потрібної дії.
Так от, поки ви не дозволите скрипту відпрацювати — можна копіювати скільки душі завгодно.
Відповісти