Stílusváltás
2010.05.06. 13:13
Lassan lassan az IE is beáll a szabványos böngészők sorába. Igaz, mindíg egy lépéssel lemaradva követi a trendet, de ahogy beérnek a szabványok úgy az az egy lépés egyre kevésbbé fog számítani.
Ennek egyik előnye, hogy nem 2-3 hanem csak egyetlen weboldalt kell programoznunk. Nem elhanyagolható következmény azonban az sem, hogy ahogyan túlléptünk a tradicionális <table> és <frame> alapú honlapokon, most már a <div>-ben <div> struktúrákra sincs szükség, hogy egyben maradon a tartalom.
A tisztuló markup, melynek köszönhetően az adat és a tartalom végleg szétválik, megnyitja a lehetőségét a stíluslapok közti szabad váltásnak. Arra azonban ügyelni kell, hogy hogyan választjuk meg a CSS osztályokat! Sajnos a CSS nem támogatja az öröklődést a szó objektum orientált értelmében, pedig most nagyobb szükség van rá, mint bármikor.
Vegyük az alábbi egyszerű esetet:
<div class="centered funny_border">
Látszólag a fejlesztő szétválasztotta a megjelenítést és a tartalmat: a formázási információ átkerült a CSS definíciók közé. De valójában a formázási utasítások még mindig benne vannak a kódban! A div osztálya azt mondja: igazíts középre és adj nekem vicces keretet. Pedig azt kéne mondania, hogy "én egy vicces doboz vagyok":
<div class="joke_box">
És ezen a ponton kezdenek el hiányozni a CSS objektum orientált tulajdonságai, aminek következtében a stíluslap tele lesz ismétlésekkel. Például ha a designer ugyanazt a keretet szánta a vicc-dobozoknak, mint a hozzászólásoknak, csak előbbit középre rendezte, utóbbi pedig egy színsémát kapott, akkor a keretet két helyen kell definiálnia.
div.joke_box {
.... /* Mindenféle vicc-doboz tulajdonság*/
border: .......;/* Egy vicces keret nagyon sok tulajdonságból állhat, és a CSS3-mal etz csak bővül majd*/
}
div.comment {
.... /* Mindenféle hozzászólás tulajdonság*/
border:........; /* A fenti keret pontos másolata, minden időben. Brrrr......*/
}
Megoldást jelenthet, ha a keretre jellemző tulajdonságokat kiemeljük:
div.comment, div.joke_box {
border:........; /* Így már nem kell másolgatni */
}
De ekkor azt lesz gondunk számon tartani, hogy hány helyre is szóródott szét a joke_box definíciója. Milyen szép lenne a joke_box-on belül hivatkozni néhány másik stílusra, majd igény szerint kiegészíteni, valahogy így:
div.joke_box {
@import funny_border;/* Lehet, hogy azt sem kellene kikötni, hogy csak div-ek közt lehessen megosztani stílusokat? */
.... /* Mindenféle vicc-doboz specifikus tulajdonság*/
}
Remélem nem sokára nem csak a lapok szintjén lesz kaszkádosítás, illetőleg az általánostól a specifikusig haladva, hanem tetszőlegesen definiált sorrendben.
A bejegyzés trackback címe:
Kommentek:
A hozzászólások a vonatkozó jogszabályok értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a Felhasználási feltételekben és az adatvédelmi tájékoztatóban.