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ó bejegyzések:
  • Egyre ritkábban ugyan, de még előfordul, hogy a HTML elkészítésekor a grafikusnak/designernek (esetleg magunknak :)) hála szeretnénk úgy PNG24-es képeket használ …

  • Létezik egy technika, amivel különböző felbontású eszközökre külön css stílusokat tudunk meghívni. Példa 1200 pixelnél kisebb és nagyobb méretekre:…

  • Bizonyára már a legtöbben felfigyeltek arra, hogy a Microsoft Internet Explorer legutóbbi frissítése során egy új biztonsági funkcióval “gazdagodott” a böngésző …

  • Minden honlaptulajnak lehetősége van egyéni ikont társítani lapjához, mely később a látogatók böngészőjében illetve “kedvenceiben” megjelenik. Hogy egy konkrét p …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

A cikket beküldte: Harder (http://blog.harder.hu)

12 hozzászólás

  1. Horváth Zoltán says:

    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. Pivot says:

    Ü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. eXploRe4ctor says:

    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. NovákRider says:

    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. Harder says:

    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.

  6. Dani says:

    Teláltam egy megoldást google chrome-hoz:

    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
    div
    {
    color: red; /* The text will appear red only in Safari and Google Chrome */
    }
    }

    forrás: http://acidmartin.wordpress.com/2009/07/30/hack-for-safari-and-google-chrome-redux/

  7. gades says:

    Sziasztok! Ezt a kódot hogyan és hová kell be rakni a forráskódba? IE alatt nem akar megjelenni:( http://teniszsalak.freeweb.hu/ Légyszi segítsetek!Köszi!

  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; “

  9. gades says:

    Köszi!És ezt hogy javítsam ki?

  10. zoli93 says:

    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. TrasRed says:

    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.)

Szólj hozzá
a Böngészőfüggő CSS – feltételek segítségével c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>