Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Web Style Sheets CSS tips & tricks

Zobacz także indeks wszystkich porad.

Na tej stronie:

em, px, pt, cm, in…

Arkusze Kaskadowe Stylów (CSS) oferują wiele różnych jednostek, które wyrażają wielkość. Niektóre z nich, takie jak punkt (pt, ang. point) czy pica (pc) mają swój początek w typografii. Inne znane są z codziennego użytku, np. centymetr (cm) czy cal (in, ang. inch). Istnieje także "magiczna" jednostka, która została wymyślona specjalnie na potrzeby CSS-ów: px. Czy to oznacza, że różne właściwości potrzebują różnych miar?

Nie, jednostki nie mają nic wspólnego z właściwościami, jednak mają istotne znaczenie przy wyświetlaniu mediów czy to na ekranie, czy na papierze.

Nie ma żadnych ograniczeń co do tego gdzie użyte zostaną konkretne jednostki. Jeśli właściwość akceptuje wartości w px (margin: 5px), akceptuje także wartości podane w centymetrach czy calach (margin: 1.2in; margin: 0.5cm) i vice-versa.

Jednak w ogólnym przypadku staraj się używać innych jednostek do wyświetlania obrazu na monitorze, a innych do drukowania go na papierze. Poniższa tabela przedstawia rekomendowane użycie:

Zalecane Sporadyczne użycie Niezalecane
Ekran em, px, % ex pt, cm, mm, in, pc
Druk em, cm, mm, in, pt, pc, % px, ex

Relacja między bezwzględnymi jednostkami wygląda następująco: 1cal = 2,54cm = 25,4mm = 72pt = 6pc.

Jeśli masz pod ręką linijkę, możesz sprawdzić jak dokładne jest Twoje urządzenie. Narysowano tutaj ramkę w wysokości 1 cala (2,54 cm): ↑
72pt
↓

Tak zwane jednostki bezwzględne (cm, mm, in, pt i pc) oznaczają w CSS-ach to samo co gdzie indziej, ale tylko, jeśli Twoje urządzenie posiada wystarczającą rozdzielczość. W drukarkach laserowych 1 cm oznacza dokładnie 1 cm. Jednak na urządzeniach o niskiej rozdzielczości, takich jak ekrany komputera, CSS-y nie wymagają tej właściwości. Faktycznie, rezultaty najczęściej są różne na różnych urządzeniach i w różnych implementacjach CSS-ów. Lepiej jest zarezerwować te jednostki dla urządzeń o bardzo wysokiej rozdzielczości, w szczególności dla drukarek. Na monitorach komputerów czy urządzeniach mobilnych prawdopodobnie nie osiągniesz zamierzonego rezultatu.

W przeszłości, CSS-y wymagały, aby implementacja wyświetlała bezwzględne jednostki właściwie nawet na ekranach komputerów. Jednak kiedy liczba niepoprawnych implementacji przewyższyła te poprawne, a ponadto nic nie zwiastowało poprawy, Arkusze Kaskadowe Stylów porzuciły to wymaganie w 2011 roku. Obecnie, jednostki bezwzględne muszą działać właściwie jedynie podczas drukowania i na urządzeniach o bardzo wysokiej rozdzielczości.

Standard CSS nie definiuje co znaczy "wysoka rozdzielczość". Z drugiej strony, obecnie do drukarek niskiej jakości (ang. low-end) zaliczamy urządzenia o rozdzielczości minimum 300 dpi, natomiast ekrany wysokiej jakości (ang. high-end) mają powyżej 200 dpi. Definicja znajduje się pewnie gdzieś pośrodku.

Jest jeszcze jeden powód, dla którego powinno się unikać używania jednostek bezwzględnych do celów innych niż druk: patrzysz na różne ekrany z różnej odległości. 1 centymetr na ekranie monitora wygląda na niewielki. Ale ten sam centymetr wyświetlany na ekranie urządzenia mobilnego, który oglądasz z bliskiej odległości wydaje się bardzo duży. Zamiast tego, lepiej jest używać jednostek względnych np. em.

Jednostki em i ex zależą od rozmiaru czcionki i mogą być inne dla każdego elementu w dokumencie. Wielkość em to po prostu rozmiar czcionki. Dla elementu, którego czcionka wynosi 2 cale, 1 em oznacza 2 cale. Wyrażanie rozmiarów, takich jak marginesy i odstępy w jednostce em oznacza, że zależą one od rozmiaru czcionki. Jeśli użytkownik korzysta z dużej czcionki (np. na dużym monitorze) albo małej czcionki (np. na urządzeniu mobilnym), to podane wielkości będą proporcjonalne. Deklaracje takie jak text-indent: 1.5em czy margin: 1em są niezwykle popularne w CSS-ach.

Jednostka ex jest rzadko wykorzystywana. Jej przeznaczeniem jest wyrażanie relacji z "wysokością x" danej czcionki. Wysokość x (ang. x-height) to wysokość małych liter alfabetu takich jak a, c, m, czy o (czyli liter bez wydłużeń dolnych). Czcionki, które mają taki sam rozmiar (i taki sam em) mogą się znacznie różnić wielkością małych liter. Kiedy ważne jest żeby np. jakiś obraz pasował do x-height, wtedy dobrze jest użyć jednostki ex.

Jednostka px jest "magiczną" jednostką CSS. Nie jest związana z aktualnie wykorzystywaną czcionką i zazwyczaj nie jest także związana z centymetrem czy calem. Wielkość px jest zdefiniowana jako mała, ale widoczna, tak aby pozioma linia o szerokości 1 px mogła być wyświetlona wraz z ostrymi krawędziami (bez antyaliasingu). To co jest ostre, małe i widoczne zależy od urządzenia, na którym wyświetlany jest obraz, a także od sposobu jego użycia: czy patrzysz na nie z bliska – jak telefon komórkowy, czy z odległości ramienia – jak monitor komputera czy może gdzieś pomiędzy jak czytnik e-booków? Jednostka px nie jest zdefiniowana jako stała długość, ale jako coś co zależy od typu urządzenia oraz jego zastosowania.

Żeby uświadomić sobie ideę stojącą za jednostką px wyobraź sobie monitor typu CRT z lat 90. ubiegłego wieku: najmniejsza kropka jaką mógł wyświetlić mierzyła mniej więcej 1/100 cala (0,25 mm) lub trochę więcej. Nazwa px wzięła się właśnie od takich pikseli (ang. pixels).

Obecnie istnieją oczywiście urządzenia, które potrafią wyświetlić mniejsze piksele (chociaż możesz potrzebować szkła powiększającego żeby je zobaczyć). Jednak dokumenty z minionego wieku, które używają w CSS-ach jednostki px nadal wyglądają tak samo, niezależnie od urządzenia. Drukarki, w szczególności, potrafią wyświetlić obiekty zdecydowanie mniejsze niż 1 px, ale nawet na nich, linia o wysokości 1 px, wygląda praktycznie tak samo jak na ekranie monitora. Urządzenia się zmieniają, ale px ma zawsze wygląda tak samo.

W rzeczywistości standard CSS wymaga, aby 1 px stanowił dokładnie 1/96 cala na każdym wyświetlanym obrazie. CSS-y uznają, że drukarki, inaczej niż monitory, nie potrzebują różnego rozmiaru px by wydrukować ostre linie. W druku jednostka px nie tylko ma taki sam wygląd na każdym urządzeniu, jest także tak samo mierzalna jak jednostki bezwzględne (tak samo jak cm, pt, mm, in czy pc, jak wytłumaczono powyżej).

Standard CSS definiuje także, że obrazy rastrowe (takie jak zdjęcia) są domyślnie wyświetlane poprzez mapowanie jednego piksela do 1 px. Zdjęcie o rozdzielczości 600 na 400 zostanie wyświetlone jako obraz o szerokości 600 px i wysokości 400 px. Piksele ze zdjęcia nie przekładają się co prawda na piksele urządzenia (które mogą być bardzo małe), lecz są mapowane do jednostki px. To sprawia, że możliwe jest dopasowanie obrazu do wszystkich innych elementów dokumentu, jeśli tylko w arkuszach stylów użyta zostanie jednostka px, a nie pt, cm itp.

Używaj em lub px do definiowania wielkości czcionki

Arkusze Kaskadowe Stylów odziedziczyły z typografii jednostki pt (punkt, ang. point) oraz pc (pica). Drukarki tradycyjnie używały tych i podobnych jednostek częściej niż cm czy in. W CSS-ach nie ma powodu, aby używać pt, lepiej użyć dowolnej innej jednostki. Jednak istnieje dobry powód aby nie używać ani pt, ani żadnej innej jednostki bezwzględnej. Zamiast tego należy stosować wyłącznie em i px.

Poniżej widzisz kilka linii różnej grubości. Niektóre z nich, albo wszystkie, mogą wyglądać ostro, ale przynajmniej linie o grubości 1 px oraz 2 px powinny być ostre i dobrze widoczne.

0.5pt, 1px, 1pt, 1.5px, 2px

Jeśli pierwsze cztery linie wyglądają tak samo (albo jeśli brakuje linii 0,5 pt), zapewne oznacza to, że Twój monitor nie potrafi wyświetlić punktu mniejszego niż 1 px. Jeśli każda kolejna linia jest grubsza, to z dużym prawdopodobieństwem oglądasz ten obraz na wysokiej klasy monitorze (wyświetlaczu) bądź na papierze. Dodatkowo, jeśli linia 1 pt wygląda na cieńszą niż 1,5 px, to prawdopodobnie korzystasz z urządzenia mobilnego.

Magiczna jednostka CSS-ów px, jest często dobrym wyborem, szczególnie jeśli styl wymaga wyrównania tekstu do obrazów albo, po prostu, ponieważ wszystko co ma szerokość przynajmniej 1 px albo jest wielokrotnością 1 px będzie wyglądać ostro i wyraźnie.

Ale do definiowania rozmiarów czcionek jeszcze lepiej jest użyć em. Ideą (1) jest nieprzypisywanie wielkości czcionki do elementu BODY (w HTML-u), ale użycie domyślnych wartości urządzenia, ponieważ to jest prawdopodobnie rozmiar, który najbardziej odpowiada użytkownikowi oraz (2) wyrażenie tejże wielkości za pomocą em: H1 {font-size: 2.5em}, aby mieć pewność, że H1 będzie 2,5 raza większe od normalnej czcionki.

Jedynym miejscem, w którym możesz wykorzystywać pt (albo cm czy in) do definiowania wielkości czcionki jest specjalny CSS dla drukarek, jeśli musisz mieć pewność, że niezależnie od urządzenia wielkość czcionki będzie zawsze taka sama. Ale nawet wtedy wykorzystywanie domyślnego rozmiaru jest zazwyczaj dobrym pomysłem.

Tak więc jednostka px chroni Cię przed koniecznością znajomości rozdzielczości urządzenia. Obojętnie czy wyświetlacz ma 96 dpi, 100 dpi, 220 dpi czy 1800 dpi długość wyrażona jako całkowitoliczbowa wartość px zawsze wygląda dobrze i podobnie na wszystkich urządzeniach. Ale co jeśli chcesz znać rozdzielczość urządzenia? Na przykład wiedzieć czy jest ono w stanie wyświetlić bezpiecznie linię szerokości 0.5px? Aby to zrobić należy sprawdzić rozdzielczość ekranu za pomocą zapytań o media (ang. Media Queries). Wyjaśnienie ich działania wykracza poza zakres tego artykułu, jednak podajemy mały przykład: 

div.mojepudelko { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Urządzenia z 2 lub więcej kropkami na px */
  div.mojepudelko { border: 1.5px solid }
}

Jeszcze więcej jednostek

Aby ułatwić pisanie stylów zależnych wyłącznie od domyślnego rozmiaru czcionki standard CSS w 2013 roku wprowadził nową jednostkę: rem. Jest ona zdefiniowana jako wielkość tzw. bazowej czcionki dokumentu (stąd nazwa, bazowy em od angielskiego root em). W przeciwieństwie do em, który może być inny dla każdego elementu, rem jest niezmienny w całym dokumencie. Na przykład, aby nadać elementom P i H1 taki sam lewy margines w stylach przed 2013 rokiem należało napisać: 

p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }

W nowej wersji wygląda to tak: 

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Inne nowe jednostki pozwalają zapisać reguły zależne od rozmiaru okna użytkownika. Mowa o vw i vh. Ten pierwszy stanowi jedną setną szerokości okna, natomiast drugi jedną setną wysokości. Dodano także jednostkę vmin, odpowiadającą mniejszej z wartości vw i vh oraz vmax (której znaczenia możesz się już domyślić).

Ponieważ są nowe, nie wszędzie jeszcze działają. Ale z początkiem 2015 roku są już wspierane przez kilka głównych przeglądarek.

Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2021 W3C® Privacy policy

Utworzono 12 Sty 2010;
Ostatnia aktualizacja śro, 6 sty 2021, 05:40:49

Języki

O tłumaczeniach