Csíkos asztal »css eszközökkel
Tűztem, a következő feladat: módosítása nélkül a HTML-fájl: adja egyedi stílusát osztályok páros és páratlan sorok táblák az osztályban csíkos.
A szokásos módon
Rakjuk hívják ezt a funkciót az onload esemény az oldal, akkor a kívánt eredmény eléréséhez.
Talán ma az optimális megoldás, de nem hagy HTML-kód ép. Számomra érdekes volt, hogy megoldja a problémát csak a CSS, vagy legalább bízza a feladatot, CSS keresni ezeket a forrásokat.
A tökéletes megoldás
Lehetséges, hogy megoldja a problémát a CSS «tiszta»? Ez akkor lehetséges, ha a böngésző támogatja a CSS3. Tanulmányozása után az előírásoknak, azt látjuk, van egy új pszeudo-osztály: n-ed gyermek (). biztosan meg befolyása alatt a tárgyat, és amellyel a szükséges módok meghatározása nagyon egyszerű:
Sajnos a modern böngészők túlnyomó többségében még nem támogatja ezt. És mi CSS2? Itt, sajnos, megfelelő szerszámmal, egy kicsit. Részben megoldja a problémát, akkor a választó +:
Ez a módszer azonban csak alkalmas viszonylag kis asztal és egy ismert sorok számát, továbbá azt nem nevezhető kényelmes. Mi marad? Továbbra is használja a speciális funkciók mindegyik böngésző. Próbáltam megoldást találni a Windows az Internet Explorer, a Mozilla és az Opera.
Internet Explorer
Ezzel böngésző nehézségek merültek fel. Kihasználva a képességét, hogy értékeket IE CSS-tulajdonságok segítségével dinamikusan expresszióját (). feladat váltakozó színű sorok, például könnyű megoldani a következő módon:
Annak megállapításához, ez a módszer nem tartozik a tulajdonságokat, és az egész stílus a megfelelő táblázat sorait (add oddrows és evenrows osztály), a kód kell bonyolítani, vagy felhasználását technológia DHTML viselkedések:
Ebben a példában végre tervét: adja hozzá a kívánt húr osztály, attól függően, hogy akár egy húr, vagy sem. Ez a viselkedés tr tag leírt stripy.htc file:
Használt technológiák bevezetésének az Internet Explorer 5, illetve a táblázat az osztály csíkos lesz „zebrák”, hiszen ez a verzió.
Extension, mint DHTML viselkedések és végrehajtani böngészők a motor Gecko. Webfejlesztők számára megengedett, hogyan határozzák meg az új elemek az oldalon, és felülírja a megjelenés, tartalom, és viselkedését a szabvány. Ez használ XBL (XML Binding Language). Ez a technológia b # 243; lshimi képességek képest fejlesztése a Microsoft és úgy tűnt, hogy a probléma megoldása nehézséget nem fog felmerülni, de ott volt.
A CSS XBL-szerű kötődési viselkedését megadott alkalmazásával tulajdonságok -moz-kötő:
Maradtak a XBL-fájl stripy.xml viselkedését leíró releváns címkéket ellenére azonban minden erőfeszítést, nem tudtam „fix” bármely tr tag. nincs más táblázat címkéket. Az ok a baj megjelent Bugzilla Bug 83830. Binding TD sejtek (az XBL) nem működik, egyáltalán. És ha ez nem fáj, de körülbelül úgy tűnt, hogy az XBL nem számít. Szerencsére egy olyan megoldást találtak még!
Segítség érkezett a híres Dean Edwards Web guru (Dean Edwards), aki megalkotta a XBL-wrapper. így Gecko-böngészők Microsoft DHTML Viselkedés technológia, ami azt jelenti, hogy megoldja a problémát, akkor használja ugyanazt a fájlt stripy.htc. mint az IE!
Ehhez szükségünk van két XBL-fájl: moz-behaviors.xml (közvetlenül szatyor, akkor vegye fel Dean Edwards honlapján, súlya kevesebb, mint 7K) és bindings.xml (kisegítő, köztes fájlt CSS «között» és moz-behaviors.xml kódot. alább). Most, hogy a fájl-.htc megszerezte a Mozilla, a következőkre van szükség:- Először is, meg kell egy érvényes XML-dokumentum (mint a fenti példában), mert annak töltése használt XMLHttpRequest objektum;
- Másodszor, meg kell ugyanabban a könyvtárban és moz-behaviors.xml bindings.xml;
- és harmadszor, a XBL-kötő kell megalkotni, így:
Általában minden rendben van, de változtatni a viselkedését tr tag még nem miatt a fent említett hiba, de okos lány Edwards sikerült megoldani ezt a problémát. Esetünkben a CSS kódot módosítani kell:
Tartalom bindings.xml fájlnak kell lennie az alábbiak szerint:
Most minden rendben. Táblázatok csíkos osztály lesz „zebrák” a böngésző motorja Gecko, verziótól 1.0.
Sajnos, ez a családtag web-vezetékek nincs kiterjesztése mechanizmus hasonló a versenytársak. Igen, a 9. verzió kütyü. de nem tudnak segíteni bármilyen módon befolyásolja a teljesítményét a böngésző. Mit kell tenni? Opera nem volt más választása, hogy használják a tiltott módszereket. Verziótól kezdődően 7, a böngésző (például sőt, az IE, mivel 5-ös verzió) van egy érdekes „funkció” - a képesség, hogy végre szkripteket közvetlenül a CSS. Erre a célra bármilyen CSS-tulajdonság, amely lehetővé teszi, mint érték adja meg a fájl elérési útvonalát. Itt egy példa ezt a technikát:
Opera fut egy script csak a már meglévő HTML-elemeket, és csak egyszer. Miért nem veszi igénybe, és nem vesz fel kölcsönt a forgatókönyvet a fent említett? Így is tettem, bár el kell ismernem, ezzel a technikával nehézségekkel és nem minden forgatókönyv „engedelmeskednek”:
Ez a szkript lefut sikeresen Opera és a CSS:
Ebben a példában a kívánt funkció közvetlenül hívható (az ellenőrzése if (window.opera) fordul elő csak az Operában.), És lehet kötve a kihívás, hogy a onload esemény az oldal, én képes elérni ezt az alábbiak szerint:
Mindkét opció fog működni Opera verziók támogatják ingatlan className HTML-elem objektum tr elem. azaz kezdve version 7.5. Táblázat az osztály csíkos sikeresen vált a „csíkos”, és a 9. változata a böngésző, hanem a 8500 szerelvény Opera elveszíti „egyedülálló módon” - mondta a vétel nem működik már. Úgy tűnt, hogy egy zárt kérdés, az Opera továbbra is nyitott.
Tehát, hogy minden terve nem sikerült, de mégis, mi, bár nem teljes, de kielégítő megoldást. HTML érintetlen, és a stílus style.css fájlt a következőképpen nézhet ki: