QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Итак, согласно спецификации CSS3 псевдоэлемент ::select применяет стиль к выделенному пользователем тексту. Допускаются следующие свойства: color, background и background-color. Псевдоэлемент поддерживается следующими браузерами: IE 9.0+, Chrome 2.0+, Opera 9.5+, Safari 1.1+, Android 1.0+, iOS 1.0+. Для Mozilla Firefox 1.0+ используется нестандартный синтаксис ::-moz-selection.

Для примера можете использовать следующий сниппет:

/* webkit, opera, IE9 */
.blue::selection {
 background:#3c6bb4; /*Изменяем цвет фона на синий*/
}
/* mozilla firefox */
.blue::-moz-selection {
 background:#3c6bb4;
}
/* webkit, opera, IE9 */
.red::selection {
 color:#333399; /*Изменяем цвет текста на синий*/
 background:#bd362f; /*Изменяем цвет фона на красный*/
}
/* mozilla firefox */
.red::-moz-selection {
 color:#333399;
 background:#bd362f;
}
/* webkit, opera, IE9 */
.white::selection {
 color:#fff; /*Изменяем цвет текста на белый*/
}
/* mozilla firefox */
.white::-moz-selection {
 color:#fff;
}

Демо

Итак, если мы можем манипулировать цветом областей выделения на странице, то почему бы нам вообще не запретить что-либо выделять? Да, да, да. Я веду к извечному вопросу о защите уникального контента от копирования. Существует множество различных способов это сделать: использование java-скриптов для запрета действий правой клавишей мыши, превращение текста в картинку и т.д. Понятно, что все эти методы рассчитаны на случайных «копипастеров», т.к. если очень надо, то и исходник скопировать можно. Вот и с помощью стилей CSS теперь можно запретить копировать контент страницы.

Используйте следующий сниппет для защиты контента:

.no_select {
 -webkit-user-select: none; /* Webkit */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* IE 10 */
}

Значения, которые может принимать это свойство:

• Auto — Разрешается выделять весь контент в элементе.
• None — Запрещается выделение всего контента в элементе.
• Text — Посетитель может выделить только текст в элементе.

Браузеры, поддерживающие это свойство: webkit, Firefox и IE 10. Opera пока не поддерживает, но в будущем поддержка планируется.

Демо