Zápis délky - Pixel - Absolutní jednotky - Relativní jednotky - Procenta - Procenta velikosti prohlížeče - Vypočtené hodnoty pomocí calc() - Příklad - Zápis URL
Použitelné délkové jednotky jsou v CSS px, mm, cm, in, pt, pc, rem, em, ex, ch, vw, vh, vmin 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
.
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 interpretuje hodnoty bez jednotek jako pixely. (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.)
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, dá se tam 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).
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.
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.
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.
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ž 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ů.
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.
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. CSS také neumí proměnné.
Proužky by se měly zobrazit podobně široké.
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.
Aktuální poznámky k příkladu a jednotkám má Chamurappi v diskusi.
Přesunuto na samostatnou stránku URL v CSS.
Aktualizováno 13.12. 2015
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.