Álosztályok, álelemek

Bizonyos kijelöléseket, mint például egy bekezdés kezdőbetűje, nem tudunk végrehajtani, ha a dokumentumfára támaszkodunk. Ezekben az esetekben szükségünk van az úgynevezett álosztályokra és álelemekre. Vegyük először sorra az álosztályokat. A :first-child azt az elemet választja ki, amelyik legelső gyermeke egy másik elemnek (IE7-től működik). A :link a még meg nem látogatott hivatkozásokat választja ki. Ehhez hasonló a :visited, csak már látogatott linkekhez. A :hover azt az elemet választja ki, amelyik felett áll éppen a kurzor. (IE6 csak hivatkozásokra támogatja) Az :active akkor jön szóba, mint az előző, csak itt felhasználó le is nyomta az egérgombot. Érdemes ügyelni ezek egymás utáni sorrendjére, mert előfordulhat, hogy egyes böngészőkben felülírhatják egymást. (Hogy ezt elkerüljük, jegyezzük meg: LoVe HAte.) A :focus pedig akkor hat, ha az adott elem fogadja a billentyűzetről bevitt adatot. Magyarul belekattintunk a beviteli mezőbe. (IE6 és 7 sem támogatja) Végül a :lang(nyelvkód) megadott nyelvű dokumentumrészt választ ki. (Gyenge támogatottság miatt sehol se érdemes alkalmazni!)

A CSS álelemek a következők: A :first-line (bekezdés első sora) csak blokk-szintű elemekre alkalmazható, és csak az alábbi tulajdonságokat kaphatja: font tulajdonságok, color tulajdonságok, background tulajdonságok, word-spacing:, letter-spacing:, text-decoration:, vertical-align:, text-transform:, line-height:, text-shadow: és clear:. A :first-letter (bekezdés első betűje) is csak blokk-szintű elemekre alkalmazható, és rá alkalmazhatók: font tulajdonságok, color tulajdonságok, background tulajdonságok, text-decoration:, vertical-align: (csak ha a float: értéke none), text-transform:, line-height:, margin tulajdonságok, padding tulajdonságok, border tulajdonságok, float:, text-shadow: és clear:. A :before álelem bizonyos tartalmat illeszt az elem elé, az :after pedig az elem mögé. Hogy pontosan milyen tartalmat, azt a content: tulajdonsággal tudjuk megadni. Itt megadhatunk szöveget, vagy képet. Ha szöveget adunk meg, akkor erre további stílusokat is alkalmazhatunk. E kettőt az IE fent említett két verziója szintén nem támogatja. Ötletként felvetem még, hogy az álelemek és álosztályok akár kombinálhatók is egymással vagy magukkal.

Elavult címkék és attribútumok

Gyakran használtuk az előző fejezetben ezeket a kifejezéseket. Most kiderül miért. Az elavult jelző azt jelenti, hogy van helyettük jobb megoldás (stíluslapok). A következőkben felsorolt címkék és attribútumok egy régebbi szabvány részei voltak, de a legújabb szabványnak már nem részei. Ezeket a böngészők még felismerhetik, de nem érdemes használnunk őket, hiszen a közeljövőben egyre inkább ki fognak kopni. Lássuk, stíluslappal hogyan válthatók ki!

címke/attribútum funkció helyettesítése
<b></b> félkövér <strong></strong>,
vagy font-weight: bold
<i></i> dőltbetűs <em></em>,
vagy font-style: italic
<u></u> aláhúzott text-decoration: underline
<s></s> és <strike></strike> áthúzott <del></del> vagy text-decoration: line-trough
<center></center> középre igazítás text-align: center
<big></big> nagyobb betűméret <h1></h1>, <h2></h2>, vagy font-size: larger
<small></small> kisebb betűméret <h5></h5>, <h6></h6>, vagy font-size: smaller
cellpadding, cellspacing táblázatoknál még használható margin és padding tulajdonságok
align igazítás float:
link, alink,
vlink, text
szövegszínek color tulajdonságok álosztályokkal
background, bgcolor hátterek background tulajdonságok
topmargin, rightmargin, bottommargin, leftmargin margók margin tulajdonságok

Az elavult címkék (pl.: <font></font>) és attribútumok (pl.: target) listája természetesen nagyobb. Az előbbieket főként a stíluslapos kiváltásuk miatt említettem meg.

Gyakoriak még ugyancsak a már tanult, Frame-s megoldások is. Az elavult framekkel lehetőség van egynél több weboldalt (külön HTML fájlt) megjeleníteni egyetlen böngészőablakban. A framekkel kapcsolatban fennálló több probléma miatt nem ajánlott azok használata. Ezek a következők:

  • a nyomtatás máshogy működik egy frames oldal esetében
  • kedvencekbe való felvételekor nem az éppen látható állapotot, hanem a központi oldalt menti el a böngésző
  • több görgetősáv is megjelenhet a böngésző ablakában, ami miatt nehezebb használni az oldalt
  • a keresők tartalomindexelő robotjai sem szeretik a frameket, így rosszabb lesz a honlap besorolása

A framek alternatívája lehet valamilyen szerveroldali megoldás, vagy pedig az overflow: és position: fixed meghatározása. Erre minták itt találhatók!

Ugrás a következő oldalra!

0 hozzászólás