2. Jednostki i typy wartości CSS

Pojęcie wartości w Kaskadowych arkuszach stylów jest bardzo proste – jest to np. liczba z jednostką lub bez jednostki albo słowo kluczowe, które wpisuje się po dwukropku za nazwą deklarowanej własności. Warto jednak wiedzieć, że to, co zostało opisane w poprzednim zdaniu, to w CSS tzw. wartość określona (ang. specified value).

Wartość nadana własności w arkuszu stylów nie zawsze jest tym samym, co wartość ostatecznie zastosowana do elementu na stronie. Najprostszym przykładem takiej sytuacji są wartości procentowe. Jeśli napiszemy width: 50% (jest to nasza wartość określona), to nadamy wybranemu elementowi szerokość równą połowie szerokości jego kontenera.

Konkretna wartość szerokości w tym przypadku zależy więc od tego, jaka będzie szerokość elementu nadrzędnego, od ustawień w elementach marginesów i dopełnienia oraz od innych czynników. Pomijając inne kwestie, jeśli kontener będzie miał 500 pikseli szerokości, to znajdujący się w nim element z ustawieniem width: 50% będzie miał 250 pikseli szerokości i będzie to tzw. wartość użyta (ang. used value).

Procedura obliczania ostatecznych wartości własności CSS przez przeglądarkę internetową to proces czteroetapowy, obejmujący: wartość określoną, wartość obliczoną, wartość użytą oraz wartość rzeczywistą. Dodatkowo warto znać pojęcie wartości początkowej. Wszystkie one są opisane poniżej.

Podstawowe pojęcia

Wartość początkowa (ang. initial value)

Wartość własności CSS określona w definicji tej własności, tzn. nie określona przez przeglądarkę, twórcę arkusza stylów do dokumentu HTML itd. Jest to wartość, która zostaje zastosowana, kiedy nie zostanie znaleziona żadna inna. Na przykład własność font-style ma wartość początkową normal, dzięki czemu, jeśli nie zdecydujemy inaczej, tekst elementów jest prezentowany czcionką normalną, a nie np. pochyloną.

Wartość określona (ang. specified value)

Jest to wartość, która została wpisana w arkuszu stylów lub nadana własności przez przeglądarkę za pośrednictwem mechanizmu dziedziczenia. Ewentualnie, jeśli nie została ona wpisana w arkuszu ani odziedziczona, jako wartość określona zostaje użyta wartość początkowa.

Wartość obliczona (ang. computed value)

Jest to wartość powstała w wyniku przetworzenia wartości określonej na etapie kaskady, na którym np. względne adresy URL są zamieniane na bezwzględne, jednostki względne, typu em, są zamieniane na jednostki bezwzględne, np. piksele, itd. W tej fazie przeglądarka jeszcze nie renderuje dokumentu.

Wartość użyta (ang. used value)

W fazie generowania wartości obliczonych nie wszystkie wartości można ostatecznie określić, ponieważ faza ta nie obejmuje rozmieszczenia elementów w sposób związany z renderowaniem. Wartość użyta to wartość obliczona poddana ostatecznej transformacji na jednostkę bezwzględną. Na przykład procentową szerokość elementu można ostatecznie określić dopiero po określeniu szerokości jego elementu nadrzędnego. Wynik tych obliczeń jest właśnie wartością użytą.

Wartość rzeczywista (ang. actual value)

Jest to wartość użyta dostosowana do warunków, w których będzie wykorzystywana. Na przykład, przeglądarka może być w stanie renderować tylko marginesy o szerokości określonej w pełnych pikselach, więc je zaokrągli. Ta zaokrąglona wartość to wartość rzeczywista.

Wartości globalne CSS

W CSS istnieje kilka wartości, które można przypisywać wszystkim własnościom. Są to tzw. wartości globalne (ang. CSS-wide values), które mają postać słów kluczowych: initial, inherit, unset, revert oraz revert-layer.

• initial: nadaje własności jej wartość początkową.
• inherit: powoduje odziedziczenie odpowiedniej wartości po elemencie nadrzędnym. Jeśli dana własność nie jest dziedziczona, wówczas to ustawienie nie ma żadnego efektu.
• unset: jeśli własność jest dziedziczona, słowo kluczowe unset działa jak inherit, tzn. powoduje, że wartość danej własności zostaje odziedziczona z elementu nadrzędnego. W przeciwnym przypadku działa jak initial.
• revert: przywraca własności wartość odziedziczoną po elemencie nadrzędnym (jeśli jest to własność dziedziczona) lub nadaje jej wartość domyślną określoną w arkuszu stylów przeglądarki (albo użytkownika).

Dokładniejszy opis tych wartości znajduje się w rozdziale Dziedziczenie CSS.

Typy wartości CSS

Każda własność CSS przyjmuje pewną wartość, która może być wyrażona w postaci liczby całkowitej, słowa kluczowego, liczby ułamkowej, liczby z jednostką wielkości itd. Rodzaj przyjmowanej wartości zależy od tego, czego dotyczy dana własność.

W Kaskadowych arkuszach stylów używanych jest kilka typów wartości, które można podzielić na parę kategorii. Dwie główne grupy to typy tekstowe i typy liczbowe, obejmujące po kilka podkategorii. Ponadto w użyciu są także wartości służące do określania obrazów i kolorów. Poniżej znajduje się opis ich wszystkich.

Typy tekstowe

Tekstowe typy danych w CSS obejmują identyfikatory (do których zaliczają się m.in. słowa kluczowe), łańcuchy i adresy URL.

Identyfikatory

Identyfikatory CSS to ciągi znaków, które nie mogą znajdować się w cudzysłowach, aby nie zostały zinterpretowane jako łańcuchy. Wyróżnia się dwa rodzaje identyfikatorów: słowa kluczowe i identyfikatory zdefiniowane przez użytkownika (niestandardowe).

W opisach własności w specyfikacjach CSS identyfikatory ogólnie są oznaczane symbolem <ident>, tzn. jeśli w polu Value (wartość) w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje dowolny identyfikator jako wartość.

Słowa kluczowe

Słowa kluczowe CSS to wartości w postaci ciągów znaków o określonym znaczeniu. Zaliczają się do nich m.in. wszystkie wartości globalne CSS, ale ich lista jest znacznie dłuższa. Są one identyfikatorami, a więc nie mogą być umieszczane w cudzysłowach, ponieważ w takim przypadku zostałyby zinterpretowane jako łańcuchy.

Jeśli dana własność CSS przyjmuje słowa kluczowe jako wartość, to w specyfikacji CSS są one wszystkie podane wprost, np. opis wartości własności font-variant-position w specyfikacji CSS Fonts Module Level 3 wygląda następująco:

Value:	normal | sub | super

To znaczy, że ta własność przyjmuje jako wartość słowo kluczowe normal, sub lub super.

Identyfikatory niestandardowe

Identyfikatory niestandardowe to wartości w postaci ciągów znaków zdefiniowane przez użytkownika. Można je porównać do słów kluczowych, tylko definiowanych właśnie przez użytkownika, a nie określonych z góry w specyfikacji CSS. Tak samo, jak słowa kluczowe, nie mogą być ujmowane w cudzysłowy. Z kolei w odróżnieniu od nich w identyfikatorach rozróżniana jest wielkość liter, tzn. na przykład ident1 nie jest tym samym, co Ident1.

Pierwszym znakiem identyfikatora nie może być cyfra ani łącznik, po którym znajduje się cyfra lub kolejny łącznik. Ponadto identyfikatory niestandardowe mogą zawierać następujące znaki:

• wielkie i małe litery alfabetu łacińskiego,
• cyfry,
• łączniki,
• znaki podkreślenia,
• symbole zastępcze składające się z ukośnika i od jednej do sześciu cyfr szesnastkowych reprezentujących jednostkę kodową Unicode.

Identyfikatorów niestandardowych używa się między innymi we własnościach związanych z definiowaniem liczników numeracji list, czyli counter-reset i counter-increment:

h2 {
  counter-reset: mojLicznik;
}

Powyższa reguła definiuje licznik o nazwie mojLicznik i nadaje mu wartość początkową 0. Ciąg znaków mojLicznik jest identyfikatorem niestandardowym, zdefiniowanym przez użytkownika.

W opisach własności w specyfikacjach CSS identyfikatory niestandardowe są oznaczane symbolem <custom-ident>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje identyfikator niestandardowy jako wartość.

Adresy URL

Adresy URL w CSS definiuje się za pomocą funkcji url(), której należy przekazać względny lub bezwzględny adres URL, umieszczony w cudzysłowie podwójnym lub prostym albo bez cudzysłowu, np.:

background-image: url("tree.png");
background-image: url('http://shebang.pl/tree.png');
background-image: url(/img/tree.png);

Wszystkie powyższe deklaracje są prawidłowe – każda z nich wstawi obraz o nazwie tree.png w tle wybranego elementu.

W opisach własności w specyfikacjach CSS adresy URL ogólnie są oznaczane symbolem <url>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje adres URL jako wartość.

Łańcuchy znaków

Łańcuchy znaków to ciągi znaków umieszczone w cudzysłowie prostym podwójnym lub pojedynczym. Wartości tego typu są używane przez wiele własności CSS, np. content:

.uwaga::before {
  content: "Uwaga";
}

Ta reguła dodaje słowo Uwaga przed każdym elementem należącym do klasy uwaga.

W opisach własności w specyfikacjach CSS łańcuchy znaków są oznaczane symbolem <string>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje łańcuch jako wartość.

Typy liczbowe

Typy liczbowe to najliczniejsza grupa typów wartości w CSS. Obejmuje kilka kategorii, które łącznie zawierają kilkadziesiąt pozycji.

Liczby całkowite i ułamkowe

Niektóre własności CSS przyjmują wartości w postaci liczb całkowitych lub ułamkowych albo jednych i drugich.

Liczby całkowite (ang. integer) to dodatnie i ujemne liczby bez części ułamkowej, które mogą być poprzedzone znakiem + (liczby dodatnie) lub - (liczby ujemne). Znak + jest opcjonalny, tzn. brak jakiegokolwiek znaku oznacza to samo, co obecność znaku +, np. +23, 23, -49, 16 itd.

W opisach własności w specyfikacjach CSS liczby całkowite są oznaczane symbolem <integer>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje liczbę całkowitą jako wartość.

Liczby ułamkowe w CSS to reprezentacja liczb rzeczywistych. Mogą one zawierać kropkę oddzielającą część ułamkową od całkowitej, ale nie muszą (zobacz także Przecinek czy kropka, aby dowiedzieć się, kiedy używać kropki, a kiedy przecinka, w ułamkach dziesiętnych). Podobnie jak liczby całkowite, liczby ułamkowe mogą być poprzedzone znakiem + (opcjonalny) lub -, oznaczającymi odpowiednio wartość dodatnią i ujemną, np. 12, 0.34, -0.6.

Liczby ułamkowe są nadzbiorem liczb całkowitych, tzn. zbiór liczb rzeczywistych obejmuje także wszystkie liczby całkowite.

W opisach własności w specyfikacjach CSS liczby rzeczywiste są oznaczane symbolem <number>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje liczbę rzeczywistą jako wartość.

Wartości procentowe

Niektóre własności przyjmują wartości procentowe, np. 20%, 35% itd. Wartości te składają się z liczby i znaku % bez spacji. Dodatkowo mogą być poprzedzone znakiem + lub -, oznaczającym odpowiednio wartość dodatnią lub ujemną. Znak + jest opcjonalny – oznacza to samo, co brak jakiegokolwiek znaku.

W opisach własności w specyfikacjach CSS wartości procentowe są oznaczane symbolem <percentage>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje wartość procentową.

Liczby z jednostką

Najszerszą grupę wartości liczbowych w CSS stanowią wartości z jednostką. Mają one postać liczby całkowitej lub ułamkowej z dołączoną jednostką bez jakiegokolwiek znaku pomiędzy nimi, np. 30px, 16em, 12rem itd. W przypadku wartości 0 podawanie jednostki nie jest konieczne.

W nazwach jednostek wielkość liter nie ma znaczenia, tzn. można napisać 12rem, 12rEm, 12Rem, 12REM itd., choć tradycyjnie jednostki zapisuje się małymi literami.

W opisach własności w specyfikacjach CSS liczby z jednostką są oznaczane symbolem <dimension>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje liczbę z jednostką jako wartość.

W CSS dostępny jest bogaty wybór jednostek, wśród których największą grupę stanowią jednostki długości. Oprócz nich istnieją także jednostki czasu, jednostki miary kątów i parę innych grup, których opis znajduje się poniżej.

Jednostki długości CSS

Jednostki długości CSS (ang. distance unit lub length unit) dzielą się na względne i bezwzględne. Ogólnie w opisach własności w specyfikacjach CSS wartości z jednostkami długości są oznaczane symbolem <length>, tzn. jeśli w polu Value w opisie własności znajduje się ten symbol, to znaczy, że własność ta przyjmuje dowolną wartość z jednostką długości.

Względne jednostki długości

Względne jednostki długości CSS odnoszą się do pewnej wielkości w otaczającym środowisku, np. jednostka rem odnosi się do rozmiaru pisma elementu głównego dokumentu, a lh – do wysokości wiersza elementu.

Na przykład, jeśli rozmiar pisma elementu html wynosi 16 pikseli, to ustawienie 2rem oznacza 32 piksele. A jeżeli rozmiar pisma elementu html zmieni się na 20 pikseli, to 2rem będzie oznaczać 40 pikseli.

W najnowszej specyfikacji jednostek i wartości CSS (CSS Values and Units Module Level 4) jednostki względne podzielono na jednostki odnoszące się do właściwości pisma i jednostki odnoszące się do rozmiaru obszaru widoku.

Poniższa tabela zawiera opis względnych jednostek długości CSS odnoszących się do właściwości pisma.

Jednostki odnoszące się do obszaru widoku wymagają wyjaśnienia paru dodatkowych pojęć. Zaczniemy od samego pojęcia obszaru widoku.

Obszar widoku (ang. viewport) w przeglądarce internetowej to obszar, w którym jest renderowana strona – nie obejmuje on więc elementów interfejsu użytkownika, takich jak pasek narzędzi, pasek kart czy pasek dolny.

Ta definicja dobrze sprawdza się w przypadku przeglądarek na komputerach stacjonarnych, natomiast gorzej w odniesieniu do urządzeń mobilnych. Wiąże się to z tym, że w tych urządzeniach na rozmiar obszaru widoku wpływ mają elementy dynamiczne, takie jak pojawiające się i znikające w określonych sytuacjach paski narzędzi, paski adresu, czy paski kart.

Kiedy np. użytkownik przegląda stronę internetową na smartfonie, to podczas przewijania w dół paski narzędzi znikają, a podczas przewijania w górę pojawiają się z powrotem. To zaburza prezentację stron na ekranie.

W celu rozwiązania tego problemu grupa robocza ds. CSS opracowała nowy zestaw jednostek uwzględniających tę dynamiczną naturę obszarów widoku w urządzeniach mobilnych. Aby dobrze zrozumieć ich działanie, należy znać kilka związanych z nimi pojęć opisujących różne stany obszaru widoku:

Duży obszar widoku (ang. large viewport) Obszar widoku w stanie interfejsu, kiedy nie są wyświetlone żadne jego dynamiczne elementy.

Mały obszar widoku (ang. small viewport) Obszar widoku w stanie interfejsu, kiedy jego dynamiczne elementy są wyświetlone.

Dynamiczny obszar widoku (ang. dynamic viewport) Obszar widoku dynamicznie dostosowujący się do interfejsu użytkownika, tzn. zmieniający rozmiar w zależności od tego, czy dynamiczne elementy interfejsu są widoczne, czy nie. Kiedy elementy te są widoczne, to dynamiczny obszar widoku jest równy małemu obszarowi widoku. W przeciwnym przypadku jest on równy dużemu obszarowi widoku.

Podstawowe jednostki odnoszące się do obszaru widoku to vw, vh, vi, vb, vmin oraz vmax. Ponadto każda z nich ma trzy dodatkowe odpowiedniki odnoszące się do małego, dużego i dynamicznego obszaru widoku, poprzedzone odpowiednio przedrostkiem s, l lub d, np. svw, lvb, dvmax itd.

Poniższa tabela zawiera opis jednostek CSS odnoszących się do właściwości obszarów widoku.

Ponadto istnieją jeszcze jednostki względne odnoszące się do wymiarów kontenerów w zapytaniach kontenerowych. W poniższej tabeli znajduje się ich opis.

Bezwzględne jednostki długości

Bezwzględne jednostki długości są ze sobą powiązane i odnoszą się do pewnej miary fizycznej, więc najbardziej są przydatne w przypadku, gdy dokładnie wiadomo, gdzie będzie prezentowany dokument, np. w druku. Poniższa tabela zawiera ich wykaz.

Wszystkie bezwzględne jednostki długości CSS odnoszą do wymiaru fizycznego lub do rozmiaru piksela referencyjnego (ang. reference pixel).

W przypadku druku jednostką zakotwiczenia (ang. anchor unit) jest wielkość fizyczna (np. centymetr lub cal). Natomiast w przypadku ekranów zalecaną jednostką zakotwiczenia powinien być piksel referencyjny.

Kąty

W CSS dostępne są cztery jednostki miary kątów, których opis znajduje się w poniższej tabeli.

Za pomocą tych jednostek kąt 90 stopni można wyrazić następująco: 90deg, 100grad, 0.25turn lub około 1.57rad.

W opisach własności CSS jednostki kątowe są oznaczane symbolem <angle>.

Czas trwania

W CSS dostępne są dwie jednostki czasu trwania, których opis znajduje się w poniższej tabeli.

W opisach własności CSS jednostki czasu trwania są oznaczane symbolem <time>.

Rozdzielczość

W CSS dostępne są trzy jednostki rozdzielczości, których opis znajduje się w poniższej tabeli.

W opisach własności CSS jednostki rozdzielczości są oznaczane symbolem <resolution>.

Częstotliwość

W CSS dostępne są dwie jednostki częstotliwości, których opis znajduje się w poniższej tabeli.

W opisach własności CSS jednostki częstotliwości będą oznaczane symbolem <frequency>. Obecnie nie są używane w żadnych własnościach, ale mogą zostać użyte w przyszłości.

Inne typy

Obrazy

W specyfikacjach CSS jest zdefiniowanych kilka sposobów określania obrazów jako wartości własności. Dwa podstawowe i najlepiej zdefiniowane z nich to użycie funkcji url() oraz użycie funkcji gradientowych, np. linear-gradient().

Ponadto w CSS istnieją także inne metody definiowania obrazów, takie jak na przykład funkcja image() czy funkcja element(), ale są to składniki specyfikacji, która jest we wczesnej fazie rozwoju i na razie nie są jeszcze powszechnie obsługiwane przez przeglądarki.

W opisach własności CSS wartości obrazów są oznaczane symbolem <image>.

Kolory

W CSS jest dostępnych wiele notacji do wyrażania wartości kolorów. Ich szczegółowy opis znajduje się w rozdziale Kolory CSS.

Pozycja

Wartości służące do określania pozycji elementów, np. obrazów w tle, w CSS są oznaczane symbolem <position>. Wyraża się je w jednostkach długości i procentach.

Wartości opcjonalne

Niektóre wartości funkcji lub własności CSS są opcjonalne, tzn. można ich użyć, ale nie jest to obowiązkowe. Dla uproszczenia w definicjach składni wartości opcjonalne CSS umieszczamy w nawiasie kwadratowym, np.:

lch(L C H[/ alfa]);

Ta definicja składni funkcji lch() oznacza, że parametry L, C i H są obowiązkowe, a parametr alfa jest opcjonalny.

Nieobsługiwane wartości

Nieobsługiwane wartości powinny być ignorowane przez przeglądarki, tak jakby były to wartości nieprawidłowe.