Меняем цвет фона выделенного текста с помощью CSS
Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня - это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет по вашему усмотрению.
На данный момент ::selection поддерживают следующие браузеры:
- Safari;
- Google Chrome;
- FireFox;
- Opera 9.5 (начиная с билда 9770).
Safari несколько по-другому отображает результат в сравнении с FireFox и Opera (последние два браузера обрабатывают этот псевдоэлемент идентично).
Вот так это выглядит в CSS:
1 2 3 4 5 6 | ::selection { background: #FFB7B7; /* Safari, Chrome, Opera */ } ::-moz-selection { background: #FFB7B7; /* FireFox */ } |
С селектором ::selection будет работать только свойство background, поэтому его можно применять, например, чтобы сделать отличающийся фон выделения для нескольких разных абзацев на странице:
1 2 3 4 5 6 7 8 | p.red::selection {background: #FFB7B7;} p.red::-moz-selection {background: #FFB7B7;} p.blue::selection {background: #A8D1FF;} p.blue::-moz-selection {background: #A8D1FF;} p.yellow::selection {background: #FFF2A8;} p.yellow::-moz-selection {background: #FFF2A8;} |
Примеры
- Пример с разными фонами выделенных абзацев.
- Селектор ::selection можно использовать и для того, чтобы спрятать секретный текст :) …
- … или даже картинку.
- Пример прямо в этом посте. Повыделяйте текст этого поста в одном из браузеров, поддерживающих данный селектор.
Практичность применения данной штуки, конечно, под вопросом. Тем не менее она показывает, что разработчики вышеуказанных браузеров стремятся к полноценной поддержке стандартов, постепенно внедряя подобные этой функции.
P.S. Во время тестирования селектора на этом посте, заметил, что он не работает в Safari и FireFox, если его применить к тегу списка <ul>, а работает только тогда, когда класс прописан непосредственно к элементу списка <li>.
По-моему малополезная вещь, но выглядит действительно прикольно :)
да вещь маловостребованная, но она вносит изюминку в сайт, когда выделяют текст.
Очень интересно, я даже не знал, что такое возможно =))
И работает ведь!
Прикольненько так. Мелочь, но приятно.
Уникальный Человек, это еще цветочки! :)
CSS3 еще ого-го сколько всего интересного позволяет делать. Благо, многое уже сейчас поддерживается современными браузерами… Так что не за горами те дни, когда все вкусности можно будет использовать в полной мере.
Из таких мелочей и складывается хорошее впечатление от сайта.
Каскадные таблицы стилей порой творят чудеса, -это козырные карты любого дизайнера
[quote comment=”2702″]Из таких мелочей и складывается хорошее впечатление от сайта.[/quote]
Верно, а хорошее впечатление увеличивает вероятность повторного посещения сайта.
Вроде ж на Хабре было такое…
А вот это - весьма полезный пост. побольше бы таких!
Полезная статья. Скинул своим верстальщикам. спасибо
zvenyka, к сожалению нет.
Занятная фича. По моему очень интересно будет смотрется на сайте с разынми цветовыми блоками.
Максим, да, я видел на каком-то сайте пример выделения под цвет общего дизайн - приятная мелочь.
Нужно иметь не голову, а справочник, чтобы помнить все эти приятные мелочи :)
Интересно, а в гугли используют такуюже фишку, когда выделяю искомые тобой слова или там , что то другое?
Бестолковые рассуждения полезна фича или нет. Она бесполезна хотя бы потому, что не является кроссбраузерной, всё остальное - можете оставить. Более того, она настолько НЕ кроссбраузерна, что 90% пользователей сети (которые используют MSIE) даже не увидят ваших заморочек. Если вас греет мысль о том, что те жалкие 10% юзеров, что пользуются мозилой и сафари, увидят “вашу фичу”, - останавливать от её использования не стану :)
Приятная вещь. Все споры о полезности считаю бессмысленными, т.к. ком-то до полного счастья не хватает этой фишки, а кому-то она до фонаря.
Классное “начало праздника”! Ждем новые приятные, а главное - “удобные” элементы от W3C… Кстати, первым делом, как зашел в блог, заметил желтенькое выделение: было жутко приятно)))
Ссылка “спрятать секретный текст :) …” выдает 404
Чувак, все канешно круто, но тут не все супер пупир умные верстальшики и т.д.
Мне вот эта фича очень понравилась. Но реализовать её не могу. т.к ты банально даже не написал как её поставить =\
Изучай CSS, и все станет ясно.
Прив, слушай… не в курсе, а под IE хака пока не создали?
Вряд ли.
На самом деле, это малоизвестная фича. Вот я только вчера узнал (-:
То, что не поддерживает ie,— их проблема, тем более люди, юзающие этот браузер, на подобные красивости и не обращают внимания.
Проверил в IE8 работает
Работает не только background, но и color.
В Сафари и Хроме также можно применить к картинкам, в Fx не работает.
Мне вот интересно, в последней редакции спецификации по css3-селекторам псевдо-элемент ::selection отсутствует, хотя в предыдущей редакции он был — значит ли это, что в w3c решили от него отказаться? Или я чего-то не понимаю?