Publikováno Napsat komentář

EM vs REM vs PX – proč byste neměli „používat jen pixely“

Debata se vedla už mnohokrát – jaké měrné jednotky bychom měli používat v CSS?

Stejně jako mnoho dalších jsme byli připraveni zahodit REM a vrátit se k oblíbenému pixelu. Ztratili jsme přehled o tom, proč jsme používání REM vůbec přijali. Problém se netočí jen kolem velikosti písma – jde také o přístupnost.

TL;DR:

  • Pixely jsou ignorantské, nepoužívejte je.
  • Pro velikosti a mezery používejte REM.
  • Pro mediální dotazy používejte EM.

Pixely

Na pixely (px) jsme si všichni za ta léta zvykli. Každý ví, co je to pixel (i když velikost pixelu není vždy stejná, ale o tom jindy). Všichni jsou s používáním pixelů srozuměni. Jsou snadno přeložitelné. Designéři obvykle pracují v pixelech, takže je snadné převzít velikosti přímo z Photoshopu přímo do sestavení.

Takže co je na pixelech špatného?

Přístupnost

Jsem velkým zastáncem přístupnosti na webu. Přístupnost bych kdykoli upřednostnil před „krásou“.

Pokud nastavujete všechny velikosti písma, velikosti prvků a rozestupy v pixelech, nechováte se ke koncovému uživateli s respektem.

Ve většině prohlížečů může uživatel nastavit výchozí velikost písma v prohlížeči na jinou velikost než výchozí (obvykle 16px). Pokud si uživatel nastaví výchozí velikost písma na 20px, měly by se všechny velikosti písma odpovídajícím způsobem zmenšit.

Jestliže však web výslovně nastaví velikosti písma v pixelech, nadpis nastavený na 30px bude mít vždy velikost 30px. To může znít skvěle z pohledu designéra/vývojáře – ale vy nejste uživatel, přestaňte dělat weby pro sebe.

Naštěstí nastavení velikostí písma v pixelech přístupnost úplně nezničí. Uživatel může stále zvětšovat a zmenšovat písmo pomocí ctrl plus +/- (cmd místo ctrl v OS X). Můžeme to však udělat lépe.

REM

Pokud se nějakým způsobem orientujete ve světě webového designu, nepochybně jste slyšeli o REM. Pokud ne, REM jsou způsobem nastavení velikosti písma na základě velikosti písma kořenového prvku HTML. Umožňují také rychle škálovat celý projekt změnou velikosti kořenového písma (například při určitém mediálním dotazu/velikosti obrazovky).

“ jednotka představuje velikost písma kořenového elementu (např. velikost písma elementu <html>). Při použití na velikost písma na tomto kořenovém prvku představuje jeho počáteční hodnotu.“

Jak vypočítat PX z REM

Základní a nejběžnější příklad: Velikost písma html je nastavena na 10px, odstavec je nastaven na 1,6rem – 1,6rem * 10px = 16px.

Nastavení velikosti písma kořene na 10px je nejčastější scénář, kdy vidím lidi používat REM. Umožňuje rychlý převod mezi hodnotami v pixelech na hodnoty REM prostým vydělením čísla 10.

Nastavení základní velikosti písma v pixelech má však stále stejný problém jako výše uvedený příklad s pixely. Přístupnost je překonána.

Přestože hodnoty REM mají jistě své využití, vsadím se, že většina lidí používá hodnoty REM, protože jsou považovány za chladnější než pixely. Málokdy vidím projekt, kde někdo skutečně mění velikost kořenového písma HTML v závislosti na velikosti obrazovky; a je to tak správně. Pokud nemáte typograficky velmi náročný návrh, je nepravděpodobné, že byste chtěli škálovat všechno najednou.

Jak tedy můžeme odbourat naše faux pas v oblasti přístupnosti?

Nastavte kořenovou velikost písma HTML v procentech. To je procento výchozí velikosti písma prohlížeče uživatele. Typickou metodou je nastavení velikosti písma HTML na 62,5 %. To proto, že 62,5 % z 16px (typická výchozí velikost písma prohlížeče) je 10px. To by stále znamenalo 1,6rem = 16px. To nyní znamená, že pokud se výchozí velikost písma prohlížeče uživatele změní například na 20px, 1,6rem by se nyní rovnalo 20px. Pokud tedy uživatel chce větší písmo, dovolte mu to. Šťastný designér. Šťastný vývojář. Se všemi čísly se stále snadno pracuje.

Ideálním scénářem by bylo ponechat velikost písma HTML jako 100 %, ale to trochu ztěžuje matematiku. Například 16px je nyní 1rem, 20px je 1,25rem, 24px je 1,5rem atd.

Sass/SCSS na pomoc

Vyřešit všechna tato čísla v hlavě by bylo dost časově náročné. Naštěstí pokud používáte Sass/SCSS, LESS nebo jiný preprocesor CSS, nemusíte si dělat starosti. Můžete použít funkce, které tyto věci spočítají za vás.

A co EM?

EM se zpočátku chovají podobně jako REM, dokud nedojde na vnořování. Nikdy jsem nebyl příznivcem EM, zejména pokud jde o velikosti písma. Vezměte například div s velikostí písma 2em, pak přidejte odstavec s velikostí písma 2em. Velikost písma tohoto odstavce je nyní 2ems vzhledem k divu. Rychle ztratím přehled o matematice a o tom, jaká velikost je jaká, a rychle se to stane nezvládnutelným. Právě to řeší REM – velikost se vždy vztahuje zpět ke kořenu.

Co mediální dotazy?

Takže jsme zjistili, že použití pixelových hodnot přepisuje výchozí nastavení prohlížeče, takže jednoduše převést všechny pixelové velikosti na REM je to nejlepší, co můžeme udělat, že? Ne tak docela.

Tento příspěvek na blogu upozorňuje na některé klíčové rozdíly mezi použitím pixelů, EM a REM v mediálních dotazech (https://zellwk.com/blog/media-query-units/). Běžte si ho přečíst a pak se vraťte.

Shrneme-li to, pixely i REM pro mediální dotazy v různých prohlížečích při použití zvětšení prohlížeče selhávají a EM jsou nejlepší možností, kterou máme k dispozici. REM v tuto chvíli selhávají mnohem častěji než pixely, takže je zcela vynecháme.

Je to však trochu složitější. Jak EM, tak pixely mají u dotazů na média své nevýhody, pokud jde o rozdíl desetinného místa této jednotky. Pokud se vám stane, že ve stejném bloku kódu použijete dotazy médií na minimální i maximální šířku, budete mít smůlu, jakmile uživatel začne měnit zvětšení prohlížeče nebo výchozí velikost písma.

Tady je několik příkladů:

Používáme 6 desetinných míst, protože některé prohlížeče neukazují žádný rozdíl mezi 2-5.d.p.

Pro přehlednost používáme na těle velikost písma 10px, aby byla matematika trochu jasnější.

Příklad 1: Zvětšení prohlížeče nastaveno na 100 %, šířka prohlížeče nastavena na 640px

min-width: 64em = Hitmax-width: 63.99em = Missmax-width: 63.999999em = Hitmin-width: 640px = Hitmax-width: 639px = Missmax-width: 639.999999px = Miss

Příklad 1b: Zvětšení prohlížeče nastaveno na 100 %, šířka prohlížeče nastavena na 639px

min-width: 64em = Missmax-width: 63.99em = Hitmax-width: 63.999999em = Hitmin-width: 640px = Missmax-width: 639px = Hitmax-width: 639.999999px = Hit

Pro EM tedy nemůžeme použít 6dp, protože zasahuje do obou dotazů na média.

Příklad 2: Zvětšení prohlížeče nastaveno na 110 %, šířka prohlížeče nastavena na 704px (protože 640px * 110 % = 704px)

min-width: 64em = Missmax-width: 63.99em = Missmax-width: 63.999999em = Hitmin-width: 640px = Missmax-width: 639px = Missmax-width: 639.999999px = Hit

Příklad 2b:

min-width: 64em = Hitmax-width: 63.99em = Missmax-width: 63.999999em = Missmin-width: 640px = Hitmax-width: 639px = Missmax-width: 639.999999px = Miss

Pro EM tedy nemůžeme použít 2dp. V této fázi nám tedy zbývá pouze 6dp pixelů. To funguje se zvětšením prohlížeče. Nicméně…

Příklad 3: Přiblížení prohlížeče nastaveno na 100 %, velikost písma prohlížeče nastavena na 20px, šířka prohlížeče nastavena na 800 (protože 640 * 125 % = 800)

min-width: 64em = Hitmax-width: 63.99em = Missmax-width: 63.999999em = Hit

Takže opět, 6dp EM jsou stále mimo. A pixely pro dotazy médií nemůžeme použít vůbec, protože se stále vypalují při 640px/639px, protože ignorují EM/REM.

Jaké je tedy řešení?

Naneštěstí neexistuje řešení. Dokud prohlížeče nevyřeší problémy se zaokrouhlováním, jsme tak trochu v koncích.

Nejjednodušší přijatelnou možností je, že nikdy nevytvoříme překrytí min. šířky a max. šířky ve stejném bloku. Příklad:

body { @media screen and (max-width: 63.99em) { background: blue; } @media screen and (min-width: 64em) { background: blue; }}

Problém s výše uvedeným spočívá v tom, že existují určité scénáře, kdy jsou zasaženy oba dotazy na média nebo jsou oba ignorovány. Takže sázkou na jistotu by bylo napsat něco jako:

body { background: blue; @media screen and (min-width: 64em) { background: blue; }}

Proč neexistuje skutečné řešení? Nevěřím, že to zajímá dost lidí. Jakékoli statistiky, které říkají, že si lidé nemění výchozí velikost písma v prohlížeči, jsou rozhodně zkreslené. Možnosti změny výchozí velikosti písma v prohlížeči Chrome jsou nyní velmi zahrabané v pokročilých možnostech prohlížeče.

Úskalí

Tento přístup má několik úskalí:

  • Jestliže jste zvyklí psát mediální dotazy na min. šířku i max. šířku v jednom bloku kódu, bude to trvat déle.
  • Zvýší to složitost, protože budete muset přepsat CSS jedním nebo druhým směrem, místo abyste prohlížeči řekli, aby použil možnost A nebo B.
  • Zvýší to velikost souboru kvůli těmto přepisům. Ne o moc, ale stojí to za zvážení.

V závislosti na projektu, na tom, kdo ho vyvíjí, a na různých dalších faktorech, jako jsou rozpočty projektu (zde musíme být realističtí), mohou být pixely jednodušší a rychlejší. Také může být jednodušší a rychlejší ignorovat přístupnost.

Pamatujte, pro koho webové stránky vytváříte.

Také stojí za zmínku, že tento příspěvek na blogu je přesný v době psaní, ale s neustálými aktualizacemi fungování prohlížečů se tento problém může stát minulostí.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *