Weblabor

A cikksorozat ötödik részében a két héttel ezelőtti témát folytatjuk, azaz tovább haladunk a tulajdonságok terén. Még mindig igaz: ha ki szeretnénk próbálni a bemutatottakat, csak a legújabb böngészőkkel próbálkozzunk, különben esélyünk sincs. És ha így teszünk, akkor sem minden esetben fogunk sikerrel járni, ezek a tulajdonságok újdonságnak számítanak még manapság is, a szabvány megjelenése után több évvel. De félre a mellébeszéléssel, vágjunk neki a tulajdonságokat bemutató utolsó résznek!

További tulajdonságok még mindig

Folytatjuk tehát ahol abbahagytuk, az érdekesebb, használhatóbb tulajdonságok következnek az alábbiakban, hogy tényleg csak azok maradjanak ki, melyekre nem lesz gyakran szükségünk.

Rétegek

A CSS alapú megjelenítéskor minden abszolútként pozícionált elemnek van egy pozíciója a harmadik dimenzióban, a "z" tengely mentén (ide érthetjük a gyökér elemet is, ami a left:0, top:0 pozícióba van pozícionálva). Az "x" tengely a vízszintes, az "y" tengely a függőleges pozíciót jelöli, a "z" tengely pedig ebben az esetben a mélységet.

A mélységet akkor tudjuk értelmezni a monitor sík kijelzőjén, ha több ilyen elem egymásra kerül, egymást elfedi. Ekkor az fogja elfedni a másikat, mely előrébb, "közelebb" van a felhasználóhoz, vagy másként mondva, "feljebb" van a z tengelyen.

A z tengelyen való elhelyezkedést a z-index tulajdonság segítségével, egy egész számot használva adhatjuk meg. Az alapértelmezett érték 0. Ha két elem azonos mélységgel rendelkezik, akkor a HTML-ben a később leírt fog "feljebb" megjelenni. Ha más értéket adunk meg, a nagyobb számmal bíró elem kerül közelebb a felhasználóhoz. Például:

Nemzetköziség: szövegek iránya, kétirányúság

Sok nyelvben (például héber, arab, etc.) az írás nem balról-jobbra, hanem jobbról-balra folyik, sőt, szükség lehet arra is, hogy egy dokumentumon belül vegyesen jelenjenek meg a nyelvek. Ez utóbbit hívják bidirekcionális, kétirányú, röviden "bidi" megjelenítésnek.

A CSS nyelv ezek befolyásolására is kínál megoldást két tulajdonság segítségével: direction és unicode-bidi.

Szövegirány tulajdonság

A tulajdonság segítségével az határozható meg, hogy egy blokk elemen belül a szövegünk balról-jobbra, vagy jobbról-balra folyjon. Ezekhez járul a két érték is, amit felvehet: ltr és rtl (azaz left-to-right és right-to-left). A tulajdonságot egy blokk elemre és beágyazott elemekre (lásd mindjárt a kétirányú tulajdonságot) használhatjuk. A szöveg irányán kívül befolyásolja még a táblázat oszlopainak sorrendjét, a vízszintes túlcsordulás irányát és a justify értékű szöveg utolsó sorának igazítását. Használata:

Kétirányúság tulajdonság

A szövegirány tulajdonságot alapesetben egy blokk elem (például paragrafus) szövegének az irányítására használhatjuk, azonban előfordulhat az is, hogy egy blokkelemen belül szeretnénk, ha több irányú szövegünk is lenne (mondjuk egy idézet miatt). Erre szolgál a kétirányúság tulajdonság, mellyel egy beágyazott elemet jelölhetünk ki arra, hogy hasson rá a szövegirány tulajdonság (alapesetben a blokk elem tulajdonsága a mérvadó). A unicode-bidi jelöli a tulajdonságot, melynek három értéke lehet: normal, embed, bidi-override. A normal érték esetén a beágyazott elemekre nem lehet megadni kétirányúságot, embed és bidi-override esetén az adott elemre lehet megadni, és az elemen belül kerül értelmezésre a szövegirány tulajdonság. Az embed érték esetén az újrarendezése a betűknek implicit módon, míg a bidi-override esetén a direction-nek megfelelően történik. Használata:

Dinamikus tartalmak

A CSS 2 magával hozta a dinamikusan generált tartalom lehetőségét, melyet a before és after látszólagos elemek esetén tudunk felhasználni (be is lett ott mutatva egy példa). A dinamikus tartalmak eléggé változatosak lehetnek, lehetőségünk van vegyesen karakterláncok, külső objektumok, számlálók, idézőjelek és az adott elem attribútumainak beszúrására. Ha több elemet szeretnénk beszúrni, szóközzel kell elválasztanunk az értékeket.

Sztringek beszúrása

Az említett, a látszólagos elemeknél bemutatott példában már be lett mutatva egy ilyen. Álljon itt egy másik példa, mely minden paragrafus elé beszúrja a [para] szöveget (a szöveg nem kerül értelmezésre a böngésző által, egy az egyben fog megjelenni a tartalmától függetlenül):

Külső objektumok

Külső objektum bármi lehet, amit a böngésző értelmezni tud. A következő példa egy képet jelenít meg minden paragrafus előtt:

Számlálók

A számlálókat később fogjuk bemutatni, röviden arról van szó, hogy egy folyamatosan növekvő értéket fogunk beszúrni az adott elem elé. Például:

Idézőjelek

Idézőjelek beszúrását is megtehetjük. A látszólagos nyelvi elemek kiválasztónál már említettük, hogy hogyan befolyásolható ezeknek az idézőjeleknek a megjelenése (még ki fogunk rájuk térni), most azt láthatjuk, hogyan tudjuk beszúrni ezeket. Négy lehetőségünk van: open-quote, close-quote, no-open-quote, no-close-quote. Rendre: nyitó idézőjel, záró idézőjel, nyitó idézőjel (megjelenítés nélkül) és záró idézőjel (megjelenítés nélkül) lehetőségeink vannak. A megjelenítés nélkül azt jelenti, hogy számlálásra kerülnek, de nem jelennek meg. Példa:

Attribútumok

Az adott elem tulajdonságának értékét is beszúrhatjuk szövegként az elem elé, vagy mögé. A példa egy link mögé szúrja be a href tulajdonságának értékét:

Számlálók

A számlálókat paragrafusok, vagy akár bármilyen más elem sorszámozására használhatjuk. Indíthatunk több számlálót, törölhetjük és növelhetjük az értéküket. A számlálókat a nevük azonosítja.

Számlálók megjelenítése

Két lehetőségünk van, a counter() és a counters() "függvény" használata. Az előbbinél egy nevet, illetve egy nevet és egy típust, míg az utóbbinál egy nevet és egy sztringet, illetve egy nevet, egy sztringet és egy típust kell megadnunk. A típus a felsorolásoknál használt lehetőségeket használhatja, ha nem adjuk meg, akkor decimális lesz. A counters() annyiban különbözik a counter()-től, hogy megjeleníti az összes felmenő számlálót is, összefűzve azok értékét a sajátjával. A megadandó név szolgál arra, hogy azonosítsa az összetartozó számlálókat. Példa:

Számlálók újraindítása

Ha egy adott elem után szeretnénk, hogy a számlálónk újrainduljon, vagy egy adott értékre visszaálljon, akkor használhatjuk ezt a "tulajdonságot". Egyszerre több számlálót is felsorolhatunk, mindegyik után írhatunk egy egész számot is, amire szeretnénk, hogy visszaálljon a számláló értéke. Ez a szám, ha nem írjuk ki, 0 lesz. Használata:

Számlálók növekedésének beállítása

A számláló újraindításához hasonlóan a számláló növekedését is beállíthatjuk. Az adott elem megjelenéseikor azonban nem beállni fognak az adott értékre a számlálók, hanem a megadott értékkel nőnek. Szintén több számlálót felsorolhatunk, ha akarjuk megadhatunk egész számot is növekménynek, ha nem adunk meg, az alapértelmezett érték 1 lesz. Megadhatunk negatív számot, vagy akár nullát is. Például:

További tulajdonságok

Végül azokat a tulajdonságokat gyűjtöttem össze, melyek valamennyire kapcsolódnak az eddigiekhez, és melyeket fontosnak tartok itt még ebben a cikkben megemlíteni. Lássuk ezeket!

Zárójelek beállítása tulajdonság

A zárójelekről már a nyelv szerinti kiválasztóknál és a dinamikusan generált tartalomnál is esett szó. Röviden összefoglalva: lehetőségünk van globálisan a zárójel karakterek definiálására, majd beszúrására. A beszúrást már áttekintettük - a zárójelek tulajdonság a beállítást végzi el. Például:A példában a kezdő idézőjelet alsó idézőjelnek, a záró idézőjelet pedig felső idézőjelnek állítjuk be. Lehetőségünk van további karakterek, sztringek megadására is, ha egy zárójelen belül további zárójelet nyitunk meg, akkor a harmadik, ha még egy újabbat, akkor a negyedik megadott jel kerül használatra, míg a bezárásukkor a páros helyen levők.

Kurzor beállítása tulajdonság

Egy adott elem felett lehetőségünk van befolyásolni az egérkurzor megjelenését, válogathatunk az operációs rendszer által biztosított kurzorok közül, vagy pedig megadhatunk egy saját képet is. A rendelkezésre álló értékek: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, továbbá az url(xxx.gif) formájú értéket is használhatjuk. Példák:

Jelölő eltolás tulajdonság

A megjelenítés tulajdonság segítségével megadható egy elemre, hogy marker, azaz jelölő stílusú legyen. A különböző tulajdonságai a jelölő elem tartalmának módosítható az eddig megismert tulajdonságok segítségével, azonban van egy, mely nem: ez a függőleges eltolása a szöveg vonalához képest. Ez a tulajdonság ennek megadására szolgál. Használata egyszerű:

Összefoglalás

Az előző és a jelenlegi cikk folyamán megismerkedtünk azokkal a tulajdonságokkal, melyeket az eddigiek során nem mutattam be, mégis adott esetben felhasználhatjuk ezeket. Mint folyamatosan jelzem nagy részüket a legújabb böngészők sem nagyon támogatják, ajánlott legeslegújabbakkal próbálkozni. Az itt bemutatottak között is volt pár tulajdonság, melyet igazán nem tudtam tesztelni, így csak a specifikációra hagyatkozhattam bemutatásuk során.

Aki kipróbálta ezeket a tulajdonságokat, ezeket maga is tapasztalhatta. Valószínűleg felmerült benne az a kérdés is: akkor miért a bemutatás, vagy miért a szabvány maga, ha nem is kerül megvalósításra, vagy ha igen, akkor csak pár böngészőben? Két válasz jut eszembe hirtelen: az egyik, hogy ezek megvalósítása nem mindig egyszerű, a böngészők lassacskán tudják csak megvalósítani ezeket, míg a másik, hogy ettől függetlenül egy-egy speciális környezetben (böngésző programozás, intranet, stb.) kiválóan alkalmazhatóak, úgy, hogy közben szabványosak maradtunk, és biztosak lehetünk benne, hogy egyre bővülni fog azon böngészők köre, amelyekkel működni fog az oldalunk.

A kiválasztók és tulajdonságok megismerésével még nem értünk a CSS megismerésének végére, a következő részben a mértékegységek áttekintését tervezem.