CSS mértékegységek

2018. december 10.

A CSS fájlokban sokszor találkozik az ember mindeféle mértékegységgel, gyakran még egy fájon belül sem tartva egy-egy konvenciót. Ha pedig külső CSS keretrendszereket is behúzunk a projektbe, akkor még nagyobbra tud nőni a probléma. 

De egyáltalán milyen mértékegységek léteznek?

Jelen pillanatban 15, a CSS specifikációban leírt mértékegység létezik, ezeket pedig alapvetően két típusba sorolhatjuk: vannak az abszolút és a relatív mértékegységek.

Abszolút egységek

Ide tartozik a leggyakrabban használt egység, a pixel (‘px’) is. 1 pixel = 1/96 inch. Ez valójában megtévesztő lehet, hiszen a CSS pixelnek semmi köze sincs az igazi inches, sőt az eszköz felbontásához és a kijelzőjén található milliónyi pixelhez sem. Van erről is egy nagyon jó olvasmány, amiből kiderül az is, hogy ha valaminek a szélességét 23,4 pixelre állítod be, akkor az valójában azt jelenti, hogy olyan széles lett, mint amilyennek a Hold látszik. 🙂

A pont (‘pt’) tartozik még ide, bár ezt inkább nyomtatott médiában, nyomtatásban használják. 1 point = 1/72 inch. Fenn áll még egy könnyen megjegyezhető egyenlőség is a px és a pt között: 12pt = 16px. Itt említeném meg még a pica (‘pc’) nevű mértékegységet is, ami esetében pedig 1 pc = 12 pt.

Az abszolút mértékegységek közé tartozik még az inch (‘in’), ami a már előbb említett CSS inch, mint inkább az eredeti mértékegység. Konkrét fizikai mértékegységek is használhatóak, mint a centiméter (‘cm’) és a milliméter (‘mm’) is, bár ezek nem igazán terjedtek el. A köztük lévő váltást a következő egyenlet írja le: 1 mm = 0,1 cm = 3,78 px.

Ezekhez kapcsodik még  a “negyed milliméter” (‘Q’) is, ami 1 cm 1/40-ed része azaz egy negyede egy millimétenrek, bár szerintem erről még kevesebben hallottak. De miért is van erre szükség? Ezt is nyomtatásban használják. Japánban. 🙂 Azért mert ott nem pt-t használnak, hanem Q-t. Pont ezért van az, hogy errefelé szinte senki sem ismeri… 🙂

Relatív mértékegységek

Ezek olyan mértékegységek, melyek egy másik egységhez képest mérten definiálhatunk. Itt újabb két alcsoportot lehet megkülönböztetni, attól függően, hogy a fonthoz vagy a viewporthoz viszonyítjuk.

Fonthoz relatív egységek

Ebben a csoportban a legtöbbet használt egység az ’em’. Eredetileg a tipográfiában használták és a nagy M betű magasságát jelentetette. Ennek a használata viszont problémás tud lenni, mert ha több szint mélyen használjuk, akkor ugyanaz az érték a weboldal más-más pontján eltérő nagyságú betűket eredményez. (itt meg is nézheted)

Ezt kiküszöbölendő lehet használni a ‘rem’ egységet, ami a szintén relatív, de a root, azaz a gyökérelemhez képest. Ez azt jelenit, hogy 1 rem a html elemben meghatározott betűmérethez viszonyul. Ha ez nincs megadva, a legtöbb böngészőben alapértelmezetten 16 pixel lesz. (bővebben itt lehet róla olvasni)

Ebbe a kategóriába tartoznak még az ‘ex’ és az ‘ch’ egységek. Az ex függ a használt betűtípustól, hiszen pontosan a kis x magasságával egyezik meg. Ha pedig nincs ilyan karakter a betűtípusban, melyhez viszonyítani lehetne, akkor 0.5em lesz az értéke. A ch esetében a 0 karakter szélességéhez mérik.

Viewporthoz relatív egységek

Ebbe a kategóriába is négy egység sorolandó. A viewport alapvetően az a terület, ahol a böngésző az oldalt rendereli, azaz a kijelző mérete kivéve a böngésző számára fenttartott hely.

1 viewwidth (‘vw’) egyenlő a viewport szélességének, 1 viewheight (‘vh’) pedig a viewport magasságának 1 százalékával.

A vmin és vmax pedig a kisebbet, illetve a nagyobbat jelenti az éppen aktuális vh és vw közül.

Támogatottság

Mindenképpen meg kell említenünk, hogy bár az eddig említett mértékegységek a CSS 3-as szintű specifikációjában szerepelnek, mégis vannak problémák néhány böngészőben, főként mobilon, illetve a régebbi böngészőkben.

Mit tartogat a jövő?

A CSS 4-es szintű specifikációjában újabb mértékegységek kerülnek bevezetésre, és ebből kifolyólag nem is támogatják még szinte egyiket sem a böngészők.

lh és lrh

Az aktuális sor magasságához, illetve a gyökér elemben meghatázott sormagassághoz relatív mértékegységek.

vi és vb

Ezek hasonlóak a vw és vh egységekhez, annyira, hogy azokban a nyelvekben, melyek vízszintesen íródnak, meg is egyeznek.  Azokban a nyelvekben viszont, melyek fügőlegesen írandók, például a japán, pont fordítottam működnek.

ic

Ez egy olyan egység, mely igazából a korábban említett ch keleti megfelelője. A 0 karakter szélessége helyett a kínai, japán, illetve koreai nyelvekben meglévő víz  (U+6C34) karakter szélessége lesz az alap.

Image result for U+6C34

cap

A specifikáció szerint hozzávetőlegesen egy nagybetűs Latin karakter magasságval egyezik meg. Tartozik hozzá egy bonyolultabb számítás is, mely persze azt is figyelembe veszi, hogy vannak olyan betűtípusok melyekben nincsenek Latin karakterek, de ebbe most nem mennék bele részletesen.

Záró gondolatok

Ahogy már az elején is említettem, hogy már a most specifikált 15 egység konzekvens használata is problémás tud lenni, főleg az összetettebb projektek esetén, nem hogyha még újabbakat hozunk be.

Ettől függetlenül viszont becsülendő, hogy három olyan új egyég is lesz, melyek a világ nyelvi sokszínűségét is szem előtt tarja. 🙂

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

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük