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.

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í).

Přibližné převody pro obrazovku v systému Windows
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ď

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().

Příklad:

width: calc(90% - 2em);

znamená šířku, která je 90 procent bez dvou em.

Jako operátory mi fungují + , -, / , * a mod (mod je modulo, tedy zbytek po dělení). Výraz nesmí začínat operátorem, a proto se záporné hodnoty píšou bez mezery za mínuskem!

Určitě chápete, že calc() vypadá hodně užitečně. Například umožní odstranit některé matrjošky (zanořované divy). Může se hodit pro výpočet šířek buněk v tabulce, k přesnému umisťování pozadí a k přibližnému pozicování v pružném layoutu.

Podpora calc() je od Internet Exploreru 10, takže přibližně od poloviny roku 2016 to půjde používat bezpečně. Jsou-li pro vás důležití uživatelé IE 8, je dobré používat fallback:

width: 85%; /* pro starší prohlížeče */
width: calc(90% - 2em);

Starší prohlížeče interpretují calc() jako neznámou hodnotu a při trochu štěstí by ji měly ignorovat a použít předchozí hodnotu. Novější prohlížeče naproti tomu vezmou hodnotu z druhého řádku, protože je v kódu později.

V calc() naneštěstí nelze používat hodnotu auto, takže nelze operovat s vlastní velikostí prvků a upravovat rozměry prvků centrovaných pomocí margin:auto.

Funkce min(), max()

V CSS lze nastavit rozměry prvků podle toho, co je větší nebo menší. Například

width: min(40vw, 500px);

V tomto případě chci nastavit, aby prvek byl široký buďto 40vw, nebo 500px, podle toho, co z toho je menší.

Krom toho existuje ještě funkce clamp(), která je kombinací min() a max().

CSS proměnné var()

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

Proměnné nelze použít v @media pravidlech, což je škoda.

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

width: 192px
width: 11em
width: 24ex
width: 21ch
width: 12rem
width: 5cm
width: 50.8mm
width: 2in
width: 144pt
width: 12pc
width: 192px znovu
width: calc(-8px + 2 * 100px)

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

width: 192px
width: 11em
width: 24ex
width: 21ch
width: 12rem

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

width: 192px
width: 11em
width: 24ex
width: 21ch
width: 12rem

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.
width: 25vw
width: 25vh
width: 25vmin
width: 25vmax

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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.