CSS: Bugit 2008-08-02 11:35

Selaimet toistavat toisinaan CSS-muotoiluja eri tavoin. Mitä monimutkaisemmaksi muotoilut käyvät, sitä todennäköisemmäksi käyvät myös erot selaimien tavasta näyttää sivu. Tästä syystä CSS-koodi kannattaa säilyttää mahdollisimman yksinkertaisena. Ongelmiin kannattaa aina etsiä ratkaisuja ensisijaisesti tarkistamalla XHTML:n oikeellisuus, ja normaaleista CSS-määrityksistä (ja tarvittaessa nollata selainten oletusmääritykset), mutta CSS-koodia voidaan kuitenkin osoittaa vain rajatuille selaimille, ja niiden versioille, mutta mikään tapa ei ole täysin ongelmaton.

css browser support

Taulukko selainten tukemista CSS-ominaisuuksista.

CSS-suodattimet

Yksi tapa kohdistaa CSS-muotoiluja vain tietyille selaimille ovat CSS-suodattimet. Ne perustuvat sopivissa kohdissa väärinkirjoitettuun CSS-kieleen, jonka osa selaimista osaa tulkita oikein, osa ei. Näin CSS-bugeja pyritään siis korjaamaan toisen bugin avulla. Ongelmaksi muodostuu se, että tulevien selainten käyttäytymistä näiden ratkaisujen kohdalla on mahdotonta ennakoida. Uusien selainversioiden myötä sivut saattavat toimia täysin odottamattomalla tavalla.

css filters (css hacks)

CSS-suodattimien käyttö koodin kohdistamiseksi eri selaimille.

Internet Explorer 7 breaks commonly used CSS hacks!

Artikkeli hackeistä Internet Explorer 7:n jälkeen.

Internet Explorer

Ehdolliset kommentit

Suodattimia suositeltavampi tapa on käyttää ehdollisia kommentteja oman tyylin tekemiseksi Internet Explorerin niiltä osin kuin se tulkitsee CSS:ää poikkeavalla tavalla. Esimerkiksi kaikille IE-versioille suunnatun tyylitiedoston linkittäminen täydennyksiä varten tehdään sijoittamalla XHTML-dokumentissa varsinaiseen tyylitiedostoon linkittävän rivin alapuolelle seuraava ehdollinen kommentti:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="tyyli_ie.css" />
<![endif]-->

Internet Explorer on kuitenkin ainoa selain joka ehdollisia kommentteja tukee.

Conditional Comments

Ehdolliset kommentit CSS-tyylin osoittamiseksi IE:lle tai sen tietylle versiolle.

Conditional comments of IE

Ehdolliset kommentit CSS-tyylin osoittamiseksi IE:lle tai sen tietylle versiolle.

Ehdolliset kommentit, conditional comments

Ehdolliset kommentit CSS-tyylin osoittamiseksi IE:lle tai sen tietylle versiolle.

About Conditional Comments

Ohje ehdollisista kommenteista Microsoftin sivuilla.

IE8:n IE7-yhteensopivuustila

Mikäli sivusi ovat standardinmukaiset, ja toimivat IE7:ssa, mutta eivät tulevassa IE8:ssa, voit lisätä sivujesi metatietoihin seuraavan rivin, joka näyttää sivut IE8:n IE7-yhteensopivuustilasssa.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Huom! Tämä ei toimi muiden selainversioiden suhteen.

Huom! Tässä oppaassa esitetty linkkipainikeohje ei omissa testeissäni toiminut IE8:n beta-versiossa. Yritän etsiä korjausta, mutta siihen asti IE7-yhteensopivuustila näyttää sivut oikein. Korjattu IE8 RC1:ssä.

The Default Layout Mode

IE8:ssa on muista selaimista poiketen kolme näyttötilaa: Quirks, IE7 Standards, ja IE8 Standards.

IE ja pseudoelementit :before ja :after

Haluttujen elementtien eteen tai jälkeen voidaan automaattisesti lisätä jokin merkki content-ominaisuudella. Haluttu teksti lisätään lainausmerkkeihin. Pseudoelementit :before ja :after eivät kuitenkaan toimi Internet Explorerissa. Siksi kannattaa käyttää mieluummin taustakuvia ominaisuuksien background ja padding avulla.

content ja q-elementti

Tekstinsisäisten lainausten merkkaamiseen käytetty q-elementti lisää merkatun alueen ympärille lainausmerkit. Elementti on kuitenkin huonosti tuettu, eikä esimerkiksi IE lisää lainausmerkkejä automaattisesti. Siksi tekstille kannattaa toistaiseksi lisätä itse lainausmerkit, ja poistaa elementtiä tukevilta selaimilta automaattisesti lisätyt lainausmerkit. Tämä ei ole kuitenkaan tapa jolla q-elementtiä tulisi käyttää.

XHTML-asiakirjassa:

CSS-muotoilu:

q:before, q:after {
	content: "";
}

Fixing Quotes in Internet Explorer

JavaScript-koodi Internet Exploreria varten lainausmerkkien automaattiseksi lisäämiseksi q-elementiksi merkatulle tekstille.

IE-ongelmista

Explorer Exposed!

Internet Explorerin CSS-bugeista.

10 must haves in IE Next

Internet Explorer 7:n puutteista.