Weblabor

A cikksorozat következő részében tovább ismerkedünk a CSS fortélyaival, további tulajdonságok kerülnek napirendre. Szó lesz a láthatóságról, megjelenítési lehetőségekről és a CSS alapú oldalak kialakításánal leginkább fontos pozícionálásról és lebegtetésről egyaránt. Ahogy az előző cikkben, itt is igaz: az alább bemutatottak többnyire csak a legújabb böngészőkben fognak működni (sőt, előfordul, hogy még azokban sem)!

További tulajdonságok

Az alapszintű tulajdonságok áttekintésekor a korábbiakban már láthattuk, hogy számos módon befolyásolhatjuk dokumentumunk megjelenését, azonban ezeken kívül további eszközök is rendelkezésünkre állnak. A lehetőségek skálája annyira széles, hogy ezeket a tulajdonságokat is két cikkre bontottam, és ezeken belül is minden bizonnyal fognak még kimaradni tulajdonságok. Ezzel és a következő cikkel reményeim szerint ezek csak olyanok lesznek, melyekre viszonylag ritkábban van csak szükségünk.

A láthatóság tulajdonság

A láthatóság tulajdonság segítségével egy elemről meghatározhatjuk, hogy a böngésző megjelenítse-e, vagy pedig ne? Három értéket vehet fel:

• visible
  
• hidden
  
• collapse
  

A visible érték esetén látható lesz a böngészőben, hidden esetén pedig el lesz rejtve. A collapse értéket táblázat elemeknél használhatjuk, egy oszlop, vagy egy sor elrejtésére való. Példa a tulajdonság használatára:Fontos megjegyezni, amennyiben nem jelenítjük meg az elemünket, a hely még fennmarad számára, azaz tényleg csak és kizárólag a megjelenése lesz kikapcsolva, attól függetlenül még marad egy "lyuk" a dokumentumban. Ha teljesen el szeretnénk rejteni egy elemet, a következőben bemutatandó megjelenítés tulajdonságot a none értékkel használhatjuk rá.

A megjelenítés tulajdonság

A böngésző amikor megjeleníti a dokumentumunkat, előre meghatározott sémák segítségével építi fel a dokumentumunk megjelenését. Ilyen séma a dobozszerű megjelenítés, vagy a folyamatos, egy dobozon belüli megjelenítés, de a felsorolásokra, táblázatok megjelenésére is van egy-egy séma. Például a címsor elemek (h1-h6) és a paragrafus elem viszont ugyanazokat a blokk alapú sémákat használhatják. Ezek a sémák a következők:

• inline
  
• block
  
• run-in
  
• compact
  
• list-item
  
• marker
  
• table
  
• inline-table
  
• table-row
  
• table-row-group
  
• table-column
  
• table-column-group
  
• table-header
  
• table-header-group
  
• table-footer-group
  
• table-cell
  
• table-caption
  
• none
  

Bár a böngészőknél minden egyes elemhez hozzá van rendelve egy alapértelmezett séma, ezeket felül tudjuk bírálni. Erre szolgál a display tulajdonság. Ennek a használata a következő:Vegyük sorra, hogy melyik séma hogyan jelenik meg!

Megjelenítés letiltása

Ezen nincs mit bonyolítani, egyszerűen, ha display: none stílust adunk egy elemnek, akkor nem fog megjelenni. Ettől függetlenül a dokumentumunkban jelen lesz, elérhető, használható, de fókuszt már felhasználó által nem kaphat (pl. javascriptből viszont igen). A használata egyszerű:Ha egy form elemet szeretnénk letiltani, megtehetjük akár így is. Az összes elem, ami az ilyen stílussal ellátott elemnek a gyermeke, szintén láthatatlan lesz.

Soron belüli megjelenítés

Ennek segítségével az adott elemet egy soron belül lehet megjeleníteni. Jó példa erre a div és a span elem, a span elem ilyen, a div pedig blokként jelenik meg. Hasznát sok helyzetben vehetjük, de egy tipikus példa, mikor a form elemünk blokk típusú megjelenítését soron belülire szeretnénk változtatni, mert zavar, hogy a form határokon sortörést tapasztalunk:Röviden összefoglalva: az elem előtt és után nem lesz sortörés.

Blokkban történő megjelenítés

Ilyenek a div, a p és a címsor elemek. Egy téglalapot foglalnak el, és abban jelenítik meg tartalmukat. Felhasználására példa lehet, mikor egy felsorolás elemeit blokként szeretnénk megjeleníteni (például menünek használva):Összefoglalva: az elem előtt és után sortörés lesz beiktatva.

Befutó megjelenítés

A szabvány szerint a befutó megjelenés segítségével "betolakodhatunk" a következő elembe, amennyiben az blokként jelenik meg. Más szavakkal, a befutó megjelenítéssel azt érjük el, hogy az elemünk az utána következő blokk elem első soron belüli eleme lesz. Abban az esetben, ha nem blokk elem következik a befutó tulajdonságú elem után, akkor blokként jelenik meg. Így például egy címsor elemet az utána következő bekezdés elején tudunk megjeleníteni:

Kompakt megjelenítés

Itt a befutó megjelenítésnél egy fokkal bonyolultabb esetről van szó. A megjelenítő egy egy soros soron belüli blokként próbálja beilleszteni a következő blokk elembe - amennyiben a következő egy blokk elem és "befér" oda - a kompakt megjelenítés tulajdonságú elemet. Azt, hogy "befér"-e, a blokk elem bal vagy jobb margójának megvizsgálásával dönti el, ha az nagyobb, mint az elem szélessége, akkor a következő blokkon belül, különben pedig egy külön blokkban jelenik meg az elem. Az, hogy a bal, vagy a jobb margót vizsgálja-e meg a megjelenítő, a következő blokk elem irányától függ. Másként megfogalmazva, ha a következő elem mellett (bal, illetve jobb oldalon) elfér az elem, akkor ott, különben pedig felette egy külön blokkban jelenik meg. Ezt is címek megjelenítésére lehet talán használni, "kompaktabbá" tehetjük vele a dokumentumunk megjelenését:

Lista elemként történő megjelenítés

Listaelemként történő megjelenítést okoz, persze tudom, hogy nem illik magával megmagyarázni valamit. A lista elemek két egymás mellett álló téglalapként jelennek meg, a bal oldali behúzásként is felfogható, a jobb oldaliban pedig a lista tartalma jelenik meg. A lista jelölő elem az a stílustól függően vagy a bal oldali, vagy a jobb oldali téglalapban fog megjelenni.

Jelölőként való megjelenítés

Csak generált blokkban használhatjuk, ellenkező esetben soron belüli megjelenést állít be. A generált blokkra példát az elem előtt és után történő kiválasztásnál láthattunk a content használatakor. Lényeg a lényeg, az előzőleg a lista elemnél a jelölő megjelenéséhez hasonlóan fog megjelenni ebben az esetben a generált tartalom.

Táblázatokkal kapcsolatos megjelenítések

Ezek a tulajdonság értékek a táblázat elemekkel megegyező megjelenést biztosítanak. A lehetőségek a következők: table, inline-table, table-row, table-row-group, table-column, table-column-group, table-header, table-header-group, table-footer-group, table-cell, table-caption.

A pozícionálás és kapcsolódó tulajdonságok

Az egyes elemek helyzetét többféleképpen meg lehet adni. Szabályozható, hogy hol legyen a tetejük, aljuk, bal és jobb oldaluk, milyen széles és magas legyen a befoglaló méretük, hogy mihez képest viszonyuljon, stb. Ebben a részben ezeket a tulajdonságokat fogjuk megvizsgálni.

Pozícionálás tulajdonság

Evvel a tulajdonsággal azt határozhatjuk meg, hogy mihez képest helyezze el az elemet a megjelenítő alkalmazás. Lehetőség van statikus, relatív, abszolút, fix és öröklött értékre.

A statikus (static) érték (mely az alapértelmezett) ott jelenik meg az elem, ahol éppen tartunk a dokumentumban. Ennél az értéknél a bal és a fenti pozíció megadás (lásd mindjárt) figyelmen kívül lesz hagyva.A relatív (relative) érték esetén a statikushoz hasonló helyre kerül az elem, de lehetőségünk van a bal és fenti pozíció megadással eltolnunk. A következő elem elhelyezése úgy lesz számítva, mintha ez az elem a helyén maradt volna.Az abszolút (absolute) érték esetén szintén a statikushoz hasonló helyre kerül az elem, szintén lehetőségünk van eltolni, meghatározni az elhelyezkedését, ezen kívül a méreteit is. Itt már a jobb és lenti, illetve a szélesség, magasság megadásokat is használhatjuk, szintén lásd mindjárt. Ez az elem kikerül a megjelenítés folyamából, a következő elem oda kerül, ahova ez került volna.A fix, rögzített (fixed) érték nagyon hasonló az abszolút pozícionáláshoz. Kiemelhetjük a dokumentumunkból az adott elemet, és rögzíthetjük, de most nem a dokumentumunkon, hanem a megjelenítőn (képernyőn) az adott pozícióban. Ennek eredménye, hogy ha lejjebb görgetjük a dokumentumot, az elemünk ugyanott marad.

Elhelyezkedés és méret tulajdonságok

A pozícionálások meghatározásánál láthattuk, hogy adott esetben meghatározhatjuk egy-egy elem pozícióját, befoglaló méretét. Ehhez a top, left, bottom, right és a width, illetve a height tulajdonságok állnak rendelkezésünkre. A top, left, bottom, right esetében a befoglaló elem határaihoz képest befele kell megadnunk a méreteket. A három lehetőség (top, bottom, height és left, right, width) közül ha kettőt megadunk, a harmadik kiszámításra fog értelem szerint kerülni. Ha megadjuk a harmadikat is, akkor felülbírálódik az elsőnek megadott az ütközés miatt.Amikor egy elemnek szeretnénk "lefoglalni" egy adott helyet, vagy szeretnénk, hogy egy adott méreten ne nyúljon túl, akkor segítségünkre lehetnek a minimális és maximális magasságot és szélességet megadó tulajdonságok. Ezek a következők: min-height, max-height, min-width, max-width. Használatuk hasonló az előzőekben bemutatottakhoz. Akkor van értelme használni ezeket, ha nem adjuk meg a doboznak, csak maximum egy kötöttségét, s ekkor a tartalma fogja eldönteni, hogy milyen méretet vesz fel. Használata:

Túlcsordulás tulajdonság

Az előzőekből következik, hogy előfordulhat, mikor egy adott doboz tartalma nagyobb, mint amekkora helyet neki szánunk, azaz a tartalmunk "túlcsordul", például a szélesség és magasság tulajdonságok megadásának következményeként. Az overflow tulajdonság segítségével tudjuk szabályozni a böngésző erre a helyzetre adott válaszát.

Az overflow lehetséges értékei: visible, hidden, scroll, auto. Ha a visible értéket adjuk meg, akkor a blokk határain túl fog futni a tartalmunk, ha van például keretünk megadva, akkor a tartalom ezen is túl fog folyni, erre is rákerül. A hidden megadásakor a tartalomnak csak az a része fog látszani, mely a blokk határain belül van. Ha scroll-t adunk meg értékül, akkor megjelenik egy görgetősáv, és azzal tudjuk fel-le mozgatni a tartalmat. Végül ha auto-ra állítjuk a tulajdonságot, akkor hasonlóan a scroll értékhez, görgetősáv jelenik meg, de csak akkor, ha valóban túlcsordul a tartalmunk. Példa:

A vágás tulajdonság

A vágás tulajdonság egy elem alakjának meghatározására szolgál. Segítségével kijelölhetjük láthatósági határait, így az elem le lesz vágva a megadott formára. Jelenleg egyetlen forma adható meg, a négyzet, melynek rendre a tetejének, jobb oldalának, aljának és bal oldalának a pozícióját kell megadnunk. Használata:

A lebegés és törlése tulajdonságok

Aki megismerkedett a HTML nyelvben a képek lehetőségeivel, biztosan ismeri azt a tördelési technikát, mikor egy képet, idézetet, vagy bármi mást úgy helyezünk el a szövegben, hogy az adott paragrafus(ok) szövege "körbefolyik" körülötte. Az img elemnek van ugye egy erre szolgáló tulajdonsága, az align, mellyel balra és jobbra igazíthatjuk úgy, hogy az utána következő szöveg mellette maradjon. A CSS is kínál nagyon hasonlóan egy ugyanilyen lehetőséget a float tulajdonságon keresztül, de nincs lekorlátozva a tulajdonság a kép elemekre, "bárminek" megadhatjuk, hogy balra, vagy jobbra illeszkedjen. Például:Előfordul azonban, hogy nem szeretnénk, ha például egy adott paragrafus mellett ilyen lebegő elemünk legyen, ezt törölhetjük a clear tulajdonság segítségével. Ekkor a lebegő elem alá "tolódik" le a clear tulajdonsággal bíró elem. A clear tulajdonság none, left, right és both értékeket vehet fel, tehát megadható, hogy csak bal, vagy csak jobb, vagy mindkét oldalon lebegő elemeket letiltsuk. Használata:

Összefoglalás

Ezen cikk folyamán megismerkedtünk pár tovább tulajdonsággal, melyek az eddigiek során kimaradtak, de több esetben is igazán jó szolgálatot tehetnek számunkra. Sajnos viszonylag nagy részüket még a legújabb böngészők sem nagyon támogatják, ajánlott az Opera (főleg ezzel) és a Firefox legújabb verzióival próbálkozni. Emiatt volt pár tulajdonság, melyet igazán nem tudtam tesztelni, így csak a szabványban és különböző helyeken levő értelmezések alapján próbálhattam meg kibogozni, hogy vajon hogyan működhetnek. Bízom benne, hogy sikerrel.