CSS/Häkid

@import hack

Väga vanad brauserid nagu näiteks Netscape 4 ja IE4, mis mõistavad CSS-i vaid äärmiselt piiratud määral võivad näidata lehekülge liialt valesti. Kasutades stiililehe HTML-iga sidumiseks '<link>' asemel '@import' käsku saame peita NS4 eest kõik või enamiku stiile.

<link rel="stylesheet" type="text/css" href="lihtne.css" />
<style type="text/css"> @import "keerukas.css"; </style>

Toodud näite puhul, leiavad vanad IE4 ja NS4 üles vaid faili 'lihtne.css', keerukamaid stiilimääranguid sisaldav 'keerukas.css' on kättesaadav vaid targematele brauseritele, mis @import käsku mõistavad.

Selliselt imporditud stiililehtedele võib mugavalt määrata ka meedia:

<style type="text/css" media="print"> @import "print.css"; </style>

media="all"

Netscape 4 eest (ent arvatavasti mitte IE4 eest) saab stiililehed peita määrates meediaks 'all:

<link rel="stylesheet" type="text/css" href="stiilid.css" media="all" />

IE Box-model hack

IE5 (ka IE6, kui korralik doctype pole määratud) tõlgendab CSS-i box-model'it valesti. Reeglite järgi on nii, et mingi bloki laius koos tema serve, polstri ja veerisega võrdub:

• margin + border + padding + width + padding + border + margin

IE5 aga tõlgendab seda asja valesti ning tema arvates peab kogu sellise bloki laius olema:

• margin + width + margin

Sisu laius, mis peaks olema määratud width-atribuudiga on IE5-s aga:

• width - 2 x padding - 2 x border

Õnneks saab sellest veast jagu sellise häkiga:

Olgu meil alguses selline korralikus brauseris töötav css: Kood:

div { 
  margin: 30px;
  border: 5px;
  padding: 45px;
  width:300px;
}

Standardeid arvestav brauseris on siinkohal sisu laius 300px ning kogu krempli laius:

• 30 + 5 + 45 + 300 + 45 + 5 + 30 = 460

IE5 aga arvutab sisu laiuse:

• 300 - 5 - 5 - 45 - 45 = 200

ning kogu asja laiuse:

• 30 + 300 + 30 = 360

Kui me tahaksime muuta asja sobivaks IE5-le, siis me peaksime suurendama width atribuuti borderite ja paddingute paksuse võrra, seega:

• 5 + 45 + 300 + 45 + 5 = 400.

Et nüüd asi ka teistes brauserites töötaks, siis kirjutame nõnda:

div { 
  margin: 30px;
  border: 5px;
  padding: 45px;
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

Siin näites on alguses kõik nii nagu IE5-le sobiv, aga siis järgneb voice-family parameeter mille järel olevast escape'itud jutumärgist '\"' IE5 aru ei saa ning näeb deklaratsiooni lõppu '}' ning lõpetab siinkohal selle deklaratsiooni läbimise. Ülejäänud brauserid aga mõistavad, et see '\"' pole mitte stringi lõpp vaid stringis sisalduv sümbol '"' ning jätkavad. Järgnev voice-family: inherit; seab selle parameetri taas vaikimisi olekusse ning seejärel olev width: 300px; ütleb teistele brauseritele, et tegelikult pole laius mitte 400px vaid hoopis 300px.

IE Star Hack

IE versioonid < 7 arvavad, et element html on veel mingi elemendi sees. Seda viga on võimalik ära kasutada selleks, et määrata spetsiaalselt IE6 ja vanemate jaoks erinevaid stiile.

p {color:green}
* html p {color:red}

Toodud koodi puhul näitab IE6 tekstilõike punasena, ülejäänud brauserid (sh IE7) aga rohelisena.

Viited

• CSSHack - css-discuss wiki
• Box Model Hack Tantek Çelik
• Keep CSS Simple Peter-Paul Koch

Raamat: CSS

<< Pildiasendustehnikad

Menüüde ehitamine >>

Sisukord