Mit takar a "vh" és a "vw"?

img

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:

  • px
  • em
  • pt
  • rem
  • %

Amit pedig most fogunk kicsit körbejárni:

  • vh
  • vw

Jah és ne hagyjuk ki őket sem:

  • vmin
  • vmax

    Mire jó a vh és a vw?

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.

Összefoglaló lista

  • 1vh = 1/100 relatívan a viewport magasságához
  • 1vw = 1/100 relatívan a viewport szélességéhez
  • 1vmin = 1/100 relatívan a rövidebb oldalhoz
  • 1vmax = 1/100 relatívan a hosszabb oldalhoz

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 1vmax = 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.

Az egyetlen hátulütője a dolognak

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) elemen autora 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.

vw minta

See the Pen vw teszt by Smajda László (@leoamros) on CodePen.

vh minta

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".