Tech techline.hu 2007. november. 16. 15:00

Böngészőfüggetlen CSS

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.


Hirdetés
hvg360 Ligeti Nagy Tamás 2025. január. 05. 19:30

"Nem csak egy eszköz, hanem ügynök" – Harari elmagyarázza, miért veszélyesebb a mesterséges intelligencia az atombombánál is

Miután az ember lassan beletörődik a múlt megváltoztathatatlanságába, és a jelenben nem igazán érzi jól magát, úgy döntött: a jövőt megtartja magának. Yuval Noah Harari izraeli történész új okoskönyvében az információs hálózatok fejlődését vizsgálva arra jut, lehet, hogy az emberiség történetét Valaki Más írja.