Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

17.09.2009 | Рубрики: Полезняшки
Тэги: css, цвет выделения текста

В спецификации CSS за номером 3 есть интересная фишка — можно сменить цвета выделенного текста на своем сайте с тех, что используются по-умолчанию браузерами, на свои собственные. Полезная эта фишка или нет — каждый решит самостоятельно. В IE она не работает (про 8-й не знаю, не проверял). Однако несомненно, данный эффект может (не)приятно удивить тех, кто копирует ваши нетленки. Особенно, если сделать цвета выделения одинаковыми с фоном. Вроде что-то выделил, а ни черта не видно.

Для реализации эффекта достаточно добавить в лист стилей CSS парочку правил:

::selection {
background: #add2e1;
color: #000;
}
::-moz-selection {
background: #add2e1;
color: #000;
}

Первый набор работает на браузеры Opera, Chrome и Safari, а второй — для FireFox-а. В самих наборах все достаточно прозрачно: background задает цвет фона для выделения, color — цвет самого шрифта соответственно. Обратите внимение: перед каждым из правил стоят двойные двоеточия. Никаких пробелов ни до, ни после них быть не должно. Если вам, к примеру, нужно задать такой эффект для какой-либо конкретной части текста на сайте, то пишите это следующим образом:

p.text::selection {
background: #add2e1;
color: #000;
}

Соответственно, для абзаца с классом text будет применен данный эффект, а для всего остального текста — цвета браузера по-умолчанию.