Lekce 3 - Jednotky (em, rem, px...) v CSS3

V minulé lekci, Selektory v CSS3, jsme se uvedli do problematiky základních CSS3 selektorů a ukázali si i některé pseudo-selektory.

V téhle lekci budeme společně probírat délkové CSS3 jednotky. Je jich spousta, jen se podívejme: px, mm, cm, in, pt, pc, rem, em, ex, ch, vw, vh, vmin a procenta. Postupně si probereme většinu z nich, některé více, některé méně.

Než začneme u konkrétní jednotky, trocha informací na začátek neuškodí. Jednotky se dělí na dvě hlavní skupiny a to na absolutní a relativní. Co se týče desetinných hodnot, tak ty oddělujeme desetinnou tečkou, na čárku zapomeňte. Dále se mezi číslem a jednotkou nedělá mezera, jak je zvykem, podobně jako u záporných hodnot, např.: font-size: -20px;. Za nulovou hodnotou není jednotka povinná. Ovšem u ostatních hodnot jednotky psát musíme, až na pár výjimečných vlastností, ale na ty narazíme jindy.

Absolutní	Relativní
cm	em
mm	ex
in	ch
px	rem
pt	vw
pc	vh
	vmin
	vmax
	%

Každá jednotka má svůj účel, ale s velkou pravděpodobností si vystačíme s pixely. Později ale pochopíme, že i ostatní jednotky mají své výhody. My si zde probereme ty nejdůležitější a nejpoužívanější jednotky. Začneme tou nejdůležitější a to pixelem, který spadá do absolutních jednotek, které si také přednostně probereme před relativními.

Absolutní jednotky

Absolutní jednotky jsou pevně dané a délka vyjádřená pomocí těchhle jednotek se bude jevit přesně tak jak je zapsána. Jinak řečeno, nebude se měnit na základě rodičovského elementu, jako to je u relativních jednotek.

Pixel neboli px

Základní jednotkou je pixel, zapisuje se px. Jen pro informaci, na retina displayích se nejedná o hardwarový pixel, ale o referenční nebo tzv. CSS pixel. Problematiku CSS pixelu zde ale rozebírat nebudeme. Skoro ve všech prohlížečích, až na pár výjimek je základní velikost písma nastavená na 16px, z této hodnoty bychom měli vycházet:

p {
   font-size: 24px;
}

Tento kód nám zvětší velikost písma všech odstavců o polovinu.

Ostatní absolutní jednotky

Ostatní absolutní jednotky se používají spíše výjimečně. Ale určitě není na škodu je alespoň znát. Fungují úplně stejně jako pixel, ale není na nich nic výjimečného, tudíž půjdeme rovnou k věci a uvedeme si jejich příklad:

h1 { font-size: 0.5in; }   /* palce - 48px */
h2 { font-size: 1cm; }     /* cm - 37.79px */
h3 { font-size: 10mm; }    /* mm - 37.79px */
h4 { font-size: 12pt; }    /* body - 16px */
h5 { font-size: 1pc; }     /* picas - 16px */
h6 { font-size: 16px; }    /* pixel - 16px */

Změnili jsme velikost písma všem úrovním nadpisů, pokaždé s jinou jednotkou. V komentářích za kódem si můžeme všimnout přepočtu na pixely. HTML část nadpisů bude vypadat následovně:

<h1>Nadpis úrovně 1</h1>
<h2>Nadpis úrovně 2</h2>
<h3>Nadpis úrovně 3</h3>
<h4>Nadpis úrovně 4</h4>
<h5>Nadpis úrovně 5</h5>
<h6>Nadpis úrovně 6</h6>

Jako výsledek v prohlížeči dostaneme toto:

Nadpisy 4. - 6. úrovně mají stejnou velikost záměrně. Je to kvůli demonstraci přepočtu mezi jednotkami.

Relativní jednotky

Jak již bylo zmíněno výše, u relativních jednotek se výsledná délka mění na základě jiné délky, nejčastěji rodiče elementu. Z relativních jednotek probereme pouze ty nejpoužívanější, kterými jsou em, rem, %, vw a vh.

Em

Jednotka em obsahuje velikost písma rodičovského elementu, neboli 1em není vždy stejná hodnota. Vysvětlíme si to na dvou elementech. Budeme mít odstavec <p></p> a blok <div></div>. Odstavci nastavíme font-size: 100%; a divu font-size: 75%;. Následovně přidáme oběma elementům padding: 1em;, což je vzdálenost mezi rámečkem a obsahem elementu. O paddingu si taktéž povíme později v dalších článcích, ale pro tuhle ukázku je ideální:

div {
    width: 100px;
    height: 100px;
    background: green;
    font-size: 100%;
    padding: 1em;
}
p {
    width: 100px;
    height: 100px;
    background: red;
    font-size: 75%;
    padding: 1em;
}

Vlastnosti width, height nastavují šířku a výšku elementu, probereme později, stejně jako background, díky čemuž nastavujeme naše krásné barvičky. Kód HTML vypadá následovně:

<div>Lorem ipsum dolor sit ammet</div>
<p>Lorem ipsum dolor sit ammet</p>

Jako výsledek v prohlížeči dostaneme toto:

Na výsledku si můžeme všimnout, že i když máme stejnou hodnotu v paddingu (1em), tak se skutečná hodnota liší.

Rem

Jednotka rem vychází z velikosti písma v dokumentu. Obsahuje hodnotu výchozí velikosti písma nastavenou autorem pro dokument a případně upravenou uživatelem nebo prohlížečem. Tím je myšleno např. zvětšení písma uživatelem v operačním systému nebo to, že né každý prohlížeč má vždy v základu 16px. Rem je kouzelné pro svou jednoduchost. Můžeme nastavovat např. pro odstavce okraj přesně na výšku písma takto:

p {
   margin: 1rem;
}

Když se výška písma změní, tak se změní i výsledná velikost okraje, kterou právě potřebujeme. Velikost však zůstane stále zapsaná jako 1rem.

% neboli procenta

S procenty je to trochu divoké, ale určitě to spolu pochopíme. Zápis vypadá jako u jiných jednotek, ale je tam %:

p {
   font-size: 125%;
}

Kód nám větší velikost písma v odstavcích o jednu čtvrtinu. Problém však nastává při použití procent u různých vlastností. První způsob použití je procentuální hodnota z rodičovského elementu, setkáme se s tím nejspíše u tabulek. Druhý způsob je z přirozených rozměrů elementu, zde patří rozhodně velikost písma, výška řádku a jiné podobné vlastnosti. Třetím a posledním způsobem je procentuální šířka stránky nebo výška okna prohlížeče. Nebojte se, možná to není pochopitelné, ale je to relativně jednoduché. Jde pouze o to pochopit, že 100% u velikosti písma je aktuální velikost. U šířky okna je 100% zase maximální velikost:

Viewport Width (vw) & Viewport Height (vh)

Procenta velikosti prohlížeče se odvozují od šířky (vw) a výšky (vh) prohlížeče, anglicky se jim říká viewport units. Viewport je oblast prohlížeče, která zobrazuje obsah stránky bez lišt a nástrojů. Vyzkoušíme si i tyhle vlastnosti. V HTML si necháme pouze prázdný <div></div> a v CSS mu nastavíme width: 50vw; a height: 50vh;, což způsobí poloviční výšku i šířku našeho divu vůči oknu viewportu prohlížeče, i když se jeho rozměr bude měnit. A samozřejmě mu přidáme ještě zelené pozadí, ať vše můžeme krásně vidět na vlastní oči:

div {
    width: 50vw;
    height: 50vh;
    background: green;
}

Element div v HTML stačí udělat následovně:

<div>Lorem ipsum dolor sit ammet</div>

Teď se přesvědčíme, zda vše funguje tak, jak má:

Použití hlavně pixelů není tragédie, avšak jednotky by měly "spolupracovat" s ostatními prvky, například pomocí tzv. media queries. Už alespoň známe jednotky, které na daných místech můžeme použít a hlavně víme, jak je použít.

V následujícím kvízu, Kvíz - Úvod, selektory a vlastnosti v CSS3, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.