:: виділення - CSS-хитрощі

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

p::-moz-selection ( color: red) p::selection ( color: red; )

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

Як видно вище, ви можете укласти стиль ::selectionна окремі елементи. Ви також можете стилізувати всю сторінку, опустивши голий псевдоелемент у свою таблицю стилів.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Є лише три властивості, з якими можна ::selectionпрацювати:

color
background( background-color, background-image)
text-shadow

Дивіться тести Pen :: selection на Кріс Койєр (@chriscoyier) на CodePen.

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

Також не намагайтеся цього:

p::-moz-selection, p::selection ( color: red; )

Коли браузери знаходять частину виділення, яке вони не розуміють, вони скидають ціле, тому це весь час не вдаватиметься.

Одним з найбільш корисних способів використання ::selectionє вимкнення a text-shadowпід час вибору. А text-shadowможе зіткнутись із кольором тла виділення та ускладнити читання тексту. Встановіть, text-shadow: none;щоб зробити текст чітким і легким для читання під час виділення.

Дивіться Pen-text :: selection text-shadow Кріса Койєра (@chriscoyier) на CodePen.

Фантазії :: вибір

У парі з Sass або будь-яким іншим препроцесором ви можете робити справді круті ефекти ::selection. Виберіть текст у демонстраційній версії нижче:

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

Ще одна неміла, але весела маленька хитрість - розкриття зображення за допомогою виділеного тексту.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.