Délkové jednotky v CSS
Zápis délky - Pixel - Absolutní jednotky - Relativní jednotky - Procenta - Procenta velikosti prohlížeče - Vypočtené hodnoty pomocí calc() - CSS proměnné var() - Příklad - Zápis URL
Zápis délky
Použitelné délkové jednotky jsou v CSS px, mm, cm, in, pt, pc, rem, em, ex, ch, vw, vh, vmin, vmax a procenta. Jejich detaily rozeberu níže.
Chcete-li zadávat desetinné hodnoty, oddělujte desetinnou tečkou (jak je zvykem v anglosaském světě), nikoliv čárkou (jak je zvykem u nás v Rakousko-Uhersku).
V CSS se mezi číslem a značkou jednotky nedělá mezera.
Například font-size: 14pt. Záporná čísla se píšou s mínuskem
bez mezery. Například top: -20px. (Mimochodem v češtině je to
jinak, v českém textu se správně před jednotkou mezera dělá. Ale CSS není
čeština.)
Pokud mezi číslem a jednotkou uděláte mezeru nebo náhodou uvedete délku bez jednotky jenom jako číslo, je to chyba. Prohlížeč ve striktním režimu to vyhodnotí jako chybu a zápis bude ignorovat. Internet Explorer v quirk módu interpretoval hodnoty bez jednotek jako pixely.
Pixel
Základní délkovou jednotkou je pixel, což je obrazovkový bod. Zapisuje se px.
- V HTML (ne v CSS) se všechny rozměry (kromě procent) udávají v pixelech.
- Oproti tomu v CSS se pixely vždy musejí zapsat s jednotkou px (bez mezery před).
Příklad:
div {width: 650px; height: 340px;}
Jestli si pixel jako délku neumíte představit, tak vězte, že obrazovka má na šířku něco kolem 1000 pixelů nebo víc. Pixely jsou ta čísla, která se ve Windowsech nastavují ve vlastnostech plochy jako rozlišení obrazovky. Chcete-li pixel vidět, podívejte se na bílou část obrazovky lupou nebo si na ni plivněte, dá se tam pak rozeznat taková jako mřížka. Světlé body mezi tmavší mřížkou jsou pixely, jsou od sebe vzdáleny jeden pixel (ve skutečnosti je ta tmavší mřížka tvořena modrou složkou pixelu, ta světlá část pixelu je červená a zelená složka).
O něco složitější je pixel na mobilních telefonech. Od doby, co existují retina displaye, se jeden CSS pixel může vykreslovat třeba až třemi skutečnými pixely vedle sebe. Ale to v kontextu tohoto textu není důležité. Jde o to, že i mobily nějak rozumí zápisu px a snaží se to dělat pokud možno co nejpodobněji počítačům, i když mají jinou technologii.
Absolutní jednotky
Značky mm, cm, in, pt a pc představují normální rozměry známé z reálného světa. Nijak ale není dáno, jak se tyto jednotky zobrazí v konečném efektu (například existují různá rozlišení obrazovek), podle mých zkušeností fungují přesně jenom při tisku (takže zas tak "absolutní" to není).
| Značka | Název | Převod | Počet px |
|---|---|---|---|
| mm | milimetr | 1mm = 3.78px | |
| cm | centimetr | 1cm = 10mm | 1cm = 37.8px |
| in | palec (inch) | 1in = 2,54cm | 1in = 96px |
| pt | typografický bod | 72pt = 1in | 3pt = 4px * |
| pc | pica nebo též cicero | 1pc = 12pt , 6pc = 1in | 1pc = 16px |
Typografické jednotky pt a pc se odvozují od anglického palce. V běžném životě se s nimi nesetkáte, ale například pt je ta jednotka, ve které se udává velikost písmen v textových editorech typu Wordu.
* Převod pt na pixely je závislý na nastavení systémového zobrazení. Normálně jsou monitory nastavené na 96 dpi (96 px na palec), což při 72 pt na palec dává vztah 3pt = 4px. Uživatel si může dpi monitoru změnit (např. ve Windows Ovládací panely > Zobrazení > Nastavení > Upřesnit > Velikost písma > jiný, 100% pak odpovídá 96 px), potom poměr 3pt = 4px nemusí platit. Na Macu myslím platí, že 4pt = 4px.
Doporučení: vyberte si jednu "oblíbenou" jednotku a všechno uvádějte v ní. Časem se velmi dobře naučíte, jak je velká a co v ní máte jak zadat. Doporučuji samozřejmě pixel a jako pomocnou relativní jednotku em.
Relativní jednotky
| Značka | Název | Význam |
|---|---|---|
| em | eM, čtverčík | výška jednoho řádku základního písma. |
| ex | eX | výška malého písmena x |
| ch | ? | šířka číslice 0 (nula) |
| rem | kořenové eM | výška jednoho řádku úplně základního typu písma |
Jednotky em a ex mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost písma může být ovlivněna jednak nadřazeným nastavením stylu (font-size), formátovacími značkami (<big> a pod.) a také volbou uživatele či nastavením operačního systému. Většina prohlížečů umožňuje nastavit velikost zobrazovaného písma (zobrazit / velikost textu). To je i základní význam těchto jednotek -- umožňují spáchat vzhled, který se při změně tohoto nastavení nerozsype (jiná dobrá metoda proti rozsypání je všechno zadávat v pixelech).
Název em vychází z historického významu. Původně jednotka em znamenala šířku velkého písmena M. Tento význam byl (z důvodů, které neznám) opuštěn a zůstalo pouze pojmenování em. Nyní em znamená výšku řádku.
Možné použití je například u obtékaných obrázků: pokud chcete, aby obrázek byl vysoký stejně jako tři řádky textu, zadáte k obrázku style="height: 3em". Určitě existují další použití, na která ale přijdete až ve chvíli, kdy je budete potřebovat.
V moderních designech se velmi často používá jednotka em. Jednotku ex jsem v praxi používat moc neviděl. Jednotka ch odpovídající šířce číslice nuly je asi nejobskurnější, ale může se hodit u formulářů, do kterých se zadávají číslice, nebo u textů s neproporcionálním písmem (Courier, monospace), kde by pak mělo ch odpovídat šířce každého znaku.
Pro Times New Roman a Internet Explorer do verze 7 platilo 1em = 2ex. Uvedený poměr se může lišit nejen v závislosti na prohlížeči, ale hlavně v závislosti na použitém písmu (font-family). Například Arial má poměrně větší ex. Moderní prohlížeče už opravdu přeměřují písmo a poměr volí různě podle písma.
V minulosti jsem tu chybně uváděl i jednotku en (půlčtverčík, šířka písmene n), která ale není nikde podporovaná, takže se omlouvám za matení.
Jednotka rem je relativně mladá, začala být plně podporována až v Internet Exploreru 9 a v ostatních prohlížečích od roku 2011, ale dnes (2015) už ji lze v klidu doporučit k použití. Rem vyjadřuje jednotku em kořenového prvku (tedy typicky prvku <html>), což je šířka písmena M, které je zapsáno do úplně čistého dokumentu a zobrazeno v prohlížeči. Výhodou takové definice je, že tato jednotka není ovlivněna žádnou další deklarací nadřazených prvků. To je hlavní rozdíl od jednotky em, která je ovlivňována svými nadřazenými deklaracemi -- em se tedy mění, rem nemění. Možná, že jsem měl rem zařadit mezi absolutní jednotky, protože její velikost je ovlivněna použitým prohlížečem a operačním systémem.
Procenta
S procenty je v CSS trochu zmatek, ale dá se to pochopit. Zápis vypadá jako u
obyčejných jednotek, např: width: 20%; (mezi číslem a % není mezera).
Jediným problémem je to, jak se budou procentuální hodnoty interpretovat. Jde prostě o to, z čeho jsou to procenta. Na tuto otázku obecná odpověď neexistuje. U každé vlastnosti je tomu jinak. V mnoha výčtech vlastností a hodnot CSS je sloupeček "interpretace procent", ve kterém se nalézá pokus o specifikaci.
Naštěstí existují ale jenom tři základní interpretace, které jsou ve většině případech stejně shodné. Procenta se počítají buď
- z přirozených rozměrů elementu (týká se pouze velikosti písma, výšky řádku a vlastnosti zoom),
- z rozměrů rodičovského elementu (třeba buňka tabulky, div),
- nebo ze šířky stránky a výšky okna.
Složitější zanořené případy se stejně musejí odzkoušet. Takže procenta zadávat doporučuji, je to mnohdy velké ulehčení. Například zadávání velikosti písma procenty je v podstatě jediná možnost, jak mít písmo stejně velké v různých prohlížečích.
Procenta velikosti prohlížeče
| Značka | Význam |
|---|---|
| vw | 1 procento dostupné šířky prohlížeče |
| vh | 1 procento dostupné výšky prohlížeče |
| vmin | 1 procento kratšího rozměru prohlížeče (výšky nebo šířky) |
| vmax | 1 procento delšího rozměru prohlížeče (výšky nebo šířky) |
Přibližně od roku 2014 (od IE 9) už jsou tyto jednotky rozumně použitelné, kromě mvax, které není podporováno v Exploreru ani ve verzi 11.
Protože se tyto jednotky odvozují od šířky a výšky prohlížeče, říká se jim anglicky "viewport units". Viewport je oblast prohlížeče, která zobrazuje obsah stránky. Bez lišt a nástrojů.
Vw a vh jsou skvělé jednotky. Miluju je.
Nové, od roku 2022 pravděpodobně částečně použitelné jednotky jsou dvh, dvw, dvmin, dvmax, lvh, lvw, lvmin, lvmax, svh, svh, svmin, svmax, což jsou varianty jednotek vw, vh, vmin a vmax v závislosti na rozhraní uživatelského rozhraní (tedy zpravidla prohlížeče). Další podobné nové jsou logické jednotky vi, dvi, svi a vb, dvb a svb (koncovka -i znamená horizontální = inline směr a nahrazuje šířku; koncovka -b znamená vertikální = blokový směr a nahrazuje výšku).
Test CSS jednotek dvh, svh, lvh, dvw, svw a lvw - v praxi myslím zatím nefungují nikde (listopad 2021).
S těmito novými jednotkami doporučuji experimentovat, pokud se něco nedaří nebo je extrémně důležité, aby něco fungovalo na sto procent ve všech mobilních browserech a jejich zvláštnostech.
Vypočtené hodnoty pomocí calc()
Místo jednotek lze používat jejich kombinace pomocí calc().
Text o calc() jsem přenesl na stránku proměnné a výpočty v CSS.
CSS proměnné var()
Hlavní povídání o proměnných v CSS mám na stránce proměnné a výpočty v CSS.
Všechny moderní prohlížeče v roce 2019 (takže s výjimkou umírajícího Internet Exploreru) už podporují v CSS proměnné. (Anglicky CSS variables.) Hodí se to na to, abych nemusel v CSS kódu desetkrát zapisovat stejné číslo a pak ho desetkrát měnit, když zjistím, že ho chci jiné. Takže v CSS vznikly proměnné a funkce var() a od roku 2018 jdou běžně používat.
Proměnná se napřed musí nadeklarovat. Dělá se to v zápisu pro kořenový prvek dokumentu, takže typicky :root, html nebo body. Musí se nějak pojmenovat, třeba --sirka. Název proměnné musí začínat dvěma mínusky.
html { --sirka: 400px;}
A teprve pak se může proměnná použít. K tomu se používá funkce var()
div.ahoj {width: var(--sirka);}
Jak je vidět, zápis je poněkud zdlouhavý, ale zvyknul jsem si rád. Další výhoda je, že se proměnné dají používat normálně ve funkci calc. Například:
div.nazdar {width: calc(1.5 * var(--sirka));}
V tomhle příkladu vynásobím hodnotu proměnné číslem 1.5.
Hodnoty proměnných nemusejí být jen čísla, ale třeba názvy barev, URL souborů apod.
Příklad na použití proměnné v CSS
Pomocí proměnných var() nelze podmínkovat v @media pravidlech.
Další jednotky
CSS počítá i s jinými než délkovými jednotkami. Vzpomínám si na úhly a čas. Jejich zadávání je celkem intuitivní.
Časové jednotky jsou s pro sekundu a ms pro milisekundu. Jsou potřeba hlavně v animacích.
Příklady
Proužky by se měly zobrazit podobně široké.
Totéž se změněným písmem
Když změním z Timesu písmo na Arial, jednotky ex a ch bude vypadat dost jinak velká:
a takhle to dopadne, když změním velikost písma na 30px. Mění se em, ex a ch, ostatní jednotky zůstávají stejné:
Jak je vidět, změna velikosti písma dost zacvičí s jednotkami em a ex. Typ písma navíc mění jednotky ex a ch, hlavně jejich poměr k jednotce em.
Příklad procent rozměrů prohlížeče
Teď příklad jednotek vw, vh, vmin a vmax. Nyní se nebudu snažit mít proužky stejně široké, protože nemůžu tušit, v jak velkém prohlížeči na to koukáte.Aktuální poznámky k příkladu a jednotkám má Chamurappi v diskusi.
Zápis URL
Přesunuto na samostatnou stránku URL v CSS.
Aktualizováno 4. 4. 2017 a 21.12.2019
Reklama
