pixely jsou mrtvé: proč byste měli přestat používat pixely v CSS

chcete navrhnout webové stránky, jako je to 1999 znovu? Pixely jsou způsob, jak jít. Jděte retro, udržujte normy, protože to, co víte, funguje již a pokud to funguje, postavte se na trávník a energicky zatřepejte pěstí…

tento článek není o malých červených zelených a modrých pixelech, které vidíte na obrazovce, nebojte se, že jsou v pořádku. Jedná se o použití pixelů v HTML & CSS. Není třeba teorie, v pixelech CSS ne # f-ing měřítko, roll kredity!

musí existovat dobrý důvod, proč…

web je založen na 21 + let starých standardech, které nejsou určeny pro dnešní svět

Exodus 12:8

téže noci mají jíst maso pečené nad ohněm

Bible naznačuje, že bychom měli jíst maso zvířete v den porážky. Nyní však máme chladničky, mrazničky a konzervované potraviny jako řešení nových i starých problémů.

CSS1 říká:

displeje mají zhruba stejnou velikost, takže používejte statická písma

naše požadavky se od roku 1996 změnily. Nyní máme mnohem širší škálu zařízení, rozlišení a poměry zobrazení, které je třeba zvážit. Navzdory zavedení nových funkcí, na rozdíl od potravinářského průmyslu se základní technologie nezměnila kvůli:

zpětná kompatibilita

a oprávněně, protože nyní všichni snášíme utrpení internetu.

nedorozumění velikosti písma

v minulosti jsem diskutoval o tématu mylných představ o velikosti písma s několika vývojářskými a designérskými kolegy.

reakce, kterou obvykle dávají, je, jako bych jim říkal, že Santa Claus není skutečný poprvé …

velikost písma specificky nekoreluje s velikostí pixelů na obrazovce

  • jedna rodina písem na 16px by mohla mít“ A “ char 24px vysoký, jiná rodina písem na 16px by mohla mít „A“ char 26 pixelů vysoký.
  • nebere v úvahu, jak prohlížeče a operační systémy zpracovávají kerning, vyhlazování a hlavně poměry pixelů zařízení různými způsoby.
  • Uživatelští agenti mají navíc jinou sadu výchozích hodnot.

takže prosím vypněte jakoukoli řeč o „pixel perfect“ na webu, není možné, pokud se nesnažíte navrhnout statickou stránku pro jeden prohlížeč na jedné velikosti obrazovky pro jeden typ zařízení.

NIKDY NEPOUŽÍVEJTE PIXELY K IMPLEMENTACI WEBOVÝCH STRÁNEK ZNOVU!

nejsem první ani poslední, kdo to chrlí, takže se podívejte na ostatní hříšníky, než vrhnete první kámen. Zhluboka se nadechněte…

  • přesnost s pohyblivou řádovou čárkou: Všechny jednotky písma v CSS (včetně px) jsou schopny zpracovávat plováky v moderních prohlížečích. Běžně, pokud je 1px „předpokládána“ ekvivalentní velikost pixelu obrazovky (což je nesprávné), může se zdát zbytečné používat desetinná místa při navrhování zařízení s poměrem pixelů 1. Je-li prohlížení těchto metrik na zařízení s DPR 2 / 3 nebo 4 zjevné množství přesnosti je ztracena v důsledku vyhýbání se desetinných míst. REM a EM „podporují“ větší přesnost pomocí desetinného použití.
  • je to iluze: pixely v CSS nejsou skutečné pixely velikosti obrazovky. Jsou to vlastně optické referenční jednotky. Tento zmatek někdy tlačí „profesionální“ a zkušené webové vývojáře dělat hloupé věci, jako je vytvořit pixely-to-em konverzní mixiny pro CSS pre-procesory. To by mohlo být důvod, proč někteří tráví tolik času hašteření s designéry UX nad malými rozdíly mezi okrajem a polstrováním. Poměr pixelů zařízení zobrazuje velikost optické referenční jednotky a závisí pouze na zařízení nebo úrovni zoomu na ploše nastavené uživatelem.
  • PX má za následek větší údržbu: neříkám nic nového, ale obecně je mnohem snazší udržovat procenta oproti kontejnerům velikosti pixelů.
  • měřítko relativních rozměrů s velikostí písma: vždy používejte jednotky REM nebo EM v místech, kde obvykle potřebujete nastavit pevnou šířku nebo výšku. Kontejnery s em rozměry jsou vzhledem k jeho velikosti písma. S jednotkami EM pokud aktualizujete velikost písma textového kontejneru, šířka nebo výška (nastavená v EMs) se bude přiměřeně měnit, což znamená, že při použití Pixelů upravujete pouze 1 hodnotu namísto 3. U REM to platí, pokud změníte velikost kořenového písma dokumentu.

(Ano EM je pokročilejší než REM, přestože je starší, také EM funguje lépe pro zarážky mediálních dotazů než rem napříč prohlížeči z nějakého důvodu).

existuje jen málo okolností, kdy jsou pixely nezbytné, a z těchto okolností jen málo z nich má vytvořit skutečné rozvržení.

EM vs REM

nejsmutnější použití obrázků vůbec.

vidíš, co jsem tam udělal?

velikost písma používající EM je relativní k velikosti písma nadřazeného kontejneru. Někdy je však míchání nežádoucí a těžší je udržovat. Jednotky REM jsou relativní k dokumentu. V případě pochybností použijte rem (IE9+) pro jednoduchost.

použití jednotek REM

pokud přicházíte ze starověkého světa pixelů, může být obtížné najednou začít používat jednotky REM. Zde je několik tipů.

  1. samozřejmě 1rem je 16px v CSS: ale 16px v CSS není skutečná metrika v pixelech obrazovky, zejména s velikostí písma. Použití REM proto vyžaduje stejnou hru na hádání pokusů a omylů, jakou jste dělali po celou dobu s pixely.
  2. ±0,5 pak ±0,25: pokud jste guesstimating jakýkoliv druh délky, jakmile se dostanete přiměřeně v blízkosti, zvýšení nebo snížení o 0,5, pak znovu o 2,5 před provedením konkrétnější odhady. To obvykle šetří čas.
  3. použijte kalkulačku: adresní řádek je kalkulačka v Chromu, duh!

budoucnost je Kartézská

příklad použití MIMETIC.js pomocí jednotek rem a procent.

CSS přes HTML již používá Kartézský souřadnicový systém, to není to, co zde zpochybňuji. Problém je v tom, že celkově chybí klíčová složka „proporce“. Všechny prvky mohou být v poměru k výřezu pomocí%, vw nebo vh s výjimkou vlastnosti velikosti písma. Ani jednotky REM nemohou pomoci. jednotky vw a vh nejsou brány v úvahu, protože porušují Přístupnost zoomu v prohlížečích stolních počítačů při použití s velikostí písma.

CSS & HTML společně tvoří nečistý 2D rámec

to není případ SVG. SVG ale zatím neobsahuje obal textu ani formátovací model.

jsme uvízli v roce 1996. Chcete-li přesunout webdesign do 21. století, potřebujeme alespoň přiměřený 2D systém pro velikost písma.

musíme zachovat vše v ose x (šířka okna) proporcionálně. To také činí prvky stupnice osy y úměrně, ale škálování osy y neovlivní měřítko osy x.

došlo k několika pokusům o JavaScript, aby písma byla v prohlížeči přiměřeně škálována, někteří používají pixely a někteří používají jednotky em/ rem. Ty, které používají pixely, jsou chybné.

Tak Proč Jsou Pixely Mrtvé?

  • jsou statické (ale technicky tak je většina ostatních)
  • nerespektují velikost kořenového písma po změnách (nejsou skutečně relativní k velikosti kořenového písma jako jednotky REM a EM)
  • vlastnosti, jako jsou okraje, polstrování a výška čáry, se při opětovném nastavení in-line přirozeně nezmění.
  • předpokládají se jako celá čísla, což obvykle vede k méně přesným implementacím na různých poměrech Pixelů.
  • zdá se, že Bootstrap 4 klesá pixely pro REM.
  • pixely vytvářejí iluzi rovnosti pixelům na obrazovce, což vede k mylným představám a z dlouhodobého hlediska se stává matoucí pro nové vývojáře.
  • je nepravděpodobné, že by se pixely v budoucnu staly životaschopným řešením pro škálování písem, protože design je komplexně o proporcích.

to je můj názor na to, proč neexistuje žádná vážná budoucnost pro pixely ve webdesignu!

Díky za toleranci; -)

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.