Міняємо колір фону виділеного тексту за допомогою css

Одна з цікавих можливостей специфікації CSS3, яка може використовуватися вже сьогодні - це псевдоелемент. selection. дозволяє змінювати колір фону виділеного тексту, заданий у вашій операційній системі, на будь-який інший колір на ваш розсуд.

На даний момент. selection підтримують такі браузери:

  • Safari;
  • Google Chrome;
  • FireFox;
  • Opera 9.5 (починаючи з билда 9770).

Safari дещо по-іншому відображає результат в порівнянні з FireFox і Opera (останні два браузера обробляють цей псевдоелемент ідентично).

Ось так це виглядає в CSS:

З селектором. selection буде працювати тільки властивість background. тому його можна застосовувати, наприклад, щоб зробити відрізняється фон виділення для декількох різних абзаців на сторінці:

  • Приклад з різними фонами виділених абзаців.
  • Селектор. selection можна використовувати і для того, щоб заховати секретний текст :) ...
  • ... або навіть картинку.
  • Приклад прямо в цьому пості. Повиделяйте текст цього поста в одному з браузерів, що підтримують даний селектор.

Практичність застосування даної штуки, звичайно, під питанням. Проте вона показує, що розробники вищевказаних браузерів прагнуть до повноцінного підтримки стандартів, поступово впроваджуючи подібні до цієї функції.

P.S. Під час тестування селектора на цьому пості, зауважив, що він не працює в Safari і FireFox, якщо його застосувати до тегу списку