<!doctype html public '-//W3C//DTD HTML 4.01//EN'>
<!-- Editors & translators, please, edit units.en.tmpl, not .html -->
<!-- Translated by Emil Sierżęga. -->
<html lang=pl>
<head profile="http://www.w3.org/2006/03/hcard">
<title>CSS: em, px, pt, cm, in&hellip;</title>

<!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> -->

<!-- include head.inc -->

<style type="text/css">
code {font: inherit; font-weight: bold}
table {border-collapse: collapse; margin: 1.2em auto}
tr {vertical-align: baseline}
tbody tr {border-top: thin dotted}
th, td {text-align: center; padding: 0.3em 0.5em}
col:first-child + col {border: solid}

.hint {margin: 1.2em 0 1.2em 2.5em; font-size: smaller; clear: left}
.hint::before {content: "\270E"; font-size: 2em;
  margin: 0 0 0 -1.25em; float: left}
</style>

<link rel=up title="Tips &amp; tricks" href="./">
<link rel=prev title="Round corners &amp; shadows" href="roundshadow">
<link rel=next title="Dot leaders" href="leaders">

<!-- include translations1 -->

<body>
<!-- include translations2 -->

<h1><em>Web Style Sheets</em>
CSS tips &amp; tricks</h1>

<div class=section id=intro>
<p>Zobacz także <a href="./">indeks</a> wszystkich porad.

<p class=stb>Na tej stronie:
<ul>
<li id="p1"><a rel="chapter" href="#units">em, px, pt, cm, in&hellip;</a>
<li id="p2"><a rel="chapter" href="#font-size">Rozmiary czcionki</a>
<li id="p3"><a rel="chapter" href="#future">Nowe jednostki: rem, vw&hellip;</a>
</ul>
</div>


<div class="section" id="units">
<h2><code>em</code>, <code>px</code>, <code>pt</code>,
<code>cm</code>, <code>in</code>&hellip;</h2>

<p>Arkusze Kaskadowe Stylów (CSS) oferują wiele różnych jednostek,
które wyrażają wielkość. Niektóre z nich, takie jak punkt (<code>pt</code>,
ang. <em>point</em>) czy pica (<code>pc</code>) mają swój początek
w typografii. Inne znane są z codziennego użytku, np. centymetr
(<code>cm</code>) czy cal (<code>in</code>, ang. <em>inch</em>). Istnieje
także "magiczna" jednostka, która została wymyślona specjalnie na potrzeby
CSS-ów: <code>px</code>. Czy to oznacza, że różne właściwości potrzebują
różnych miar?</p>

<p>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.</p>

<p>Nie ma żadnych ograniczeń co do tego gdzie użyte zostaną konkretne
jednostki. Jeśli właściwość akceptuje wartości w <code>px</code>
(<code>margin: 5px</code>), akceptuje także wartości podane w centymetrach
czy calach (<code>margin: 1.2in; margin: 0.5cm</code>) i vice-versa.</p>

<p>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:</p>

<table>
 <colgroup>
  <col><col><col><col>
 </colgroup>
 <thead>
  <tr>
   <th></th>
   <th>Zalecane</th>
   <th>Sporadyczne użycie</th>
   <th>Niezalecane</th>
  </tr> 
 </thead>
 <tbody>
  <tr>
   <th>Ekran</th>
   <td>em, px, %</td>
   <td>ex</td>
   <td>pt, cm, mm, in, pc</td>
  </tr> 
  <tr>
   <th>Druk</th>
   <td>em, cm, mm, in, pt, pc, %</td>
   <td>px, ex</td>
   <td></td>
  </tr>
 </tbody>
</table>

<p>Relacja między bezwzględnymi jednostkami wygląda następująco: 1cal = 2,54cm
= 25,4mm = 72pt = 6pc.</p>

<div class=hint>
<p>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):
<span style="display: block; height: 72pt; border-width: 1px;
border-style: solid dashed; line-height: 24pt; font-size: 19pt;
text-align: center; margin: 1.2em">&#x2191;<br>72pt<br>&#x2193;</span></p>
</div>

<p>Tak zwane jednostki <em>bezwzględne</em> (<code>cm</code>, <code>mm</code>,
<code>in</code>, <code>pt</code> i <code>pc</code>) oznaczają w CSS-ach
to samo co gdzie indziej, <em>ale tylko, jeśli Twoje urządzenie posiada
wystarczającą rozdzielczość</em>. 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.</p>

<div class=hint id=abs-print>
<p>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.</p>

<p>Standard CSS nie definiuje co znaczy "wysoka rozdzielczość". Z drugiej
strony, obecnie do drukarek niskiej jakości (ang. <em>low-end</em>)
zaliczamy urządzenia o rozdzielczości minimum 300 dpi, natomiast ekrany
wysokiej jakości (ang. <em>high-end</em>) mają powyżej 200 dpi.
Definicja znajduje się pewnie gdzieś pośrodku.</p>
</div>

<p>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. <code>em</code>.</p>

<p>Jednostki <code>em</code> i <code>ex</code> zależą od rozmiaru
czcionki i mogą być inne dla każdego elementu w dokumencie. Wielkość
<code>em</code> 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 <code>em</code> 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 <code>text-indent: 1.5em</code> czy
<code>margin: 1em</code> są niezwykle popularne w CSS-ach.</p>

<p>Jednostka <code>ex</code> jest rzadko wykorzystywana. Jej
przeznaczeniem jest wyrażanie relacji z "wysokością x" danej czcionki.
<em>Wysokość x</em> (ang. <em>x-height</em>) to wysokość małych liter alfabetu
takich jak <em>a, c, m,</em> czy <em>o</em> (czyli liter bez wydłużeń
dolnych). Czcionki, które mają taki sam rozmiar (i taki sam
<code>em</code>) mogą się znacznie różnić wielkością małych liter.
Kiedy ważne jest żeby np. jakiś obraz pasował do <em>x-height</em>,
wtedy dobrze jest użyć jednostki <code>ex</code>.</p>

<p>Jednostka <code>px</code> 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ść <code>px</code>
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 &ndash; jak telefon komórkowy,
czy z odległości ramienia &ndash; jak monitor komputera czy może gdzieś
pomiędzy jak czytnik e-booków? Jednostka <code>px</code> nie jest
zdefiniowana jako stała długość, ale jako coś co zależy od typu
urządzenia oraz jego zastosowania.</p>

<p>Żeby uświadomić sobie ideę stojącą za jednostką <code>px</code>
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 <code>px</code> wzięła się właśnie od
takich pikseli (ang. <em>pixels</em>).</p>

<p>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 <code>px</code> 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 <code>px</code> ma zawsze wygląda tak samo.</p>

<div class=hint>
<p>W rzeczywistości standard CSS wymaga, aby <code>1 px</code> 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
<code>px</code> by wydrukować ostre linie. W druku jednostka <code>px</code>
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 <code>cm</code>,
<code>pt</code>, <code>mm</code>, <code>in</code> czy <code>pc</code>,
jak wytłumaczono <a href="#abs-print">powyżej</a>).</p>
</div>

<p>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 <code>px</code>. 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 <code>px</code>, a nie 
<code>pt</code>, <code>cm</code> itp.</p>
</div>


<div class="section" id="font-size">
<h2>Używaj <code>em</code> lub <code>px</code> do definiowania wielkości
czcionki</h2>

<p>Arkusze Kaskadowe Stylów odziedziczyły z typografii jednostki
<code>pt</code> (punkt, ang. <em>point</em>) oraz <code>pc</code> (pica).
Drukarki tradycyjnie używały tych i podobnych jednostek częściej niż
<code>cm</code> czy <code>in</code>. W CSS-ach nie ma powodu, aby
używać <code>pt</code>, lepiej użyć dowolnej innej jednostki. Jednak
<em>istnieje</em> dobry powód aby nie używać ani <code>pt</code>, ani
żadnej innej jednostki bezwzględnej. Zamiast tego należy stosować
wyłącznie <code>em</code> i <code>px</code>.</p>

<div class=hint>
<p>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.</p>

<p style="line-height: 3.2">
<span style="padding: 1em 0; border-left: 0.5pt solid">0.5pt,</span>
<span style="padding: 1em 0; border-left: 1px solid">1px,</span>
<span style="padding: 1em 0; border-left: 1pt solid">1pt,</span>
<span style="padding: 1em 0; border-left: 1.5px solid">1.5px,</span>
<span style="padding: 1em 0; border-left: 2px solid">2px</span>
</p>

<p>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.</p>
</div>

<p>Magiczna jednostka CSS-ów <code>px</code>, 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.</p>

<p>Ale do definiowania rozmiarów czcionek jeszcze lepiej jest
użyć <code>em</code>. 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ą <code>em</code>:
<code>H1 {font-size: 2.5em}</code>, aby mieć pewność, że H1
będzie 2,5 raza większe od normalnej czcionki.</p>

<p>Jedynym miejscem, w którym możesz wykorzystywać <code>pt</code>
(albo <code>cm</code> czy <code>in</code>) 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.</p>

<div class=hint>
<p>Tak więc jednostka <code>px</code> 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ść <code>px</code> zawsze wygląda dobrze
i podobnie na wszystkich urządzeniach. Ale co jeśli <em>chcesz</em>
znać rozdzielczość urządzenia? Na przykład wiedzieć czy jest ono
w stanie wyświetlić bezpiecznie linię szerokości <code>0.5px</code>?
Aby to zrobić należy sprawdzić rozdzielczość ekranu za pomocą
<a href="../../../TR/css3-mediaqueries/" >zapytań o media</a>
(ang. <em>Media Queries</em>). Wyjaśnienie ich działania wykracza
poza zakres tego artykułu, jednak podajemy mały przykład:</p>
<pre>
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 }
}
</pre>
</div>

</div>


<div class=section id=future>
<h2>Jeszcze więcej jednostek</h2>

<p>Aby ułatwić pisanie stylów zależnych wyłącznie od domyślnego rozmiaru
czcionki standard CSS w 2013 roku wprowadził nową jednostkę: <code>rem</code>.
Jest ona zdefiniowana jako wielkość tzw. bazowej czcionki dokumentu
(stąd nazwa, bazowy <code>em</code> od angielskiego <em>root em</em>).
W przeciwieństwie do <code>em</code>, który może być inny dla każdego
elementu, <code>rem</code> 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>

<pre>p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }</pre>

<p>W nowej wersji wygląda to tak:</p>

<pre>p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }</pre>

<p>Inne nowe jednostki pozwalają zapisać reguły zależne od rozmiaru okna
użytkownika. Mowa o <code>vw</code> i <code>vh</code>. Ten pierwszy
stanowi jedną setną szerokości okna, natomiast drugi jedną setną wysokości.
Dodano także jednostkę <code>vmin</code>, odpowiadającą mniejszej
z wartości <code>vw</code> i <code>vh</code> oraz <code>vmax</code>
(której znaczenia możesz się już domyślić).</p>

<p>Ponieważ są nowe, nie wszędzie jeszcze działają. Ale z początkiem 2015
roku są już wspierane przez kilka głównych przeglądarek.</p>
</div>

<!-- include feedback -->

<!-- include banner -->

<div id=endmatter class=section>
<!-- include address -->

<p>Utworzono 12 Sty 2010;<br>
Ostatnia aktualizacja
<!-- include date --></p>
</div>

<!-- include translations4 -->

<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.dcl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
End:
-->