CSS3: CSS Color Module level 3

Po opisaniu nowości związanych z Basic User Interface Module, postanowiłem przyjrzeć się CSS Color Module level 3, który udostępnia potrzebne narzędzia do definiowania kolorów na stronie. Do dyspozycji dostajemy m.in. obsługę modelu rgb i hsl. Jak to ugryźć? Zapraszam do lektury.

Cechy

Do specyfikacji Color Module włączone zostały dwie dobrze znane cechy. Pierwsza z nich to color, która ustawia kolor czcionki dla konkretnego elementu. Wszyscy znamy tę cechę i zapewne niejeden raz z niej korzystaliśmy, więc w sumie możemy powiedzieć że moduł Color nie jest nam obcy :D.

body{
     color: black;
}

Drugą, włączoną do specyfikacji cechą jest opacity. Jej zadaniem jest nadawanie przezroczystości z przedziału 0.0 (element w pełni przezroczysty) do 1.0 (element w pełni widoczny). Dla przykładu:

div{
     opacity: 0.5;
}

Wartości

Nazwa koloru

Najprostszą wartością określającą kolor jest jego nazwa. Dla przykładu:

body{
     color: black;
     background-color: white;
}

Powyższa deklaracja, nada kolor czarny wszystkim tekstom zawartym w dokumencie, któremu dodatkowo ustawiamy kolor tła na biały. Pełną lista nazw kolorów znaleźć można w specyfikacji.

Warto tu wspomnieć o możliwości korzystania z kolorów systemowych, choćby takich jak Scrollbar czy WindowFrame, jednak przy ich stosowaniu trzeba uważać, gdyż użytkownicy różnych systemów, mogą zobaczyć odmienne efekty (Dzięki css3.pl. Jak najbardziej kolory systemowe posiadają status deprecated, więc nie zaleca się ich używania.

RGB

Na temat modelu RGB nie będę się tu rozpisywał, powiem tylko o tym jak go wykorzystać w CSS. Samo RGB nie jest nowością w CSS3, ale jako że należy do modułu Color, warto chociaż o nim wspomnieć. Z tego modelu możemy korzystać na kilka sposobów:

  • #RRGGBB – podając po kolei wartość kolorów podstawowych RR (red), GG (green), BB (blue) w systemie szesnastkowym,
  • #RGB – wersja skrócona powyższej metody, np. zamiast #0055ff możemy napisać #05f,
  • rgb(R, G, B) – podając oddzielnie wartość każdej składowej w systemie dziesiętnym. Wartość ta musi być z przedziału od 0 do 255,
  • rgb(R%, G%, B%) – podając wartość procentową każdego kanału. Warto pamiętać że po każdej liczbie musi znaleźć się znak % nawet po 0.

Przykład:

color: #ffff00;
color: #ff0;
color: rgb(255, 255, 0);
color: rgb(100%, 100%, 0%);

Zastosowanie każdej z tych wartości w efekcie da nam kolor żółty.

RGBA

Nareszcie jakaś nowość ze świata CSS3! Model RGBA wzbogaca omówiony powyżej model RGB o kanał Alpha. Do czego nam taki kanał się przyda? A no do ustawienia przezroczystości nadanemu kolorowi. Dla przykładu:

color: rgba(255, 255, 0, 0.5);
color: rgba(100%, 100%, 0%, 0.5);

… powyższe deklaracje w efekcie dadzą nam półprzezroczysty kolor żółty.

HSL

Metoda HSL, wprowadzona w CSS3, jest alternatywą dla RGB, w której każdej barwie przyporządkowany jest jeden punkt w przestrzeni trójwymiarowej identyfikowany przez trzy składowe: (h, s, l), z kórych:

  • H – barwa (ang. Hue), o wartościach z przedziału: od 0 do 360 stopni.
  • S – nasycenie koloru (ang. Saturation), z przedziału: 0…1 albo 0…100%
  • L – średnie światło białe (ang. Lightness), z przedziału: 0…1 albo 0…100%.

Dla przykładu kolor niebieski w modelu HSL wygłada tak:

color: hsl(240,100%, 50%);

HSLA

Również model HSL został wzbogacony o kanał Alpha, a sposób użycia jest taki sam jak w przypadku RGBA:

color: hsla(240, 100%, 50%, 0.5);

Transparent

Jako wartość możemy również podać słowo kluczowe transparent, które ustawia przezroczystość koloru na 0. Zamiast pisać:

color: rgba(0,0,0,0);

Możemy napisać:

color: transparent

currentColor

Ostatnią wartością którą opisze jest zmienna currentColor. Jako wartość przyjmuje ona kolor tekstu elementu w jakim została użyta. Akceptują ją cechy:

  • borders
  • box-shadow
  • outlines
  • background

Dlaczego nie wymieniłem tutaj cechy color? Ponieważ po nadaniu jej currentColor, zostanie ona potraktowana jak inherit. Dla przykładu:

body{
     color: black;
}

div{
     color: currentColor;
     border: 5px solid currentColor;
     box-shadow: 0 0 5px solid currentColor;
}

Dzięki takiej deklaracji element div będzie miał obramowanie i cień w kolorze czarnym. Kolor tekstu również będzie czarny, ale głównie dzięki dziedziczeniu właściwości po elemencie nadrzędnym.

Z currentColor trzeba jednak uważać, gdyż w tym przykładzie:

div {
   color: blue;
   border: 1px solid currentColor;
   color: black;
 }

… i tak efektem będzie div z czarnym obramowaniem, pomimo że w trakcie użycia zmiennej był ustawiony kolor niebieski.

Podsumowanie

Przedstawiony dziś moduł Color, jak widać nie jest jakoś bardzo skomplikowany a większość rzeczy jest już znana ze specyfikacji CSS 2.1. Niemniej jednak warto poświęcić choćby chwilę na zapoznanie się i przetestowanie niektórych możliwości tego modułu.