Здравствуйте, уважаемые читатели!

При разработке очередного сайта возникла задача запретить выделение DIV блока при помощи CSS. В принципе, считаю полный запрет выделения текста бесполезной ерундой для фанатиков, но в моем случае все по другому.

Итак, на протяжении двух недель занимаюсь разработкой сайта для свой веб-студии. Что за веб-студия, как и зачем — расскажу все позже, когда смогу показать проект. Пока каждый вечер возникают идеи по доработке и улучшению, поэтому пока не хочется показывать сырой проект. Особо хитрые и внимательные с легкостью смогут найти нужные ссылки на студию, но не советую это делать до финальной версии сайта, если только хотите позвонить поговорить или забежать к нам в офис :).

Запрет выделения текста потребовался для внедрения слайдера контента на jQuery и CSS. Слайдер достаточно симпотичный, единственное что мне не понравилось — это несовместимость с другими jQuery плагинами, приходится адаптировать код вызова, что бы все работало.

Дак вот, при листании слайдера влево или вправо при 3-4 клике весь блок выделялся, вместе с картинками и текстом:

Поэтому в голову забралась мысль о том, что необходимо просто запретить выделение текста в данном блоке. Честно говоря не сразу удалось найти способ запрета выделения текста при помощи CSS, потому что в сети очень много всего, кроме того, что нужно, включая запрет выделения при помощи jQuery. Возникает вопрос — «НАХРЕНА?»

В итоге способ все же был найден. Для нужного блока в CSS стиль необходимо прописать следующие строчки кода:

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

..и вуаля — текст перестает выделяться. В моем случае это наверное наилучший выход из ситуации. Для тех, кто соберется внедрять код на свой сайт для полного запрета выделения, к примеру в BODY, хочу сказать, что это доставит огромных хлопот вашим посетителям. Конечно вы избавитесь от 80% людей, которые хотят тупо скопировать и перенести ваши тексты и материалы, но вместе с ними вы потеряете часть хорошей аудитории. Поэтому перед внедрением обязательно подумайте — стоит ли оно того? Я бы на вашем месте не стал!

Ну вот как-то так я пожалуй закончу статью о том, как запретить выделение текста при помощи CSS. Всем добра :)!

P.S. При чем тут гамбургер на первой картинке? Просто так, решил пошутить, что бы у Вас слюни потекли :))))


Раздел: Сайтостроение
Тема: Как запретить выделение текста при помощи CSS
Протраффик.RU: www.protraffik.ru