a pixelek halottak: miért kellene abbahagynia a pixelek használatát a CSS-ben

szeretne olyan weboldalakat tervezni, mint 1999-ben? A pixelek az út. Menj vissza, tartsd fenn a normákat, mert amit tudsz, már működik, és amíg működik, állj a gyepen, és erőteljesen rázd az öklödet …

ez a cikk nem a kis piros zöld és kék pixelekről szól, amelyeket a képernyőn látsz, ne aggódj, hogy rendben vannak. Ez a pixelek használatáról szól a HTML & CSS – ben. Nincs szükség az elmélet, a CSS pixel nem # f-ing skála, roll kredit!

kell lennie egy jó ok, hogy miért…

a web 21+ éves szabványokon alapul, amelyeket nem a mai világ számára terveztek

Exodus 12:8

ugyanazon az éjszakán meg kell enniük a tűzön sült húst

a Biblia arra utal, hogy a vágás napján egy állat húsát kell ennünk. De most már vannak hűtőszekrények, fagyasztók és konzervek, mint megoldások az új és a régi problémákra.

CSS1 mondja:

a kijelzők nagyjából azonos méretűek, ezért használjon statikus betűtípusokat

igényeink 1996 óta megváltoztak. Most már sokkal szélesebb körű eszközöket, felbontásokat és megjelenítési arányokat kell figyelembe vennünk. Annak ellenére, hogy új funkciókat vezettek be, az élelmiszeriparral ellentétben az alapul szolgáló technológia nem változott:

visszamenőleges kompatibilitás

és jogosan, mert most mindannyian elviseljük az internet nyomorúságát.

A betűméret félreértései

az elmúlt időszakban több fejlesztő és tervező kollégámmal is megvitattam a betűméret-tévhitek témáját.

általában úgy reagálnak, mintha azt mondanám nekik, hogy a Mikulás nem valódi…

A betűméret nem kifejezetten korrelál a képernyő pixelméretével

  • egy 16 képpontos betűcsaládnak “A” karakter 24 képpont magas lehet, egy másik 16 képpontos betűcsaládnak 26 képpont magas lehet az “a” karakter.
  • nem veszi figyelembe, hogy a böngészők és az operációs rendszerek hogyan kezelik a kerninget, a simítást és a legfontosabb eszköz pixelarány különböző módon.
  • a felhasználói ügynökök mindegyikének más alapértelmezett készlete van.

ezért kérjük, állítsa le minden beszélni “pixel tökéletes” az interneten, ez nem lehetséges, kivéve, ha célja, hogy tervezzen egy statikus oldal egyetlen böngésző egyetlen képernyő mérete egyetlen típusú eszköz.

SOHA NE HASZNÁLJON PIXELEKET WEBOLDALAK MEGVALÓSÍTÁSÁHOZ!

nem én vagyok az első, és nem is leszek az utolsó, aki ezt köp, ezért nézd meg a többi bűnöst, mielőtt az első követ dobnád. Vegyünk egy mély lélegzetet…

  • lebegőpontos pontosság: A CSS összes betűkészlete (beleértve a px-et is) képes kezelni az úszókat a modern böngészőkben. Általában, ha az 1px-et” feltételezzük ” a képernyő pixelének megfelelő méretével (ami helytelen), értelmetlennek tűnhet a tizedesjegyek használata, amikor 1 pixelarányú eszközre tervezünk. Ha ezeket a mutatókat 2/ 3 vagy 4 DPR-vel rendelkező eszközön nézi, a tizedesjegyek elkerülése miatt nyilvánvaló pontosság elveszik. A REM és az EM “ösztönzi” a nagyobb pontosságot a decimális használat révén.
  • ez egy illúzió: a CSS-ben lévő pixelek nem valós képernyőméretű pixelek. Valójában optikai referenciaegységek. Ez a zűrzavar néha arra készteti a “profi” és tapasztalt webfejlesztőket, hogy ostoba dolgokat tegyenek, például Pixel-To-em konverziós mixineket hozzanak létre a CSS előprocesszorok számára. Ez lehet az oka annak, hogy egyesek annyi időt töltenek az UX tervezőkkel az apró margó/ párnázási különbségek miatt. Az eszköz pixelaránya az optikai referenciaegység méretét mutatja, amely csak az eszköztől vagy a felhasználó által beállított asztali nagyítási szinttől függ.
  • a PX több karbantartást eredményez: itt nem mondok semmi újat, de általában sokkal könnyebb fenntartani a százalékokat a pixel méretű konténerekhez képest.
  • relatív beállított méretek skála betűmérettel: mindig használjon REM vagy EM egységet olyan helyeken, ahol általában rögzített szélességet vagy magasságot kell beállítania. Az EM méretű konténerek a betűmérethez viszonyítva vannak. EM egységek esetén, ha frissíti a szövegtároló betűméretét, a szélesség vagy a magasság (EMS-ben beállítva) arányosan fog méretezni, ami azt jelenti, hogy pixelek használatakor csak 1 értéket módosít, nem pedig 3 értéket. Rem esetén ez igaz, ha megváltoztatja a dokumentum gyökér betűméretét.

(Igen EM fejlettebb, mint a REM annak ellenére, hogy idősebb, EM is jobban működik a Média-lekérdezés töréspontok, mint REM az egész böngészők valamilyen okból).

kevés olyan körülmény van, ahol pixelekre van szükség, és ezek közül kevés a tényleges elrendezés felépítéséhez.

EM vs REM

a legszomorúbb képek használata valaha.

látod, mit csináltam?

az EM-et használó betűméret a szülő tárolójának betűméretéhez viszonyítva van. De néha az összetétel nem kívánatos és nehezebb fenntartani. A REM egységek a Dokumentumhoz viszonyítva vannak. Ha kétségei vannak, használja a REM (IE9+) az egyszerűség kedvéért.

rem egységek használata

ha a pixelek ősi világából érkezik, nehéz lehet hirtelen elkezdeni a REM egységek használatát. Íme néhány tipp.

  1. természetesen az 1REM 16 képpont a CSS-ben: de a 16 képpont a CSS-ben nem valós mutató a képernyő pixeleiben, különösen betűmérettel. Ezért a REM használat ugyanazt a próbaverziót igényli, amelyet a pixelekkel együtt csináltál.
  2. 0,5, majd 0,25: ha bármilyen hosszúságot tippelsz, amint ésszerűen közel kerülsz, növeld vagy csökkentsd 0,5-tel, majd ismét 2,5-tel, mielőtt konkrétabb találgatásokat végeznél. Ez általában időt takarít meg.
  3. használjon számológépet: a címsor egy számológép a chrome-ban, duh!

A jövő derékszögű-szerű

példa a mimetikus használatával.js rem mértékegységeket és százalékokat használ.

a CSS HTML-en keresztül már Derékszögű koordináta-rendszert használ, itt nem ezt vitatom. A probléma az, hogy összességében hiányzik a kulcsfontosságú összetevő “aránya”. Minden elem arányos lehet a nézetablakhoz képest %, vw vagy vh használatával, a betűméret tulajdonság kivételével. Még a REM egységek sem tudnak segíteni. a vw és a vh egységeket figyelmen kívül hagyják, mivel törik a zoom hozzáférhetőségét az asztali böngészőkben, ha betűmérettel használják.

CSS &HTML együtt make-up egy tisztátalan 2D keret

ez nem így van SVG. De az SVG még nem tartalmaz szövegcsomagolást vagy formázási modellt.

1996-ban ragadtunk. Ahhoz, hogy a webdesign a 21. századba kerüljön, legalább egy arányos 2D rendszerre van szükségünk a betűmérethez.

mindent meg kell őriznünk az x tengelyen (ablakszélesség) arányosan. Ez az Y tengely skálájának elemeit is arányossá teszi, de az y tengely méretezése nem befolyásolja az x tengely méretezését.

volt néhány JavaScript kísérlet arra, hogy a betűtípusokat arányosan méretezzék a böngészőben, egyesek pixeleket, mások em/ rem egységeket használnak. A pixeleket használók hibásak.

Akkor Miért Halottak A Pixelek?

  • statikusak (de technikailag a többiek többsége így van)
  • nem tartják tiszteletben a gyökér betűméretet a változások után (nem igazán viszonyulnak a gyökér betűméretéhez, mint például a REM és az EM egységek)
  • az olyan tulajdonságok, mint a margók, a kitöltés és a vonalmagasság, természetesen nem skálázódnak, amikor újra beállítják a sort.
  • ezeket egész számokként feltételezzük, ami általában kevésbé pontos megvalósításokat eredményez a különböző pixelarányokon.
  • nyilvánvaló, hogy a Bootstrap 4 pixeleket dob a REM számára.
  • a pixelek azt az illúziót keltik, hogy egyenlőek a képernyőn megjelenő pixelekkel, ami tévhitekhez vezet, és hosszú távon zavarossá válik az új fejlesztők számára.
  • a pixelek valószínűleg nem válnak életképes megoldássá a betűtípusok méretezéséhez a jövőben, mivel a tervezés átfogóan az arányokról szól.

ez az én veszi, hogy miért nincs komoly jövője Pixel web design!

Köszönjük, hogy tolerálta ; -)

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.