Mint azt az előző bejegyzésemben is bemutattam van néhány újabb mértékegységünk, amit használhatunk a sitebuild során.
Az eddig ismert méretezési egységeink:
Amit pedig most fogunk kicsit körbejárni:
Jah és ne hagyjuk ki őket sem:
Gyakran készítünk mostanában reszponzív designt. Ezzel együtt jár, hogy figyelni kell az átméretezésekre, a képernyő elforgatására. Ezt legtöbbször JavaScript segítségével oldjuk meg, így a tartalmunk a látható területen (viewport - erre normális magyar szót nem tudok) foglalja el helyét. Leellenőrizzük a viewport méretét, majd a tartalmat a méretekhez igazítjuk. Ha a felhasználó ismét módosít a méreteken (átméretezi az ablakot, forgatja a képernyőt) ismét lefuttatjuk a méretező scriptünket.
Ez macerás.
A CSS3 egyik újdonsága a vh és vw mértékegység, mellyel az elemet relativan méretezhetjük a viewporthoz. A vw/vh méretezés érdekessége, hogy egy egység mindig a látható viewport 1/100 része. Tehát, ha a az elemet 100% szélesre akarod állítani, akkor:
width: 100vw;
De ha mondjuk csak felére, akkor
width: 50vw;
Első ránézésre hasonlít a százalékos méretezéshez. Amiben másabb, hogy míg a százalékban megadott szélesség mindig relatívan a szülő elem méretéhez képest számolódik, addig a vh/vw mindig a viewport méret alapján számolódik.
Megjegyzés
Az IE9 óta csak a vm elérhető, ami a vmin, így IE alatt nincs vmax
Tehát, mint mindennel, az Internet Explorernek ezzel is baja van. Jelenleg a 11-es verzió sem támogatja a vmax használatát.
Megjegyzés
A vmin és vmax változik a képernyő forgatásával. Tehát 1
vmax
= 1vh
álló képernyőnél és 1vmax
= 1vw
fekvő képernyőnél.
Csak gondolj bele, full logikus. Hisz vmax
esetén álló képernyőn a magasság lesz a hosszabb, fekvőn pedig a szélesség, vmin
esetén pedig fordítva tehát álló képernyőn a szélesség lesz rövidebb, fekvőn pedig a magasság.
Képzeld el, hogy egy teljes széleségű grid rendszert csinálsz és használod a viewport értékeket. Valami ilyesmire gondolok:
.grid::before,
.grid::after {
clear: both;
content: '';
display: block;
}
.griditem {
box-sizing: border-box;
float: left;
height: 50vw;
padding: 2em;
width: 50vw;
}
Várj dobok be egy példát is, könnyebb észrevenni a hibát:
See the Pen grid vh-vw by Smajda László (@leoamros) on CodePen.
Tehát, a gridünk szétesett... Miért?
Néhány helyzetben a tartalmunk túlfolyik a viewportunkon. Mint a fenti esetben is. Ezt a böngészők különböző módon kezelik. Windows alatt egy scroll bar jelenik meg a jobb oldalon, ami minimális mértékben csökkenti a látható területet. OS X-en csak scroller jelenik meg, mely nem csökkenti a viewport méretét. Ez számunkra azért releváns, mert így kiderül a specifikációból, hogy:
“However, when the value of ‘overflow’ on the root element is ‘auto’, any scroll bars are assumed not to exist” Specifikáció
Magyarul:
Amikor az
overflow
értéke a fő (gyökér) elemenauto
ra van állítva, feltételezzük, hogy a görgetősávok nem léteznek.
Tehát, ha a tartalmunk függőlegesen vagy vízszintesen túllóg a viewporton és az overflow: auto
- ami egyébként az alapértelmezett -, akkor a viewportba nem számít bele a görgetősáv szélessége. Így a 100vw a teljes szélességet jelenti, a görgetősávval együtt Windows alatt. OS X-en természetesen minden jól fog megjelenni. Windows alatt a két .griditem
együtt szélesebb, mint a viewport a görgetősáv miatt.
Erre egy megoldás lehet, ha a html
elemre alapértelmezetten rárakjuk az overflow: scroll
-t vagy az overflow: hidden
-t. Persze, elég zavaró lehet, ha a tartalmat nem kell görgetni, mégis ott van a görgetősáv, vagy pont fordítva, ha a görgetősávot eltüntetjük, de mégis görgetni kell a tartalmat.
Vagy egy egyszerű JavaScript kóddal megvizsgáljuk, hogy kell-e görgetni vagy belefér a tartalom a viewportba.
var element = document.documentElement;
if(element.scrollHeight > element.clientHeight) {
element.style.overflow = 'scroll';
} else {
element.style.overflow = 'hidden';
}
Így mindig a megfelelő overflow
-t kapjuk.
See the Pen grid vw by Smajda László (@leoamros) on CodePen.
A tesztelés során kiderült, hogy a Chrome és Chromium valami miatt elrontja az overflow-s cuccot, így ott csak hidden-nel működik, scroll-lal nem... Érdekes. Firefox sírás nélkül lefuttatta a Pent.
Erre még keresek valamilyen megoldást.
See the Pen vw teszt by Smajda László (@leoamros) on CodePen.
See the Pen vh teszt by Smajda László (@leoamros) on CodePen.
Nekem kifejezetten tetszik, hogy nem százalékokkal, hanem a viewporthoz igazítva tudok megadni értékeket. Majd megpróbálom ezt a következő designba beépíteni.
Másik érdekesség, amire még használható, rengetegszer alkalmazunk lightboxokat, felugró képnézegetőket, aminél ezt nagyon frankón tudjuk alkalmazni, hisz ott minden esetben a viewporthoz méretezzük a felugró ablakot.
A böngészőtámogatottsága szerintem elfogadható. Így bátran használhatjuk a mai modern böngészőkben. iOS 7 alatt van egy kis bug, ami miatt a vh értéket nem tudjuk jól használni, erre van egy "fix".