Szerencsére a böngészőfüggetlenedésre többféle megoldás is...
Szerencsére a böngészőfüggetlenedésre többféle megoldás is létezik.
Ezek:
1. A CSS fájlba írogasd a hekkjeidet.
2. Már a fejlécben lekérdezed a böngészőt, és esetlegesen készítesz egy hekket, amit csak az IE értelmez.
Menjünk sorban végig rajtuk!
1. Felejtsd el :)
2. IE hekk a CSS fájlban
Nem szeretnék mindent felsorolni, csak néhány mintát. Ezekkel könnyedén elkerülhetjük a kényelmetlen helyzeteket. (IE alatt végig IE 6-ot értünk a cikkben!)
Első példa: az aláhúzásos hekk
Tegyük fel, hogy van egy valamilyen osztályú divünk, ami jól néz ki Firefox alatt 10px-es marginnal, de IE alatt az egész elrontotta valahogy magát. Ekkor használjuk az aláhúzásos hekket. A böngészők nem értelmezik az aláhúzással kezdődő tulajdonságot, kivéve az IE.
Figyelem! Mindig az eredeti tulajdonság után tegyük az aláhúzottat.
.vmi{ margin: 10px;_margin: 15px;}
Második példa: a backslash hekk
Nézzük rögtön a mintát!
.vmi { padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;}
Ezzel megadtunk egy 200x200-as dobozt 10px-es paddinggal, amit az IE 5.5 es az IE 6. is helyesen fog értelmezni. Miért volt erre szükség? Az IE a padding értéket hozzáadja a szélességhez, így ha nem vernénk át, akkor IE alatt 220x220-as dobozunk lenne.
Overflow problémák
Az emberek valami megmagyarázhatatlan oknál fogva szeretik a dőlt betűket. Az IE is szereti megnyújtja vízszintesen a befoglaló dobozt. Ha ezzel találkozunk:
.someselector {
overflow-x: hidden;}
Ennyi. Lehet, hogy sikítani fog a validator, hogy a CSS nem valid, de legalább nem csúszik szét a site.
Min-width, max-width IE alatt
A legtöbb böngésző értelmezi a min-width-et, de sajnos az Explorer nem. De mit tegyünk akkor, ha ennek ellenére meg kell határozni a minimum-maximum szélességet ?
Nos, ezt:
#container{min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}
Az első két sor a többi böngészőnek szól. Az utolsó egy rövid javascript utasítás, amelyet az IE is megért.
Feltételek a fejlécben
Ha nem akarunk szenvedni, rondítani a master CSS-ben, hanem azt szeretnénk, hogy az IE bizonyos esetekben külön CSS alapján dolgozzok, akkor feltételekkel megadhatjuk neki, ami jár.
Én ezt a megoldást szeretem, már az átláthatóság végett is.
Lássuk:
<!--[if IE]> Bármilyen IE verzió <![endif]-->
<!--[if IE 5]> IE 5-ös verzió <![endif]-->
<!--[if IE 5.0]> IE 5.0-ás verzió <![endif]-->
<!--[if IE 6]> IE 6-os verzió <![endif]-->
<!--[if IE 7]> IE 7-es verzió <![endif]-->
<!--[if gte IE 5]> IE 5-höz vagy ennél magasabb verzió <![endif]-->
<!--[if lt IE 6]> IE 6-osnál kisebb verzió <![endif]-->
<!--[if lte IE 6]> IE 6-hoz vagy ennél kisebb verzió <![endif]-->
Ennyi. Hát nem egyszerű? Az IE értelmezi a feltételes utasítást, és beolvassa a neki szánt CSS-t, felülírva a master CSS-ben leírtakat.