CSS hacky ako riešenie problémov s Internet Explorerom

Pridať komentár

CSS hacky ako riešenie problémov s Internet Explorerom

CSS hacky sú často zatracované, pretože pripravujú CSS kód o validitu a čistotu, sú však najjednoduchším riešením, ako sa vyhnúť problémov s nekorektnou interpretáciou CSS a XHTML kódu v Internet Explorer 6, ale bohužiaľ aj v novšej sedmičke.
Predpokladám, že IE6 je nočnou morou každého kodéra, ale vzhľadom na jeho stále veľkú rozšírenosť, nedá sa ignorovať. Jedným z najbežnejších problémov je nesprávna interpretácia paddingu a marginu v kombinácií s fixnou šírkou HTML elementu.

.objekt { width: 200px; padding: 10px }

Pokiaľ má nejaký objekt nastavenú šírku 200px a padding 10px, tak celková zobrazená šírka v korektných prehliadačoch typu Opera / Firefox je 220px (200 šírka + 10 padding vľavo +10 padding vpravo). To isté sa týka aj v prípade nastavenia fixnej výšky. Internet explorer, však padding a margin nezapočítava do celkovej šírky, preto v prípade takéhoto zápisu bude zobrazená šírka v IE6 iba 200px. Čiže 20 pixlov ostáva visieť.

Jedným z riešení je použiť CSS hack, ktorý zabezpečí zobrazenie korektné zobrazenie šírky vo všetkých prehliadačoch. Najznámejším je snáď použitie podtržníka pred CSS atribútom. Zápis, ktorý zabezpečí rovnaké zobrazenie elementu v IE6 ako vo Firefoxe / Opere či IE7 by vyzeralo takto:

.objekt { width: 200px; _width:220px; padding: 10px }

Podtržník zabezpečí, že atribút bude spracovaný IBA Internet Explorerom 6. Ostatné prehliadače ho skrátka ignorujú, pretože je nevalídny. Dôležité je, aby atribút s podtržníkom nasledoval vždy až po štandardnom atribúte, pretože zobrazená je vždy tá hodnota, ktorá bola zapísaná ako posledná.

CSS hacky v Internet Explorer 7

V IE7 je postup s podtržníkom nepoužiteľný, pretože takto zapísaný CSS atribút je ignorovaný. Samozrejme naporúdzi je riešenie tentokrát s hviezdičkou, zápis pre IE7 teda vyzerá takto *cssatribut: hodnota Dobrou správou je, že hacky pre IE7 nie je nutné využívať v takej miere ako pre IE6, pretože napríklad aj bežný problém s interpretáciou šírky a paddingu je v tejto verzii našťastie odstránený. Problémy občas môžu nastať, no väčšinou nie je problém ich vyriešiť aj bez pomoci CSS hackov.

Podmienkové komentáre – špecialitka Ineternet Explorerov

Okrem použitia takýchto priamych hackov, je možné použiť aj podmienkové komentáre, ktoré zabezpečia zobrazenie rôznych CSS súborov pre rôzne prehliadače. Vyžaduje to však viac námahy pri písaní kódu, používam ich nerád. Vyzerajú asi takto:

<!--[if IE 6]>
Kód pre IE6.
<![endif]-->

Okrem takéhoto zápisu je možné využiť aj podmienkové operátory.

Zápis s použitím operátorov môže vyzerať napr. takto:

<!--[if gte IE 6]>
Používate IE vo verzii 6 alebo viac.
<![endif]-->