Переопределение цвета выделенной текстовой области средствами CSS.

Перевод статьи:  Overriding The Default Text Selection Color With CSS.
Автор:  Chris Coyier.

В этой статье мы рассмотрим пример применения одного из полезнейших псевдоклассов, предусмотренных спецификацией CSS3 — ::selection. Пример предусматривает возможность переопределения используемого по умолчанию значения подсветки выделенного пользователем текста на уровне браузера или же предусмотренного системными установками. (*На момент перевода статьи приведенный в статье код работает во всех последних версиях популярных браузеров, и как следовало ожидать, не работает в IE ранних версий.). Применять такое оформление у себя на сайте можно без опасений, так как худшее, что может произойти в этом случае – это полное игнорирование приведенного в статье CSS кода браузером. Но учитывая постоянную тенденцию подгонки новых версий браузеров к последним требованиям CSS стандартов, можно с уверенностью сказать, что этот код будет благополучно работать в будущем, как это могут наблюдать пользователи всех современных браузеров.

Вот так выглядит шаблон CSS кода для нашего случая:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

В рамках CSS правила с селектором, имеющим в своем составе псевдо-элемент ::selection на данный момент работают только два свойства — background и color. Последнее свойство – цвет шрифта (color) не работает в Firefox. Поэтому для придания большей оригинальности дизайну документа, в создавшейся ситуации можно посоветовать, лишь применить разное цветовое оформление фона выделяемого текста в различных участках страницы, что можно увидеть на этой демонстрационной странице. (*Хотя такое оформление внешнего вида сайта не отвечает моим (и не только моим) предпочтениям в веб-дизайне, но в рамки наглядного примера этот подход вписывается идеально).

Для реализации такого эффекта достаточно лишь назначить нескольким элементам абзацам страницы различные классы, предусматривающие разный цвет фона для выделяемой области текста:

p.red::selection {
background: #ffb7b6;
}
p.red::-moz-selection {
background: #ffb7b6;
}
p.blue::selection {
background: #a8d2ff;
}
p.blue::-moz-selection {
background: #a8d2ff;
}
p.yellow::selection {
background: #fff2a7;
}
p.yellow::-moz-selection {
background: #fff2a7;
}
*Данная статья, хотя и не является новой и ее аналоги можно найти на других веб-ресурсах, но в этой версии я постарался уточнить некоторые моменты, касающиеся поддержки браузерами рассматриваемого здесь примера.
* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *