Ne mogu da kažem da sam se dovoljno bavio web sajtovima da bih bio HTML/CSS ekspert, iako to traje već nekoliko godina. Ali, ono što mogu da kažem jeste da sam se tokom tih nekoliko godina susreo sa previše problema, odnosno bagova. A ko drugi da bude kriv za to nego Internet Explorer.

Kada sam tek počinjao da se bavim ovim, XP je bio aktuelni Windows, i zajedno sa njim šesta verzija Internet Explorera. Otelotvorenje samoga đavola (ili Đavola?). Koliko god ja taj pretraživač želeo da potisnem, ostaje činjenica da se on i dalje koristi, kod nas verovatno i više nego u svetu, baš zbog te rasprostranjenosti Windowsa XP, pa zbog toga ne smem da ga zanemarim tokom razvoja nekog sajta.

Ovaj moj blog nije nikakav izuzetak. Proveo sam nekoliko nedelja radeći na HTML i CSS kôdu, pritom proveravajući njegov izgled samo u Firefoxu, pošto mi na Linuxu Internet Explorer i nije dostupan. Poučen pređašnjim iskustvom, znao sam na šta da obratim pažnju da ne bih posle morao da se patim ispravljajući greške, kao što sam znao da će sajt sigurno u redu izgledati u Operi, Chromu i Safariju ako ga sredim u Firefoxu.

I kao što sam znao da u Internet Exploreru neće. Pri samom kraju “dizajniranja” (ne smatram se dizajnerom, jer ni nemam oko za to) digao sam XP u virtuelnoj mašini, instalirao sve pretraživače, otvorio IE6, i… Pokušao da shvatim zašto se delovi teksta nalaze na najnelogičnijim mogućim mestima.

Bolje sprečiti nego lečiti – znaju ljudi znanje. Svaki put kada sam naleteo na neki novi bag, trebalo mi je vremena da ga u potpunosti ispitam, shvatim (ako je uopšte moguće shvatiti ga) i primenim rešenje. Zato se trudim da najčešće bagove čuvam u glavi, i da ih automatski izbegavam – a njih objašnjava sledeća lista. Uglavnom su u pitanju problemi koje pravi IE6, ali tu i tamo zaluta i neki drugi pretraživač.

Quirks mode

Za početak, nekoliko reči o tzv. Quirks mode-u, odnosno načinu na koji pretraživači renderuju neke stranice.

Danas se, kada je u pitanju web razvoj, dosta priča o W3C standardima i njihovom poštovanju, ali ranije nije bilo tako. Pretraživači su prikazivali stranice na najrazličitije načine, pa su programeri isto tako kodirali na najrazličitije načine. Iako standardi više nisu misaona imenica, mnogi sajtovi i dalje imaju loš kôd, pa je u pretraživačima obezbeđena mogućnost da se i te stranice prikazuju onako kako treba, tako što je pretraživač renderuje u Quirks (tj. Compatibility) modu.

Quirks mode se aktivira ukoliko DOCTYPE na početku stranice nije validan, ali u Internet Exploreru 6 i ako bilo kakav tekst postoji pre DOCTYPE-a (dakle, izbegavati <xml> tag). Na Wikipediji postoji odlična tabela koja se bavi ovom problematikom.

Ne postoji razlog zašto bi iko hteo namerno da ga aktivira. Slučajno? Može se desiti… Ovaj JavaScript kôd proverava kako je pretraživač renderovao stranicu:

window.alert(document.compatMode);

Pretraživač treba da ispiše CSS1Compat, a ne BackCompat.

Sledeća dva problema su specifična za Quirks mode Internet Explorera.

Veličina elemenata (Box model bug)

Svaki element na stranici je predstavljen kao pravougaonik koji se sastoji iz nekoliko slojeva – u centru se nalazi sadržaj, oko njega padding, oko njega border (ivica elementa), i nakon toga margin. Po standardu, kada se definiše width nekog elementa, to se odnosi samo na sadržaj, dok se sve ostalo dodaje spolja. Internet Explorer u Quirks modu, naravno, ipak razmišlja na svoj način, pa u širinu elementa računa sve osim margine. Posledica? Elementi u IEu će biti manje širine i visine.

Rešenje? Izbegavati Quirks mode. Ako to nije opcija, rešenje koje sam ja uvek koristio jeste da element koji ima padding i border podelim na dva – spoljnom elementu dodelim dimenzije i marginu, a unutrašnji pustim da automatski popuni spoljašnji deklarišući samo padding i border. Ovo rešenje zahteva malo više kôda, ali ne uključuje kondicionalne komentare, JavaScript i slične tehnike koje ne volim da koristim pri rešavanju problema ovog tipa.

Centriranje strane

Sledeći čest problem jeste centriranje stranice. Regularan način da se to obavi bio bi korišćenjem margin: 0 auto, što nekom elementu poznate širine automatski određuje levu i desnu marginu i na taj način ga centrirajući. IE na ovo ne reaguje, pa će sadržaj biti zalepljen za levu ivicu pretraživača.

Ono na šta IE reaguje jeste text-align: center u roditeljskom elementu. Dakle, za centriranje cele strane CSS bi izgledao ovako:

body {
    text-align: center;
}

/* Sadrzaj */
#wrapper {
    width: 900px;
    margin: 0 auto;
    text-align: left; /* Da tekst ne bi nasledio "centriranost" iz body-ja */
}

Dvostruka margina (Double margin bug)

Elementi koji imaju definisan float (left ili right, nije bitno) i marginu sa odgovarajuće strane biće duplo više udaljeni od ivice nego što bi trebalo. Ako je leva margina 100px, u IEu će element biti udaljen 200px. Poreklo ovoga nije baš najjasnije, ali je rešenje veoma jednostavno – potrebno je za taj element dodati i svojstvo display: inline. Pritom, ovo ni u jednom pretraživaču neće izazvati probleme, jer float automatski postavlja display na block, pa ova linija kôda zapravo ništa ne menja, osim što eliminiše bag u IEu.

Praznina kod liste sa linkovima (Whitespace bug)

Linkovi sa desne strane ovog teksta su formirani na sledeći način:

<ul id="cats">
	<li class="cat-item cat-item-9">...</li>
	<li class="cat-item cat-item-7">...</li>
	<li class="cat-item cat-item-5">...</li>
</ul>
IE whitespace bug
Previše prostora

Uredno, kao što se uvek i trudim da bude. Dodajte još i CSS na ovo, i imate lepe linkove… Osim u Internet Exploreru, koji će, pošto u HTMLu ima razmaka između elemenata liste renderovati dodatni prostor koji ne bi trebalo da je tu. Opet, ima više rešenja, a ja sam se odlučio za “najsirovije”, a to je uklanjanje razmaka. S obzirom da moj kôd generiše skripta, lako sam to učinio upotrebom preg_replace.

Ostala rešenja jesu jednostavnija, ali donose sa sobom promenu izgleda sajta. Dodavanje border-bottom u boji pozadine ostavlja 1px prostora, float:left ne dozvoljava linkovima da se prošire preko cele liste (što se može rešiti eksplicitnim određivanjem dimenzija) – jedino display:inline primenjeno na <li> ne bi trebalo da utiče.

Providne slike (PNG transparency)

PNG Transparency
(Ne)providni pikseli

JPG slike ne podržavaju providne piksele. GIF slike podržavaju providne piksele, ali samo ako su u potpunosti providni. PNG slike podržavaju delimično providne piksele. A IE6 ne podržava takav PNG.

Na dnu ove strane imam linkove ka raznim sajtovima koje koristim, i uz njih PNG ikonice (slika levo). IE6 ne može da prikaže te ikonice kako treba (na dnu strane je sada ispravljena verzija), baš zbog problema sa providnošću. Za ovo postoje dva rešenja, od kojih se ja uglavnom trudim da koristim drugo.

Prvo rešenje je korišćenje nestandardnog CSS atributa filter koji je Microsoft uveo, pa samim tim može da izazove probleme u drugim pretraživačima. Drugo rešenje jeste jednostavno pretvaranje slika u GIF ili JPG, ali ovo funkcioniše samo ako pozadina sajta može da se ugradi u samu sliku, i da se time izbegne potreba za providnim pikselima. U mom slučaju, ovo je moglo da se uradi, ali to sigurno neće uvek biti izvodljivo.

Block linkovi

Ukoliko ne želim da mi linkovi budu čisto tekstualni, već da više podsećaju na dugme (kao navigacija na vrhu ove strane), koristiću display: block na <a> elementu. Kada se postavi miš iznad bilo kog dela pravougaonika, moći će da se klikne na link i on će preći u hover stanje. U IEu će se ovo desiti samo ako se miš nalazi tačno iznad teksta, koliki god sâm link zapravo bio. Ovo se može srediti podešavanjem fiksne širine i visine za taj anchor element, ili se može posmatrati kao minorna smetnja, a ne bag.

Prostor ispod slika

Prostor ispod slike
Posledica display:inline

Na strani sa fotografijama slike sam organizovao kao linkove ka odgovarajućim stranicam na Flickru, i to tako što sam <img> element okružio <a> elementom koji je imao display: block. Sve je bilo lepo podešeno i simetrično, ali je margina ispod slike bila nešto veća nego margina iznad slike.

Ovo se događa zato što je img inline element, pa mu pretraživač daje malo više prostora zbog kuka i kvaka u tekstu, odnosno kod slova “g”, “q”, “j” i sl. Rešenje je dodeljivanje display: block atributa img elementu.

Za razliku od ostalih bagova, ovo zapravo nije bag, već očekivano ponašanje, pa se kao takvo javlja i u Firefoxu. Ova stranica je dobro štivo sa nekoliko različitih primera.

Minimalna visina (Min-height bug)

Još jedan atribut koji IE6 ne podržava jeste min-height. Ja ga lično nisam nikada koristio, jer nisam imao potrebu, ali pošto je rešenje jednostavno, zašto da ga ne pomenem?

.element {
    min-height: 500px;
    height: auto !important;
    height: 500px;
}

Dupli tekst (Ghost text bug)

I za kraj, najčudniji IE bag na koji sam ikada naleteo. Strana sa fotografijama je opet ta koja pravi problem, ali ovaj put ne slike već običan tekst, odnosno linkovi ka kategorijama. Trenutno postoji deset kategorija raspoređenih u dve kolone od po pet, ali IE6 prikazuje… Jedanaest kategorija? It gets better… Pogledajte sliku da biste videli šta se dešava kada stavim miš iznad prvog linka:

Ghost text
Tekst koji nestaje s vremena na vreme

Kao što možete videti, iako krajnje neobičan, ovaj problem se javlja kod mnogih, i uglavnom je izazvan komentarima između floatovanih elemenata. U mom kôdu komentara nema, tako da to očigledno nije uzrok u mom slučaju. Ova stranica prikazuje nekoliko rešenja nezavisno od toga šta je izazvalo problem.

Dakle, problem je poznat, ali ja rešenje koje bi kod mene funkcionisalo još uvek nisam uspeo da nađem.