Menu      

IE, a 32-es CSSapdája

Az Internet Explorer általában nem arról híres, hogy bugmentes, azonban most egy olyan hibát mutatunk be nektek, ami egyszerűen teljesen érthetetlen. Érkezzen tehát a CSS include-olás IE módra!
Manapság, amikor egy oldalon már többen is dolgoznak szinte elkerülhetetlenné vált több template és a hozzájuk tartozó CSS (Cascading Style Sheets ) használata. Ez megkönnyíti azon fejlesztők munkáját, akik nem használnak valami fajta verziókövető rendszert vagy adott esetben SVN-t.

A külön templatek és CSS-ek használatakor egyszerre több programozó is tud dolgozni az oldalon úgy, hogy közben nem írják felül egymás munkáját. A legelterjedtebb módja a több CSS behívásának egy oldalba a szokásos formában történik

 

Ennek hátránya, hogy a kódba belenézve nem lesz túl szép az oldal ráadásul magának a HTML-nek a méretét növeljük pár bájital teljesen feleslegesen. Sokkal szebb formája a több CSS használatának az, ha kinevezünk egy közös CSS-t, amit az előbb ismertetett módon hívunk be az index-be. Legyen ez a default.css majd az összes többi különálló CSS-t az alábbi módon include-oljuk bele a default-ba.

@import url('module.css');
@import url('module1.css');
@import url('module2.css');

Ilyen esetben egyértelműen figyelnünk kell arra, hogy a behívott css-ek elérési útvonalát a szülő cSS-hez viszonyítva kell megadni. Jelen esetben tehát a modulex.css-ek a default.css-el egy mappában vannak. És itt jön az igazi csavar!

A megoldás minden böngésző alatt remekül működik, azonban az Internet Explorernek van egy a mai napig ki nem javított hibája vagyis, hogy összesen 32 db CSS fájlt képes include-olni! Bizony, ha már 33-at rakunk be annak tartalmát az IE nem fogja lekezelni. Hogy miért van így? Ki tudja, teljesen értelmetlen szabály az IE-ben de meg kell tanulnunk vele élni ezért ilyen esetekben, ha valaki nagyon sok CSS-el akar dolgozni ajánljuk 30-as blokkok létrehozatalát vagyis a következő struktúrában felépíteni a CSS rendszert:

I.fő css (default.css), includolva a következő szintek
1.al css (elso30.css), includeolva 30 modul css-e
2.al css (masodik30.css), includeolva 30 modul css-e

És így tovább. Ezzel tehát bedaraboltuk a CSS-eket elegánsan és egyszerű módszerrel. Természetesen sokkal szebb lenne a sima include, de ha egyszer a Microsoft nem volt képes értelmesen lekezelni a problémát, nekünk fejlesztőknek kell kitalálni új megoldásokat.

IE, a 32-es CSSapdája

#totalstudio