CSS/Häkid
@import hack
[muuda]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"
[muuda]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
[muuda]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
[muuda]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
[muuda]- CSSHack - css-discuss wiki
- Box Model Hack Tantek Çelik
- Keep CSS Simple Peter-Paul Koch