Böngészőfüggő CSS – feltételek segítségével

Honlapkészítés közben néha jól jön, ha az egyes böngészők különböző szabványértelmezése miatt egyes CSS részleteket, kódokat böngészőhöz kötve tudunk definiálni. Az Internet Explorer-hez kapcsolódóan a megoldást gondolom már sokan ismerik, viszont csak nemrég láttam a weblabor.hu egyik topicjában, hogy ilyen lehetőség az Opera-hoz kapcsolódóan is létezik.
A megoldást/linket mrc-nek köszönhetjük.

Tehát nézzünk egy olyan példát, ahol ugyanaz a tartalom másképp fog kinézni Firefox, Internet Explorer és Opera alatt.

IE-hez a már ismert megoldást lehet használni

1
2
3
4
5
6
7

<!--[if IE 6]>
<style type="text/css">
  .box1 { background-color: red; }
  .box2 { background-color: pink; }
  .box3 { background-color: magenta; }
</style>
<![endif]-->

Ehhez kiegészítésképpen még nézzünk pár példát:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!--[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]-->

Egy nagyon egyszerű és mondhatjuk hogy elterjedt felhasználási módja ennek megoldásnak, amikor a honlap head részébe az alábbi kódrészletet szúrjuk be:

1
2
3

<link rel="stylesheet" href="/css/honlapod.css" type="text/css" media="all" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/honlapod-ie6.css" media="all"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/css/honlapod-ie7.css" media="all"><![endif]-->

Ekkor minden böngésző alatt először betöltődik a honlapod.css fájl. Az IE6 böngésző viszont betölti még a honlapod-ie6.css fájlt is, illetve az IE7 a honlapod-ie7.css fájlt. Mivel ezek a honlapod.css után jöttek a kódban, a tartalmuk felülbírálja a honlapod.css tartalmát.

lt: kisebb mint (less-than)
lte: kisebb vagy egyenlő mint (less-than or equal)
gt: nagyobb mint (greater-than)
gte: nagyobb vagy egyenlo mint (greater-than or equal)

Erről még részletesebben a microsoft.com “About Conditional Comments” lapján olvashatsz.

Opera-hoz (a 9.01-hez biztosan) viszont az alábbi megoldás fog működni

1
2
3
4
5

<style type="text/opera;charset=utf-8">
  .box1 { background-color: lime; }
  .box2 { background-color: black; }
  .box3 { background-color: aqua; }
</style>

Firefox meg ugye értelmezi a feltételek nélküli CSS kódot, így elértük, hogy mindhárom böngésző alatt másképp lehet formázni ugyanazt a tartalmat.

mrc honlapja: mrc.graffiti.hu/
A weblabor.hu kapcsolódó topic

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

12 HOZZÁSZÓLÁS

  1. Tisztelt Olvasó!

    Ezt az oldalt is azért kerestem a Google-al, mert el szeretném legalább közepes szinten sajátítani a CSS-t. Nem akarok guru lenni.
    Már az sincs rendben hogz az MS a különböző verziójú IE bonkészőiben tesz a W3 ajánlásokra, de hogy a CSS sem böngészőfüggetlen, már meglepett és felháborított.
    Mintha az MS elégedne meg azzal hogy (szinte) monopol-helyzete van több területen, szabvánokat is szeretne alkotni. Lásd még Java.

    Szar az egész.

    Zoli

  2. Üdv!

    Az operás trükk a 9.50-es verziónál nem működik! A fejlécbe belinkeltem a css-t, utána meg beírtam a fentebbi formában a felülbírálást, de semmi (pedig még !important-oltam is a változást!)…

  3. Operára fejleszteni egy oldalt olyan, mint Trabant-ba tervezni új motort: értelmetlen. Kevesen használják és a legegyszerűbb formázási parancsokat is másképp értelmezi, mint a többi böngésző. FireFox-ra és Internet Explorer-re fejlesztek már csak oldalt. Előbbire azért, mert van értelme, utóbbira azért, mert szükséges (sajnos sokan használják)… De Opera? Áhhh… Egyébként jó böngésző, sok előnye van, csak azt nem látom át, hogy néha egy egyszerű táblázat (!!!) miért jelenik meg másképp benne, mint a többi böngészőben…

  4. helo! nem tudtok ilyen megoldást google chrome-ra? – bár szinte mindent ugyanúgy kezel mint a firefox, de egy-két dologban nagyon nagy az eltérés Pl: a függőleges pozicionálásban.

  5. Nem láttam még, de ha belefutsz, írd ide is légyszives, mert biztos másnak is lett volna már rá szüksége.

  8. ugy látom hogy az oldalad az IE a javascript miatt nem jelenik meg, a 24.ik sort hibásnak jelez , ezt – ” allit.style.height=magassag.clientHeight-258; “

  10. Chrom-hoz egy megoldás:

    1
2
3
4
5
6
7
8
9
10

    body {
       background-color: #FFF; /*Firefox*/
       [background-color:black; /*---------*/
       background-color:black;] /*Google Chrome*/
}
#test1 {
color:black; /*Firefox*/
[color:yellow; /*---------*/
color:yellow;] /*Google Chrome*/
}

    Nálam működik, de hogy miért, azt nem tudom… és amúgy se egy szép kódsor… de neten belefutottam, gondoltam megosztom veletek!

  11. Én operára csinálok minden weboldalt.Abból egy nagyon minimális átalakitás és ugyan úgy néz ki Firefox,Google chrome,safari ,böngészők alatt is. Az IE nem érdekel az az ördög böngészője:D

  12. Hát ez az IE megoldás nekem valamiért nem működik… igaz, hogy 11-essel próbáltam, de gondolom az is csak egy verziószám. Kár, pedig nagyon örültem neki, hogy másnak is van ilyen gondja… más megoldás esetleg? (A konkrét probléma, hogy ie7 alatt széjjelzuhan a céges honoldal, de nagyon, és valamit muszáj rá varázsolni gyorsan.)

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét