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
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.
em
lub px
do definiowania
wielkości czcionkiArkusze 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 } }
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.
Utworzono 12 Sty 2010;
Ostatnia aktualizacja nie, 16 lut 2025,
05:40:53