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
Élet+Stílus hvg.hu 2024. november. 30. 10:00

„Elájult, és akkor jött rá, hogy valami nem stimmel” – Kösz, jól: kiégés és stressz a magyar munkahelyeken

<strong>Milyen személyiségjegyek jellemzik a munkamániásokat, és mi lehet az oka, hogy Magyarországon a civil szférában dolgozik a legtöbb munkafüggő</strong>? Mennyire az egyén, és mennyire a munkáltató felelőssége, ha a munkamánia eluralkodik, és függőséggé, kiégéssé válik? <strong>Mi a közös Karácsony Gergelyben és Donald Trumpban?</strong> A Kösz, jól vendége volt Kun Bernadette pszichológus és Merész István, az Allianz-Trade vezetője.