Pre 10-ak godina skoro svaki sajt je u footeru imao sličnu rečenicu: “Ovaj sajt je optimizovan za IE6 i Mozzila Firefox”. To je bilo dovoljno. Bar 80% posetioca je posedovalo jedan od ova dva popularna browsera. Danas je situacija drugačija. Firefox već nekoliko godina koristi preko 40% korisnika interneta ali pored Firefox-a u upotrebi su bar 3 verzije Internet Explorer-a, Google Chrome, Safari, Opera… Situacija je u martu 2010 izgleda otprilike ovako:

• Firefox: 46,2 %
• IE8: 15,3 %
• Chrome: 12,3 %
• IE7: 10,7 %
• IE6: 8,9 %
• Safari: 3,7 %
• Opera: 2,2 %

Podaci koje sam izneo su preuzeti sa W3School.com a detaljnu statistiku možete pratiti i na Wikipedia, W3Counter, i drugim mestima…

Sa dizajnerske strane ovo predstavlja veliki problem. Optimizacija za razne browsere je jako važna.

Pre nekoliko godina sam na svom računaru imao instalirano po nekoliko najpopularnijih browsera i po nekoliko verzija Internet Explorer-a. Danas na raspolaganju postoji nekoliko alata i tehnika da se postigne sličan rezultat.

CSS

Prva stvar koju možete da uradite je da “resetujete” svoj CSS. To možete da izvedete na sledeći način:

html, body, div, span, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, a, address, font, img, strong, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

}

Postoji još nekoliko tehnika da resetujete svoj CSS ali i ovo je dovoljno za početak.

HTML i CSS Validacija

Pored toga, veoma je važno da svoj dizajn validirate pošto se u većini slučajeva provuku sitne greške koje Vam kasnije stvaraju probleme, zavisno od browsera do browsera. Svoj HTML možete validirati na adresi: http://validator.w3.org/ a CSS na adresi: http://jigsaw.w3.org/css-validator/.

Detekcija browser-a

Još jedna od tehnika koju možete koristiti je da na osnovu korisnikovog browsera učitate poseban CSS sa podrškom za taj browser. Ovo možete uraditi na dva načina. Prvi način je da u svoj index fajl dodate sledeći uslov:

<!–[if IE]>

<link href=”ie.css” rel=”stylesheet” type=”text/css” />

<![endif]–>

Na ovaj način ste za Internet Explorer učitali dodatni CSS fajl. Pored toga, možete i detaljno odrediti korisnikov operativni sistem, rezoluciju, browser, JavaScript podršku… Postoji dosta “browser detect” klasa a jedan od najboljih primera koje sam video su napravili Dragan Dinić i Goran Pilipović.

Browser podrška

Na kraju, da bi ste pratili rezultate, danas ne morate imati instalirane sve popularne browser-e. Postoji nekoliko online alata za detekciju podrške na raznim browserima a neki od najpopularnijih su: Adobe BrowserLab, BrowserShots, BrowserSandBox…

Be Sociable, Share!

•