3. diel - Jednotky (em, rem, px, ...)

V minulej lekcii, CSS 3 selektory , sme sa uviedli do problematiky základných CSS 3 selektorov a ukázali si aj niektoré pseudo-selektory.

V tejto lekcii budeme spoločne preberať dĺžkové CSS3 jednotky. Je ich veľa, len sa pozrime: px, mm, cm, in, pt, pc, rem, em, ex, ch, vw, vh, Vmin a percenta. Postupne si preberieme väčšinu z nich, niektoré viac, niektoré menej.

Než začneme u konkrétnej jednotky, trocha informácií na začiatok neuškodí. Jednotky sa delí na dve hlavné skupiny a to na absolútnu a relatívnu. Čo sa týka desatinných hodnôt, tak tie oddeľujeme desatinnou bodkou, na čiarku zabudnite. Ďalej sa medzi číslom a jednotkou nerobí medzera, ako je zvykom, podobne ako u záporných hodnôt, napr .: font-size: -20px;. Za nulovou hodnotou nie je jednotka povinná. Avšak u ostatných hodnôt jednotky písať musíme, až na pár výnimočných vlastností, ale na tie narazíme inokedy.

absolútna	Relatívna
cm	em
mm	ex
in	ch
px	rem
pt	vw
pc	vh
	Vmin
	vmax
	%

Každá jednotka má svoj účel, ale s veľkou pravdepodobnosťou si vystačíme s pixelmi. Neskôr ale pochopíme, že aj iné jednotky majú svoje výhody. My si tu preberieme tie najdôležitejšie a najpoužívanejšie jednotky. Začneme tou najdôležitejšou a to pixelov, ktorý spadá do absolútnych jednotiek, ktoré si tiež prednostne preberieme pred relatívnymi.

Absolútne jednotky

Absolútna jednotky sú pevne dané a dĺžka vyjadrená pomocou těchhle jednotiek sa bude javiť presne tak ako je zapísaná. Inak povedané, nebude sa meniť na základe rodičovského elementu, ako to je u relatívnych jednotiek.

Pixel čiže px

Základnou jednotkou je pixel, zapisuje sa px. Len pre informáciu, na retina displayi sa nejedná o hardwarový pixel, ale o referenčnej alebo tzv. CSS pixel. Problematiku CSS pixelu tu ale rozoberať nebudeme. Skoro vo všetkých prehliadačoch, až na pár výnimiek je základná veľkosť písma nastavená na 16px, z tejto hodnoty by sme mali vychádzať:

p {
   font-size: 24px;
}

Tento kód nám zväčší veľkosť písma všetkých odsekov o polovicu.

Ostatné absolútne jednotky

Ostatné absolútne jednotky sa používajú skôr výnimočne. Ale určite nie je na škodu je aspoň poznať. Fungujú úplne rovnako ako pixel, ale nie je na nich nič výnimočné, teda pôjdeme rovno k veci a uvedieme si ich prí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 */

Zmenili sme veľkosť písma všetkým úrovniam nadpisov, zakaždým s inou jednotkou. V komentároch za kódom si môžeme všimnúť prepočte na pixely. HTML časť nadpisov bude vyzerať nasledovne:

<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>

Ako výsledok v prehliadači dostaneme toto:

Nadpisy 4. - 6. úrovne majú rovnakú veľkosť zámerne. Je to kvôli demonštrácii prepočte medzi jednotkami.

Relatívna jednotky

Ako už bolo spomenuté vyššie, u relatívnych jednotiek sa výsledná dĺžka mení na základe inej dĺžky, najčastejšie rodičia elementu. Z relatívnych jednotiek preberieme len tie najpoužívanejšie, ktorými sú em, rem,%, vw a vh.

Em **

Jednotka em obsahuje veľkosť písma rodičovského elementu, čiže 1em nie je vždy rovnaká hodnota. Vysvetlíme si to na dvoch elementoch. Budeme mať odstavec <p></p> a blok <div></div>. Odseku nastavíme font-size: 100%; a divu font-size: 75%;. Nasledovne pridáme obom elementom padding: 1em;, Čo je vzdialenosť medzi rámčekom a obsahom elementu. O padding si taktiež povieme neskôr v ďalších článkoch, ale pre túto ukážku je ideálny:

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ú šírku a výšku elementu, preberieme neskôr, rovnako ako background, vďaka čomu nastavujeme naše krásne farbičky. Kód HTML vyzerá nasledovne:

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

Ako výsledok v prehliadači dostaneme toto:

Na výsledku si môžeme všimnúť, že aj keď máme rovnakú hodnotu v padding (1em), tak sa skutočná hodnota líši.

Rem

Jednotka rem vychádza z veľkosti písma v dokumente. Obsahuje hodnotu východiskovej veľkosti písma nastavenú autorom pre dokument a prípadne upravenú používateľom alebo prehliadačom. Tým je myslené napr. Zväčšenie písma užívateľom v operačnom systéme alebo to, že né každý prehliadač má vždy v základe 16px. Rem je čarovné pre svoju jednoduchosť. Môžeme nastavovať napr. Pre odseky okraj presne na výšku písma takto:

p {
   margin: 1rem;
}

Keď sa výška písma zmení, tak sa zmení aj výsledná veľkosť okraja, ktorú práve potrebujeme. Veľkosť však zostane stále zapísaná ako 1rem.

% Čiže percentá

S percentami je to trochu divoké, ale určite to spolu pochopíme. Zápis vyzerá ako u iných jednotiek, ale je tam %:

p {
   font-size: 125%;
}

Kód nám väčšiu veľkosť písma v odsekoch o jednu štvrtinu. Problém však nastáva pri použití percent u rôznych vlastností. Prvý spôsob použitia je percentuálny hodnota z rodičovského elementu, stretneme sa s tým najskôr u tabuliek. Druhý spôsob je z prirodzených rozmerov elementu, tu patrí rozhodne veľkosť písma, výška riadka a iné podobné vlastnosti. Tretím a posledným spôsobom je percentuálny šírka stránky alebo výška okna prehliadača. Nebojte sa, možno to nie je pochopiteľné, ale je to relatívne jednoduché. Ide len o to pochopiť, že 100% pri veľkosti písma je aktuálna veľkosť. U šírky okna je 100% zase maximálna veľkosť:

Viewport Width (vw) & Viewport Height (vh)

Percentá veľkosti prehliadača sa odvodzujú od šírky (vw) a výšky (vh) prehliadača, anglicky sa im hovorí viewport units. Viewport je oblasť prehliadača, ktorá zobrazuje obsah stránky bez líšt a nástrojov. Vyskúšame si aj tieto vlastnosti. V HTML si necháme iba prázdny <div></div> a v CSS mu nastavíme width: 50vw; a height: 50vh;, Čo spôsobí polovičnú výšku i šírku nášho divu voči oknu viewporte prehliadača, aj keď sa jeho rozmer bude meniť. A samozrejme mu pridáme ešte zelené pozadie, nech všetko môžeme krásne vidieť na vlastné oči:

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

Element div v HTML stačí urobiť nasledovne:

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

Teraz sa presvedčíme, či všetko funguje tak, ako má:

Použitie hlavne pixelov nie je tragédia, avšak jednotky by mali "spolupracovať" s ostatnými prvkami, napríklad pomocou tzv. Media queries. Už aspoň poznáme jednotky, ktoré na daných miestach môžeme použiť a hlavne vieme, ako ich použiť.

V ďalšej lekcii, Text a písmo 1. časť , sa uvedieme do problematiky textu a písma. Začneme využívať rôzne vlastnosti pre dobre čitateľný text a ukážeme si to na štýlovanie ukážkového článku.