Dušan Ječmenica Svi za jednog , jedan za sve" – kompatibilnost browser-a

Internet nije ništa drugo nego jedan veliki dogovor – protokol po kome se šalju i primaju IP paketi, po kome server tačno zna šta treba da isporuči klijentu (browser-u), jednostavno – sve je stvar dogovora. Međutim IT profesionalci oko jednog nikako da se dogovore: da usaglase browser-e tako da identično tumače HTML kôd, i tako smanje muke web dizajnera da dizajn i funkcionalnost sajta podređuju kompatibilnosti.

Prosto je neverovatno da u doba opšte kompatibilnosti, kako softverske (JAVA, XML) tako i hardverske (USB, FireWire, BlueTooth) neko uopšte razmišlja o kompatibilnosti browser-a, koja bi trebalo da se podrazumeva. O čemu se zapravo radi ?

Svaka softverska kompanija pokušava da progura svoju tehnologiju i svoje proizvode na tržište – takav primer možete videti kod PostSript tehnologije koja se koristi u pripremi za štampu, ili recimo TrueType fontovi nasuprot PS fontova.
Kako HTML predstavlja jezik za opis, njegov standard određuje W3 konzorcijum, ali ipak browser-ima ostaje da odluče kako će ga implementirati.

Dežurni krivci

Naravno, kao i uvek kriv je Microsoft, koji posto-poto želi da svoj browser InternetExplorer (u verziji 7.0 se zove MSN Explorer) forsira što je moguće više, (ne treba podsećati na čuveni spor Microsoft-a sa Vladom SAD oko monopola), a u novije vreme .NET tehnologija je upravo prilagođavana za Explorer. Microsoft tvrdi da je njegov browser bolji od ostalih jer osim postovanja W3 konzorcijuma podržava i tzv. "third party tags". To su nestandarni tagovi, koji omogućavaju razne (neprofesionalne) efekte i tako omogućavaju da web dizajner amateri uz pomoć FrontPage-a izrađuju sajtove bez muke, osećajući se kao da rade u MsWord-u. Ali to nije u duhu W3 konzorcijuma, koji koliko-toliko pokušava da zavede neki red na HTML sceni.

Međutim, ništa manja krivica nije ni kompanije Netscape, koja je u ključnom trenutku bitke browser-a prepustila izvorni kod Netscape Navigator-a u ruke open source zajednice, i tako je nastao projekat Mozilla. Ustvari, jedan od osnovnih razloga za takav potez je saznanje da open source zajednica mnogo bolje rešava probleme kompatibilnosti, sigurnosnih rupa i bagova (Linux, PHP ), jer je u tom trenutku Internet Explorer mnogo bolje podržavao JavaScript od Netscape Navigatora, (a Netscape je izmislio JavaScript ! To je sigurno najveći nonsens u istoriji IT industrije). Ali na jedno se zaboravilo: open source zajednica iako perfektno precizna ne mari baš za vreme, pa im se nije žurilo, a IE je za to vreme samo grabio napred. I da se ne lažemo, bio je u to vreme bolji, i dosta okrenut web dizajneru.

A glavna stvar: IE5 je ugrađen u kernel windows-a, i tako prestaje potreba za downloadom ogromnog Netscape-a. I na kraju, u pitanju je veliki novac, bez obzira što su browseri besplatni (izuzev Opere) , jer npr. AOL (Amerika Online) je kupila kompaniju Nescape za citavih 4.2 milijarde dolara. Inače 1996.god., AOL je zadao nizak udarac Netscape-u jer je poržao IE.

Da ovaj članak ne bi počeo da liči na istorijski osvrt, hajde da vidimo šta nam je činiti i kako stvari sada stoje na tržištu browser-a.

Netscape, šta je to?

Prema statistikama Internet Explorer 5.xx koristi oko 48% posetilaca, Internet Explorer 6.xx 43% ,Netscape Navigator 4.xx 3%, ostalo otpada na Operu, Netscape Navigator 6, i ostale browsere. Ovaj odnos važi u zemljama Evropske Unije, pa pretposvaljam da kod nas ovaj odnos može da bude poremećen u korist novijih verzija IE (zbog nelegalnog softvera), a na štetu nekih nepopularnih browser-a (Opera, AOL, NS6 ).

Ko uopšte koristi Netscape? Dve grupe korisnika: oni koji imaju instaliran Linux i zaljubljenici u Netscape. Ni prvih ni drugih nema baš puno, i iskreno govoreći ovi prvi me ne brinu jer uvek imaju alternativu – Opera, koja bukvalno procesira HTML na isti način kao i IE. Sto se zaljubljenika tiče, oni, ako su pravi zaljubljenici, već u svom računaru imaju instaliranu verziju 6 koja takođe veoma dobro podržava propise W3 konzorcijuma, pa čak i neke nestandardne tagove (kao što je IFRAME tag). I eto rešenja problema – pravićemo sajtove za IE 5 i veći i sve je ok :)) Naravno, šalim se, jer ako hoćemo da budemo profesionalci, moramo odgovorno da izrađujemo sajtove, i da budemo sigurni da preko 90% populacije može da vidi naš dizajn na onaj način kako smo zamislili.

Postoje dva pogleda na kompatibilnost, bar što se browser-a tiče: dizajn i funkcionalnost. Naime, nekad ćemo imati problema da svi vide naš dizajn isto (npr mouseover efekat kod NS4.xx ne radi preko CSS-a ali bez obzora na to link i dalje ostaje tu gde jeste, njegova funkcija se ne menja i iako nema mouseover efekta , nimalo se ne gubi na funkcionalnosti – slično je sa fontovima – mogu biti različito prikazani i poremetiti dizajn , ali tekst će u svakom slučaju biti prenešen), a nekad će nastati problem u funkcionalnosti (npr. XML ili recimo tumačenje IFRAME taga).

Hajde sad da malo konkretnije pogledamo gde problemi mogu nastati kod implementacije našeg dizajna kod tri browser-a: IE 5 (i većeg, jer su IE6 i MSN 7 unazad kompatibilni), kod NN4.x i kod NN6 (ova 2 se posmatraju odvojeno pošto je kôd za verziju 6 napisan ispočetka).

Veličina fontova:

IE 5.x i NS6 prikazuju fontove isto (96dpi) dok je problem kod NS4.x, naime on po pravilu prikazuje za jedan broj manje fontove nego ova prethodna dva browser-a. Kako rešiti problem: koristite kaskadne stilove (CSS). Oni imaju samo jednu manu – ne dozvoljavaju da korisnik menja veličinu fonta u browser-u, mada ja to vidim kao prednost jer tako možete "učvrstiti" dizajn. Nekim podverzijama NS i ovo ne pomaže, mada i tu ima rešenja: CSS u saradnji sa JavaScriptom (mada može i neki server side script jezik - PHP, ASP): jednostavno se prepozna sa nekim od ovih jezika koji browser pristupa sajtu i pozove se CSS koji odgovara njemu. (nešto slično se koristi kod sajtova sa skinovima). Ako vam se ove opcije ne sviđaju, ostaje vam samo da izradite sajt tako da promena veličine fonta neće pokvariti vaš dizajn ili bar ga ne značajno ugroziti. (tabele fiksirane širine)

Prikaz XML-a:

XML je još uvek nova tehnologija koja je bazirana na klijentu – ovom slučaju browser-u. Mislim da XML još nije sprman da na takav način uđe u primenu, mada mu se predviđa sjajna budućnost. Bilo kako bilo, imate vrlo malo solucija. Naime IE 5.xx i IE 6.xx vrlo dobro podržavaju XML (Microsoft je izradio sprecijanu tehnologiju za prikaz XML podataka – XSLT), mada mu je podrška kroz CSS relativno slaba. (najviše se oslanja na CSS 2 level). NS 4.xx ne podržava prikaz XML podataka ni na kakav način. NS 6.xx ne podržava XML kroz XSLT tehnologiju, ali ima vrlo dobru implementaciju kroz CSS.
Rešenje problema: Očigledno još nije vreme za XML, osim ako ne planirate njegovo korišćenje u intranet okruženju, pa ipak vam savetujem da razmislite o sigurnom rešenju: server script jezik u saradnji sa odgovarajućom bazom podataka (PHP/MySQL ili ASP/MS Access). Iako je ovo "Pirova pobeda", trenutno predstavlja najsigurnije rešenje.

Pozicioniranje elemenata na strani:

Pozicioniranje objekata uvodi na velika vrata DHTML i CSS čineći ih nezaobilaznim. Međutim bilo bi isuviše idaelano da se problemi odmah nisu pojavili. Naime, NS4.xx ne podržava IFRAME tag, već samo ILAYER koji je uvek APSOLUTNO pozicioniran pa vas to prisliljava da pravite stranice sa tzv. fiksnim dizajnom , najčešče prilagođenu samo za 800x600px. (da bi bili sigurni da će ih i oni koji ga gledaju na 1024x768px videti u sačuvanom odnosu objekata na strani) . Takođe kod NS4.xx dosta elemenata ne može biti dinamički prikazano/sakriveno. Kod IE5.xx (i većeg) situacija je znatno povoljnija: IFRAME i DIV u potpunosti podržani, vidljivost se menja dinamički, dozvoljno je i ugnežđavanje elemenata jedan u drugi, i da pritom nasleđuju vidljivost. Kod NS6 je situacija takođe dobra, jer i on podržava IFRAME kao i DIV, mada ipak treba biti oprezan. Preporučeno rešenje: IFRAME i DIV možemo slobodno koristiti jer samo ga NS4.xx ne podržava, ali ako želimo 100% sigurnst, onda se moramo odreći nešto moćnijeg dizajna i funkcionalnosti i sve poziconirati uz pomoć starih, dobrih tabela. (mada se IFRAME tag koristi u sasvim drugačije i mnogo praktičnije svrhe).

Mouse-over:

Vrlo popularna opcija koju web dizajneri koriste da istaknu interaktivnost i navigaciju unutar sajta. Najčešći oblik mouse-over-a jeste a:hover , znači preko CSS-a. Kao što se vidi, osnosi se na <a> tag i tako doprinosi bržem učitavanju strane jer smanjuje potrebu za rollover slikama, osim, naravno, kada su neophodne jer predstavljaju deo dizajna. Međutim, iako je to najbolje rešenje (kako zbog brzine, tako i zbog kasnijeg održavanja sajta) nije podržano samo u NS4.xx. Naime on podržava samo OnMouse event (koji postaje sve masovniji, ali u kombinaciji sa <td> tagom).
Rešenje problema: iako slike usporavaju učitavanje, najbolje da mouse over radite sa njima, jer ih svi browser-i jednako podržavaju kroz JavaScript. Ako vam se ova opcija ne sviđa, ne ostaje vam ništa drugo nego da ignorišete korisnike NS4.xx, jer iskreno govoreći - iako ne mogu da prikažu rollover sa a:hover stilom, to neće nimalo uticati na dizajn – jednostavno linkovi će biti obični ali bez rollovera što nimalo neće pokvariti funkcionalnost.

Slobodan prostor i razmak između redova u tabelama:

Sigurno ste dosad primetili čudne dodatne razmake koji se prikazuju u različitim browserima iako u samom HTML-u ne postoje. Recimo IE5.xx i NS4.xx dodaju još jedan prazan red posle završnog </form> taga ako se nalazi u tabeli.
Ili recimo, kod ova dva se dešava i sledeće: ako stavite <img> tag unutar <td> taga, ali na ovaj način:

<td bgcolor="#006699"><img src="images/slika.gif" width="195" height="250">
</td>

ispod slike će se nastati dodatni razmak od par piksela, koji vam nekad može "rasturiti" tabelu. Ovo potiče od toga što se završni </td> tag nalazi u novom redu (pa nek' mi neko kaže da u HTML nije bitan raspored samog kôda).

Međutim, ako je kôd napisan na sledeći način:

<td bgcolor="#006699"><img src="images/slika.gif" width="195" height="250"></td>

sve će biti u redu jer je sad završni </td> tag priljubljen uz sami <img> tag – u istom su redu, tj. nema znaka za novi red.

Interesantno da NS6 nema tih problema !

Treba li pomenuti staru boljku NS4.xx koji prikazuje tzv. "gost cells" (duh ćelije) ako ćelijama tabele nema nikavog sadržaja, već služe dizajnu tako što je u njima specificirana boja pozadine, ili pozadinska slika.

Rešenje problema: Trudite se da malo pregledate kôd pošto ga neki WYSIWYG editor (Dreamweaver, FrontPage) izgeneriše i priljubite završni </td> tag uz <img>. Što se "gost cells" problema tiče, njega će te efikasno otkloniti ako budete sigurni da se u ćeliji nalazi bar nešto (što ne mora biti prikazano), a to je jedino "&nbsp;" tj nelomljivi razmak. Međutim šta ako hoćemo da nam visina te ćelije bude recimo 2px? Ako niste znali "&nbsp;" se ponaša isto kao i bilo koje drugo slovo , samo što se ne vidi, pa kako je najmanja veličina slova 8px, ova solucija otpada. Rešenje je u tzv. "spacer image", tj 1x1px transparetnoj gif slici koja će se nalaziti u ćeliji. Sad možete zadati boju pozadine, i dobili ste recimo 2px visoku/široku horizontalnu/vertikalnu liniju.

"Netscape resize fix":

Neke verzije NS4.xx imaju bag koji "rastura dizajn" kada korisnik pokuša da promeni veličinu prozora. Rešenje je da dodate na svaku stranu JavaSript unutar <head> tagova koji to otklanja:

<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>

Ako koristite Dreamweaver ovo možete uraditi sa menija Command – Add/ Remove Netscape Resize Fix...

Na kraju , posle svega iznetog, ostaju vam samo dve mogućnosti: da se potrudite da vaš sajt izgleda isto u što više browser-a, pa makar to bilo i na štetu dizajna, a to znači razmišljanje u tom pravcu od samog početka skiciranja sajta, ili da se jednostavno pravite da svi imaju IE5.xx ili veći :))

Ako želite da pratite standard, onda obavezno posetite www.w3.org

Nadam se da će web dizajnerima/developerima doći bolji dani, pa neće morati da se zamaraju oko ovakvih sitnica, doduše bitnih, već će moći da se okrenu rešavanju konkretnih problema, kao što su dizajn, funkcionalnost i upotrebljivost sajta. Do tada, instalirajte što više browsera na vaš sistem pa proveravajte i doterujete, proveravajte i doterujte, proveravajte i doterujte...

Verzija za štampu