Keskustelu: Nettisivujen teko: Selaintuki ja css

Kuinkas teette yleensä tuen useammalle selaimelle? Sanotaan vaikka että haluasin tuen selaimille opera, Firefox, IE ja Mac. Tein tuossa taannoin tuen sekä IE:lle että firefoxille käyttämällä tuota !important juttua css koodin perässä. Mutta en saa mitenkään toimimaan sivuja macilla tai operalla oikein. Mitens on, käytättekö jotain "hackeja" vai onko olemassa jokin "oikea" tyyli tehdä sivut jotta ne toimii kaikilla selaimilla ilman "hackeja"

Olen toteuttanut sivun leiskat näin yleensä Diveillä:

<div id="wrap">
<div id="nav">navi tulee tähän</div>
<div id="sisalto">sisältö tulee tähän</div>
</div>

Tauluja on tullut käytettyä divien sisällä kun on ollut tabulaarista dataa.

Tekee sivut standardien mukaisesti ja sit katsoo että millä selaimella kusee. Sit kokeilee voiko saman asian tehdä jotenki toisin ja kuseeko homma vielä. Jos vielä on ongelmia, lähdetään googlettamaan ja yleensä noi hackit eri selainten (lue: Explorerin) vammaisuuksiin löytyy helposti. Osoitteesta http://www.positioniseverything.net/explorer.html kannattaa yleensä lähteä liikkeelle.

Kiitos standardien yleensä minun ei tarvitse varmistaa kuin toimivuus Firefoxilla ja Operalla, sitten conditional commenteilla korjaan IE:n viat. Varmaasti kaikille kokeneemmille muodostuu oma tyylinsä tehdä asioita, joskin toimivimmista ratkaisuista löytyy aina paljon yhteneväisyyksiä sivuntekijöiden välillä.

En muistakaan enää että koska viimeksi olen tehnyt ulkoasun, joka ei toimisi Operalla, Firefoxilla ja Safarilla pitkälti samalla tavoin. Välillä on joitakin yhden rivin korjaustarpeita, esim. Opera tarvitsee joskus ylimääräistä z-indexiä että tajuaa mikä on se päällimmäisin juttu: sellaiset korjaukset eivät kuitenkaan riko toisia selaimia. IE on oikeastaan se ainut jolle tarvitsee jotain massiivisia säätöjä tehdä ja sillä on onneksi olemassa juuri nuo conditional commentit, jolla voi korjaukset laittaa käyttöön sotkematta toisia selaimia.

Yleisimpiä korjauskikkaCSS-koodeja IE:llä, jolla saa haluamiaan lopputuloksia:

/* IE laittaa inline-elementin sisällä olevan block-elementin kaiken saatavilla olevan vapaan tilan levyiseksi; tämä tarjoaa puolittaisen paikan, mutta muitakin säätöjä tarvitsee */
display : inline-block;

/* keskittäminen quirksmodessa (ainoa tapa keskittää IE5:ssä): */
/* elementtiä isännöivään elementtiin (esim. body) */
text-align : center;
/* korjaus itse elementtiin, ettei kaikki teksti ole keskitettyä */
text-align : left;

/* monet IE:n ongelmat johtuvat ns. hasLayout-ongelmasta. Tämä puuttuu joissakin tapauksissa ja aiheuttaa renderöintivikoja. tämä korjaa useimmiten ongelman. itse en ole tätä koskaan vielä tarvinnut. */
zoom : 1;

Muita kikkoja:
- Laita aina DOCTYPE ensimmäiselle riville, niin IE6 ja tuleva IE7 toimivat standarditilassa. Vähentää niille tarvittavien korjausten määrää. Tämä tietty vain jos käytät strict-muotoista DOCTYPE:ä.
- Vältä käyttämästä width ja nollaa suurempia padding- ja/tai border-arvoja samaan elementtiin yhtä aikaa. Vähentää korjaustarpeita quirksmodessa toimivan IE:n kanssa.
- Älä kommentoi CSS:ää. IE6:ssä iskee välillä oudot parsimisviat (korjattu jo IE7:ssä). Näistä johtuvia ongelmia on tosi vaikea bongata ja tajuta mistä ongelma johtuu, vaikka kyseessä on yksinkertainen parsimisvika.

Standardimoodissa IE6:n kanssa on omalla tavallaan helpompi leikkiä. Välillä kuitenkin tulee iskettyä sellaisiin ongelmiin, että niiden syitä on todella vaikea ymmärtää. Tällä hetkellä olen alkanut törmäilemään sellaiseen bugiin, joka muuttaa fontin välillä oletusfontiksi (Times New Roman) joidenkin tiettyjen merkkien jälkeen (esim. piste, pilkku, sulut...). Seuraavassa elementissä fontti on taas oikein. En ole vielä löytänyt silmien eteen sivua, jolla olisi kuvaus tästä bugista.