Przejdź do treści

Jednostki

Długość

Jednostki długości stosuje się w bardzo wielu poleceniach dotyczących stylów, np. wielkość czcionki, marginesów czy rozmiary elementów itd. Format wartości długości składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz jednostki. Po wartości długości 0 jednostka jest opcjonalna. Należy pamiętać, że nie każdy parametr może przyjąć wartość ujemną!

Są dwa typy jednostek długości: względne (relatywne) i bezwzględne (absolutne). Jednostki względne podają długość w odniesieniu do innego rozmiaru.

Jednostki względne

Względne jednostki długości stosujemy, gdy chcemy się odwołać do rozmiaru innego elementu (np. wysokości aktualnie używanej czcionki).

Jednostki względne czcionki

  • em - wysokość aktualnej czcionki
  • ex - wysokość litery "x", czyli małej litery w aktualnej czcionce
  • ch - szerokość cyfry "0" (zero) w aktualnej czcionce (CSS 3 - interpretuje Internet Explorer 9, Firefox)
  • rem - wysokość czcionki elementu korzenia w drzewie dokumentu (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome); w języku (X)HTML korzeniem jest zawsze element <html>

Jednostka rem może być przydatna w sytuacji, kiedy chcemy, aby definiowana długość (np. szerokość bloku na stronie) odnosiła się do określonego rozmiaru czcionki, ale jednocześnie chcemy ją uniezależnić od wartości wyliczonych zgodnie z zasadą dziedziczenia stylów.

Przykładowo załóżmy, że wysokość czcionki korzenia (element <html>) wynosi 16px, a dla <body> ustalono "font-size: 2em". Jeżeli teraz na stronie wstawimy blok ze stylem "width: 10em", uzyska on faktyczną szerokość: 16px * 2 * 10 = 320px (16px pochodzi o wysokości czcionki korzenia, 2 to względna wysokość czcionki <body>, a 10 - ustalona szerokość bloku). Jak widać, zmiana rozmiaru czcionki dla elementu <body> albo wstawienie dodatkowego potomka z ustaloną wielkością cziconki może nam w tym przypadku całkowicie popsuć wygląd strony, wpływając w niełatwy do przewidzenia sposób na szerokość naszego bloku. Taka sytuacja nie będzie miała jednak miejsca, jeśli zamiast tego wpiszemy "width: 20rem" (16px * 20 = 320px).

Oczywiście opisane problemy nie będą miały również miejsca, gdy ustalimy szerokość bloku bezpośrednio w pikselach - "width: 320px". Jednak w pewnych sytuacjach może zależeć nam, aby wymiary elementów na stronie były zależne od podanego rozmiaru czcionki. Większa czcionka może wymagać szerszych bloków z tekstem. Używając jednostki rem wystarczy, że zmienimy tylko rozmiar czcionki jednego elementu, nie obawiając się czasem trudnych do przewidzenia skutków dziedziczenia stylów, a wymiary elementów strony automatycznie dopasują się do nowych ustawień, bez konieczności ręcznych zmian w wielu miejscach arkusza CSS.

Jednostki procentowe obszaru wyświetlania

(CSS 3)

Jeżeli zawartość strony nie mieści się na ekranie, przeglądarka wyświetla na brzegach okna suwaki lub zapewnia inny mechanizm przewijania wyświetlanego dokumentu, tak aby użytkownik mógł zapoznać się z całą jego treścią. Jednostki procentowe obszaru wyświetlania odnoszą się do wymiarów tej widocznej powierzchni okna, w obrębie której przewijana jest zawartość strony (ang. viewport). Na przykład długość 100vw wynosi tyle co szerokość całego obszaru wyświetlania - 100%.

  • vw - procentowa szerokość obszaru wyświetlania (interpretuje Internet Explorer 9, Chrome)
  • vh - procentowa wysokość obszaru wyświetlania (interpretuje Internet Explorer 9, Chrome)
  • vmin - mniejsza z wartości vw lub vh (interpretuje Internet Explorer 10, Chrome)
  • vmax - większa z wartości vw lub vh

Nie jesteśmy w stanie przewidzieć, z jakiego urządzenia wyświetlającego korzysta użytkownik. Nie znamy wymiarów jego ekranu. Aby tekst strony był czytelny na niewielkim urządzeniu mobilnym (np. smartphone), być może konieczne będzie ustalenie większej czcionki niż w przypadku dużego monitora panoramicznego. Z pomocą przychodzą nam jednostki procentowe obszaru wyświetlania. Dzięki nim, nieważne jakie będą fizyczne wymiary ekranu, ustalając wielkość tekstu jako np. "font-size: 5vh; line-height: 100%" zapewnimy, że na ekranie powinno zmieścić się dokładnie 20 linijek tekstu (bez konieczności przewijania).

Jednostki bezwzględne

Jednostki bezwzględne są użyteczne tylko wtedy, gdy fizyczne własności medium wyjściowego (np. monitor) są znane. Należy ich używać zawsze wtedy, gdy zależy nam, aby wybrany element zajmował zawsze taki sam obszar na ekranie, niezależnie od rozdzielczości i wielkości monitora. Choć rozdzielczość może się zmienić, to jeśli element taki miał wymiar np. 10cm, to tak pozostanie również w nowej rozdzielczości.

  • in - cale (1in = 2.54cm)
  • cm - centymetry
  • mm - milimetry
  • pt - punkty (1pt = 1/72in) - często używane przy definiowaniu rozmiaru czcionki w edytorach tekstu
  • pc - pika (1pc = 12pt)
  • px - piksele (1px = 1/96in)

Porównanie jednostek długości
Jednostki względne
5em (czcionka 10px)wys. czcionki
 
5ex (czcionka 10px)wys. małej litery
 
5ch (czcionka 10px)szer. cyfry "0"
 
5remwys. czcionki korzenia
 
5vw5% szer. "okna"
 
5vh5% wys. "okna"
 
5vmin5% min. szer./wys. "okna"
 
5vmax5% max. szer./wys. "okna"
 
Jednostki bezwzględne
1incale
 
1cmcentymetry
 
10mmmilimetry
 
30ptpunkty
 
3pcpika
 
50pxpiksele