CSS від А до Я: як використовувати властивість color

16

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з властивістю color.

C значить color

Властивість color використовується для зміни кольору тексту на сторінці. А як воно працює з виділеним текстом? Виділений мишею текст можна стилізувати за допомогою псевдоэлемента ::selection. Змінити у виділеному тексті можна не усі властивості. Ми можемо змінювати властивості:

color

background-color

cursor

outline

text-decoration

text-shadow

Незважаючи на обмеження за властивостями, піддається зміні за допомогою псевдоэлемента ::selection, ми можемо задавати різні колір вибраного тексту для окремих частин сторінки за допомогою каскадування.

Спробуйте виділити текст в параграфах в Codepen демо.

Вендорные префікси

У Firefox для псевдоэлемента ::selection все ще потрібен вендорний префікс –moz. Через особливості парсинга стилів в Firefox не працює поділ селекторів коми для даного псевдоэлемента. Для правильної роботи в цьому браузері вам доведеться дописати ще один блок стилів.

/* не спрацює */
::selection,
::-moz-selection {
color: white;
background: green;
}
/* спрацює */
::selection {
color: white;
background: green;
}
::-moz-selection {
color: white;
background: green;
}