Böngészőfüggetlen CSS

A dizájner megtervezi az oldalt, és minden tökéletes. PSD-ként. Amikor viszont szeretnénk kattintható formába önteni, máris gondok támadnak. Vajon miért? Hát persze, hogy az Internet Explorer Firefox harc miatt. Minden nagyon jó, minden nagyon szép, csak épp az IE alatt nem néz ki jól.

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.