ugrás a tartalomhoz

CSS alapjai V.

Bártházi András · 2004. Május. 18. (K), 21.00
CSS alapjai V.
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:
#message { z-index: 1; }

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:
p.hebrew { direction: rtl; }
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:
.hebrewquote { direction: rtl; unicode-bidi: embed; }

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):
p:before { content: '[para]'; }
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:
p:before { content: url(/images/para-start.gif); }
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:
h1:before { content: counter(headermains); }
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:
q:before { content: open-quote; }
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:
a:after { content: " (" attr(href) ") "; }

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:
h1:before { content: counter(headermains) '.'; }

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:
h2 { counter-reset: headermains 0; }

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:
h1 { counter-increment: headermains 1; }

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:
q { quotes: '\201E' '\201D' }
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:
a { cursor: move; }
.area { cursor: url(/images/eger.gif); }
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ű:
li:before { display: marker; marker-offset: 3em; content: "*"; }

Ö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.
 
Bártházi András arcképe
Bártházi András
Az Emarsys-nál dolgozik vezető fejlesztőként, és az API-ért, integrációkért felelős termékmenedzserként. Szeret profi csapatban profit alkotni.
1

huh

kmm · 2004. Május. 19. (Sze), 06.48
Na igen!
ha vegre hasznalni is fogjak a bongeszok rendesen a csst dejolesz nekunk! :D

--
üdv: kmm...
2

Pontositas:

Jano · 2004. Május. 19. (Sze), 09.43
A content a 2.1-es szavany szerint tenyleg csak :before, :after elemhez kapcsolhato de CSS3 szerint bermilyen elemhez.

A content alkalmazasaval before es after elemeken ugyes kepkivagassal keszithetunk egyedi keretu dobozokat:
http://www.w3.org/Style/Examples/007/roundshadow.html

A z-index nem a blokk elemekre hanem CSS2.1 szerint a pozicionalt elemekre ervenyes. Egyebkent egy-ket specko elem flash, iframe, from elemek nem mindig tehetok szabadon egymas fole, ala. Ez bongeszo verziotol fugg.
3

Re: Pontositas:

Bártházi András · 2004. Május. 19. (Sze), 10.18
Szia!

Köszi a pontosítást! A cikkben a CSS 1/2/2.1 szabványokról van szó. A CSS 3-nak (és a moduljainak) is jó lenne majd egy-két cikket szentelni, de arra egyelőre nem hiszem, hogy lesz időm.

A z-indexes hibámmal kapcsolatban teljesen igazad van, javítom is. :)

-boogie-
4

Pontosítás2

Anonymous · 2005. Nov. 18. (P), 11.01
András, egy megjegyzés az Attribútumok részhez:

A példa (img:before { content: attr(alt); }) azt sugallja, hogy a kép elé kellene kerüljön a szöveg. Úgy tűnik azonban, hogy ez nem működik és nem is jó értelmezés, ugyanis a ::before ill. az ::after látszólagos elemek nem previous/next-sibling, hanem first/last-child típusú elemeket generálnak. Mivel a képnek nem lehet tartalma (gyermeke), ezért nem is fog megjelenni ez a szöveg (ugyanis benne van...). Ezt a példát hozza a CSS spec. is, de úgy hogy ez akkor jelenik meg, amikor a kép nem elérhető, lásd: http://htmlinfo.polyhistor.hu/css2ref/generate.htm#content

Ha jól gondolom, akkor az ::outside CSS3 tulajdonság fogja azt csinálni, amit írsz, lásd: http://www.w3.org/TR/2003/WD-css3-content-20030514/#wrapping Vagy tévedek?

Miért? Épp olyat szerettem volna készíteni, amit írsz, hogy az alt attribútumot megjelenítem a kép alatt, de sajnos nem működött. Egyedül Opera teszi úgy, ahogy írod, de - szerintem - itt az Opera téved. Az ::outside implementálásáig marad a diszkrét javascript...
5

Köszönöm

Bártházi András · 2005. Nov. 18. (P), 17.41
Igazad van, köszönöm a helyesbítést.

-boogie-
6

Szövegirány

Anonymous · 2006. Jan. 7. (Szo), 22.58
Nagyon örültem, hogy felfedeztem a szövegirányt befolyásoló tulajdonságot acikkben, rögtön ki is próbáltam, mert szeretnék magyar rovásírással is olvasható oldalt készíteni (ez pedig ugye jobbról balra olvasandó).
De csalódva kellett tapasztalnom, hogy a szöveg iránya nem változott meg, csak épp jobbra lett tolva, mintha egy align=right vonatkozna rá :(