Kako da web sajt izgleda isto u različitim brauzerima?
Kategorija: Web dizajn
Delicious
Stumble It!
Različiti brauzeri drugačije čitaju isti HTML i CSS kod, pa je čest slučaj da isti sajt izgleda malo drugačije ili se čak i potpuno raspadne cela postavka kada se pregleda u drugom brauzeru (ovo se u stvari najviše odnosi na Internet Explorer).
Napraviti ili podesiti sajt da se prikazuje isto u različitim web brauzerima često zna da bude značajan deo posla oko izrade sajta. Ipak, ako se ispoštuje nekoliko osnovnih pravila, čitava stvar ne mora da bude toliko problematična.
Pre svega, potrebno je proveriti da li je HTML/CSS kod validan, odnosno napisan u skladu sa web standardima. Zašto je ovo bitno? Može vam se desiti da zaboravite da zatvorite neki div i p ili bilo koji drugi HTML element. Neki brauzeri će vam tolerisati ovu grešku, odnosno neće to čak ni videti kao propust, i pravilno će prikazati element. Drugi će videti to kao grešku, i neće prikazati kako treba. I tako se već dobija različit prikaz sajta u brauzerima.
Zato je važno na početku HTML dokumenta napisati DOCTYPE deklaraciju pomoću koje definišemo koja verzija (X)HTML-a se koristi u dokumentu. Bez te deklaracije, IE ulazi u tzv. Quirks mode i prikazuje stranicu na način na koji bi izgledala u starim brauzerima. Doctype je jedna od ključnih stvari za pravilan prikaz web sajta u različitim brauzerima kao što su Mozilla Firefox, Internet Explorer 6,7 itd.
Postoji nekoliko vrsta Doctype-a, kao na primer XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
kao i Transitional varijanta. Pročitajte više o razlici između Transitional i Strict varijante kao i zašto je bolje koristiti Strict varijantu.
Kad se govori o drugim “brauzerima koji prave probleme”, onda svi naravno misle na Internet Explorer 6, koji još uvek ima veliki udeo među korisnicima (oko 30% u ovom trenutnu) što je isuviše velika cifra da bi se zanemarila, kao i na IE 7, koji ipak mnogo bolje prikazuje web stranicu od svog prethodnika.
Problemi sa Internet Explorerom se veoma elegantno rešavaju pomoću uslovnih komentara (Conditional Comments) koji predstavljaju specijalnu vrstu komentara koju razume samo IE. Pomoću ovih komentara možemo dodeliti posebni css fajl svakoj verziji IE koja nam pravi probleme. Evo kako izgleda kod:
Uslovni komentar za Internet Explorer 6 i prethodne verzije:
<!--[if lte ie 6]>
<style type="text/css" media="screen">
@import "css/ie6.css";
</style>
<![endif]-->
Uslovni komentar za Internet Explorer 7 i naredne verzije:
<!--[if gt ie 6]>
<style type="text/css" media="screen">
@import "css/ie7.css";
</style>
<![endif]-->
Moguće su razne kombinacije. Evo nekoliko primera:
<!--[if ie 6]> samo IE6
<!--[if lte ie 6]> IE6 i prethodne verzije
<!--[if gt ie 6]> veće od IE6, IE7 i buduće verzije
<!--[if ie 7]> samo IE7
itd
A evo i cele liste svih IE uslovnih komentara.
Osim navedenog (validan kod, Doctype deklaracija i uslovni komentari), potrebno je takođe testirati web sajt u različitim brauzerima, još u toku izrade web sajta, kao i na različitim operativnim sistemima i otkloniti uočene nedoslednosti.
U tome veliku pomoć pruža program IE Tester, pomoću koga možete na svom računaru koristiti više verzija Internet Explorera, što inače ne biste mogli, jer se instalacijom nove verzije više ne može koristiti prethodna, kao i web sajt BrowserShots, gde možete pogledati vaš sajt pri različitim kombinacijama operativnih sistema, brauzera i rezolucija ekrana.
Potencijalno povezani tekstovi:
Najkorisniji Firefox dodaci za web dizajnere
Primer različitih web sajtova sa istom pozadinom
Najčešće greške prilikom dizajniranja web sajta
Najpopularniji sistemi za upravljanje sadržajem sajta (CMS)
jQuery tutorijal za apsolutne početnike
Devet stvari koje treba proveriti pre puštanja novog sajta uživo
Komentari
Vojislav Sivčev - 2013-05-31 10:52
Napravli smo sajt kompanije u “FrontPage-u” za “Internet Explorer”. Sajt se korektno vidi u svim verzijama “IE”, do ove zadnje “IE10”, koji ga deformiše. Sem toga i u drugim brauzerima se takođe vidi deformisan. Sajt je na web adresi “www.vorexinzenjering.rs”. Da li možete da nam doradite sajt tako da bude isti u svim brauzerima? Sajt nam mnogo dopada i ne bismo da ga menjamo.
Andrija - 2013-05-31 21:49
I pretpostavljam da biste to platili do 3000 dinara, ako moze i manje? Jer vi ste vec “napravili sajt” veci deo posla je uradjen, sad ga treba samo malo nastelovati da se vidi isto u svim brauzerima!!!
Ocigledno je iz vaseg pitanja da nemate nikakvu ideju o tome sta znaci veb sajt za jednu ozbiljnu firmu danas. Vas sajt jedan od najgorih sajtova koje sam video zadnjih godina. Ja ne bih nikad saradjivao sa “firmom” koja ima takav sajt.
Sajt vam se dopada??? Kome moze da se dopada tako nesto ??? Totalno je nebitno sta se VAMA dopada, vazno je sta se vasim potencijalnim klijentima i poseticima dopada, a ovo sto vi zovete sajt tesko se moze nekome dopasti.
Spremite dakle 300 evra i angazujte nekog ko zna da pravi sajtove, to vam je moj savet.
Komentarisanje zatvoreno.
