CSS hackek

2006. június 11.

Avagy mit tegyünk, ha a honlapunk a kedvenc böngészőnkben (a.k.a. Firefox ;)) úgy néz ki, ahogy szeretnénk, de a "nagy kék e" betűben viszont szét van csúszva.

A CSS kód IE elől való elrejtésére több megoldás is született, amiket különböző forrásokból vadásztam össze (meg pár saját ötlet, de biztos nem én vagyok az első, akinek eszébe jutott), gondoltam most akkor egy csokorba gyűjtöm őket. Egyéb ötleteket szivesen fogadok hozzászólás formájában.

Feltételes megjegyzés

Az első változat, amikor a "normális" böngészők elől szeretnénk elrejteni a "kék e" betűnek szánt CSS kódot:

<!--[if IE]>
<style type="text/css">
    /* Ide meg jöhet a CSS kód, pl. valahogy így: */
    @import url(css_hack.css);
</style>
<![endif]-->

Ennek ugye elsődleges előnye, hogy minden nem IE böngésző csak kommentnek látja, az IE viszont végrehajtja, sőt még azt is meg lehet adni neki, hogy melyik IE verzióra szeretnénk végrehajtatni (például: ), így akár minden verzióra írhatunk egy kis CSS hack fájlt, amivel biztosítjuk, hogy a honlap úgy nézzen ki, ahogy mi szeretnénk. Mellesleg a feltételes szerkezet nem csak a részben használható, akár a -ban is megjeleníthetünk vele szép nagy spreadfirefox logókat a kedves IE felhasználók számára.

Egy másik megoldás, amikor az IE elől rejtjük el azt a kódot, amit nem neki szánunk. Pontosabban megírjuk az IE-nek szánt kódot, majd azt egy olyan CSS nyelvi szerkezettel felülbíráljuk, amit a "kék e" nem értékel ki. Ilyenből van egy pár... ;)

!important

Az !important máris egy olyan dolog, amiről nem igazán szándékozik tudomást venni. Vegyünk mindjárt egy példát, hogy jobban lássuk:

#container {
    width: 600px !important;
    width: 560px;
}

Tehát az IE-ben a container ID-vel rendelkező tag szélessége 560 pixel lesz, míg más böngészőkben - amik ismerik és értelmezik az !important módosítót - 600 pixel. Fontos a sorrend, mert az IE nem figyelmen kívül hagyja a 600 pixeles sort, hanem felülbírálja az 560 pixelessel, mivel nem veszi figyelembe, hogy a 600 pixeles a fontosabb (!important).

Tulajdonság kiválasztók

Ez egy másik módja az elrejtésnek. Az előző példa ezzel a módszerrel:

#container {
    width: 560px;
}
[id="container"] {
    width: 600px;
}

Ez talán akkor lehet hasznosabb megoldás, ha egy blokkon belül sok sort kéne !important -tá tenni, és kezd átláthatatlanná válni. Így szépen külön tudjuk választani az IE-nek és a más böngészőknek szánt kódot. A sorrend természetesen itt is fontos, és még van valami amit érdemes megemlíteni: ez a kód az ID tag számára tökéletes, de ha mondjuk az osztálykiválasztót szeretnénk így módosítgatni, akkor ez a kód célravezetőbb:

.container {
    width: 560px;
}
[class~="container"] {
    width: 600px;
}

A kulcs az egyenlőség jel előtti ~, mivel egy tag több osztályba is tartozhat ilyen módon: <a href="index.html" class="menu link">. Így ez az <a> tag a menu és a link osztályba is tartozik.

Gyerek kiválasztók

Ennek már egy kicsit korlátozottabb a használhatósága, mint az előbbieknek. Például egy ehhez hasonló html kód esetén tudjuk hasznát venni:

<div id="container">
    <div id="head"></div>
</div>

A hozzá tartozó CSS kód:

/* IE-nek */
#container #head {
    width: 560px;
}
/* Többi böngészőnek */
#container > #head {
    width: 600px;
}

A két blokk között csak annyi a különbség, hogy az első blokk egy leszármazott kiválasztó (tehát nem feltétlen gyerek, hanem akár későbbi leszármazott is lehet), a második meg a gyerek kiválasztó, amit az IE nem értelmez.

Szomszéd testvér kiválasztók

Hasonló módon használható a szomszéd testvér kiválasztó is, ha éppen az kényelmesebb:

<div id="container">
    <div id="head"></div>
    <div id="foot"></div>
</div>

A hozzá tartozó CSS kód:

/* IE-nek */
#foot {
    width: 560px;
}
/* Többi böngészőnek */
#head + #foot {
    width: 600px;
}

Fontos, hogy ezt a módszert csak a második gyerektől lehet alkalmazni (mindíg az "alsó" (vagy jobb oldali) szomszédra). Az első gyerekre ott van a :first-child ál-osztály, amit szintén lehet használni ilyen "hackekre", mivel az IE nem kezeli.

Univerzális kiválasztó

Az IE 6-os változatának van egy furcsa dolga, miszerint azt hiszi, hogy a tag valamilyen tagen belül van, ezért a * html {} blokk tartalmát alkalmazza. A weblabor egyik bejegyzése szerint ez a módszer már nem fog működni az Internet Explorer 7-es verziójától, de felsorolnak pár alternatívát is. Nézzük tehát a kódot:

/* Többi böngészőnek */
html #head {
    width: 600px;
}
/* IE-nek */
* html #head {
    width: 560px;
}

A sorrend ez esetben fordított, mivel az első blokkot minden böngésző végrehajtja, míg a másodikat csak az IE, vagyis csak abban az esetben íródik felül a width értéke. Mindenesetre, külföldi oldalakon, és a fentebb belinkelt weblabor bejegyzésben is inkább azt ajánlják, hogy a feltételes megjegyzéseket használjuk, mivel ezk azután is működni fognak, hogy egy új IE verziót kiadnak (pontosabban új IE verzió esetén nem kell mást tennünk, mint arra a verzióra is megírni egy külön CSS fájlt).

A felsorolt módszerek közül csak az utolsóra találtam egyértelmű utalást, hogy IE 7-ben már nem lesz használható. Akinek van tudomása, hogy IE 7 alatt mely megoldások fognak továbbra is megfelelően működni, vagy esetleg volt olyan szerencsés, és a beta verzión volt alkalma kipróbálni, hozzászólás formájában megoszthatná velünk is tapasztalatait.

deadlime