Poslednji (?) trzaji šestice

objavljeno 25.4.2010.

Jedan od razloga za opstanak potpuno prevaziđenog pretraživača su upravo nadljudski napori mučenih developera. Sami smo krivi, trebalo je da ga pustimo da umre.

Nema veb dizajnera koji u jednom trenutku nije poželeo da tastaturom razlupa monitor, iščupa svu kosu, zapali kancelariju i ode u budistički manastir kako bi se posvetio traganju za nirvanom, smislom života i ostalim stvarima koje su jednostavnije od cross-browser optimizacije (Optimizacija za sve pretraživače. Eng. across – preko; browser – brauzer, internet pretraživač, pregledavač.).

Dobro poznata situacija – upravo ste završili kodiranje prelepog dizajna i s ponosom testirate svoje čedo. Mozilla Firefox – klik, klik… skrol, klik… aaah, savršeno. Safari - ista priča. Opera, Chrome, Internet Explorer 8… svaki piksel na svom mestu, uživancija! I dok vam misli već lete na to gde i sa kim ćete popiti novac od sveže završenog projekta, stvar zvana Internet Explorer 6 vas iznenađuje prijatno poput teretnog kamiona koji vozi pogrešnom stranom autoputa. Nakazna abominacija koja je prema ovom brauzeru zapravo vaš divni dizajn asocira na neke ne tako divne stvari (frustracije, dodatni sati, radni vikend, nezgodan klijent, probijeni rokovi, projekti na čekanju i slične radosti).

Kako je, dođavola, došlo do ovoga?

Da bi odgovorili na ovo pitanje moramo se vratiti u daleku 2001 godinu. Bližio se kraj leta, Svetski Trgovinski Centar je još uvek postojao ali se isto nije moglo reći za YouTube, Facebook, Firefox i uopšte većinu stvari na koje danas pomislimo kada kažemo INTERNET. Microsoft je tada lansirao svoj najnoviji brauzer – Internet Explorer 6. Čoveče, koliko je šestica je bila fantastična – uspešno je okončala rat brauzera koji se vodio prethodnih 5-6 godina, donela je tonu novih funkcija i, možda najbitnije, neko u Microsoftu se konačno setio da sasluša šta to oni hipici iz W3C konzorcijuma propovedaju. Termin “veb standardi” je počeo da se širi kroz masu.

Svoj vrhunac IE6 dostiže tokom 2003. kada je prema nekim statistikama 85% korisnika interneta upotrebljavalo Internet Explorer a 71% upravo IE6. Od tada šestica polako gubi na popularnosti, ali ni izbliza toliko brzo kao što bi trebalo. Jedan od razloga za neprirodno dug životni vek ovog brauzera je katastrofalno loš prijem Windows Vista operativnog sistema koji je sa sobom nosio novi IE7. Većina ljudi je ostala na dobrom starom XPu i lošoj staroj šestici.

Još 2007. IE6 počinje ozbiljnije da smeta developerima i dizajnerima. Zastareo je, spor, prepun bagova i sigurnosnih rizika. Umesto da se problem reši edukacijom korisnika i jačom promocijom novih brauzera (Firefox, Mozilla, Opera, Safari i IE7 su već postojali tada), problem se rešavao jačim pritiskom na developere da “sve radi svuda”. Kampanjski potez, bilo je samo pitanje vremena kada će nas sve to stići.

I stiglo nas je – 2008. godina je bila najgore pogođena kočenjem IE6ice (lični utisak). CSS2 i različiti JavaScript frameworks-i su odavno prestali da budu novost i veb je procvetao u punom sjaju naprednih sajtova i aplikacija. Zamislite kako bi internet izgledao danas, da se prilikom razvoja tih sajtova 1/4 vremena nije ulagala u podržavanje svih brauzera osim šestice, a 3/4 vremena se bacalo na ispravljanje grešaka u IE6.

Na sreću, 2009. i ‘10. donose neke promene. Sve je raširenija svest o nedostacima veštačkog održavanja šestice u životu. Velika internet imena – Google, YouTube, Facebook obustavljaju podršku. Windows 7 sa svojim Internet Explorerom 8 je naišao na odličan prijem kod publike i dobar deo ljudi koji su ostali na XPu sada prelazi na njega. Bliži se kraj agoniji? Možda… osim ako živite u Srbiji :/ Danas, 9 godina nakon njegovog objavljivanja u svetu i dalje oko 9% korisnika upotrebljava IE6. Situacija na školskim i poslovnim računarima je još gora. Situacija u Srbiji je još gora na kvadrat i sigurno će proći još 2-3 godine pre nego što budemo mogli da potpuno obustavimo podršku za srpske sajtove. Do tada, evo nekoliko stvari koje možemo da preduzmemo.

“Conditional comments”
iliti uslovni komentari su delovi HTML koda koje razume samo Internet Explorer, svi ostali brauzeri na tom mestu vide običan komentar.

Primer:
<!–[if IE]>Koristiš Internet Explorer!<![endif]–>
Rečenica “Koristiš Internet Explorer” će se videti samo u Internet Exploreru. IE će bilo šta u uslovnom komentaru renderovati kao HTML.

Još primera:
<!–[if IE6]>Koristiš Internet Explorer 6!<![endif]–> Radi za sve verzije od 5 naviše
<!–[if lt IE7]>Koristiš Internet Explorer 7 ili noviji!<![endif]–> Definiše početnu verziju
<!–[if !IE6]>Koristiš Internet Explorer koji nije 6!<![endif]–> Pravi izuzetak za određenu verziju

Iako su uslovni komentari potpuno siguran način da se ukroti IE6, veoma su neomiljeni među dizajnerima i developerima. U praksi, njima se pribegava kao apsolutno poslednjem rešenju. Vrlo su vidljivi kada se baci pogled na kod, tako da sav prljav veš dizajnera/developera izlazi u javnost.
Štap i kanap – JavaScript, CSS i ostali bajpasovi

Činjenica je da će se što je dizajn kompleksniji javljati sve više i više problema. Nažalost ne postoji tehnika koja će IE6 naterati da se ponaša u celosti identično kao neki noviji brauzer, ali se za neke pojedinačne greške može pobrinuti različitim hakovima.

- IE6 ne podržava hover stanje na bilo kojem elementu koji nije link. Lek? - JavaScript
- IE6 ne podržava providne PNG slike. Lek? – HTC + JavaScript
- IE6 duplira margine na objektima koji imaju “float” svojstvo. Lek? - CSS hak

(znate bolje rešenje za ove ili neki drugi problem? ostavite komentar)
“Progressive enhancement” iliti postepena poboljšanja
(ako neko ima ideju za bolji prevod…)

Sve rasprostranjenija filozofija među dizajnerima i developerima. Svodi se na to da se ne forsira identični prikaz u svim brauzerima, već po principu “kako je šta podržano”. Npr. jedan isti sajt će na mobilnom telefonu imati samo tekstualni sadržaj i slike, u IE6 će taj sadržaj biti u određenom lejautu sa pozadinskim slikama i sličnim osnovnim dizajnerskim elementima, IE7 i 8 će imati sve prethodno + ”CSS hover” efekte i providne PNG slike a napredniji brauzeri (Chrome, Firefox i sl.) mogu sebi dozvoliti CSS3 senke, zaobljene uglove, nestandardne fontove i ostale vizuelne džidžabidže.

Lično jako podržavam ovu priču. Ovaj sajt konkretno recimo ne prikazuje providne PNG slike u IE6 iako bi mi trebalo samo par redova koda i jedan JavaScript fajl. To je urađeno namerno, nije kraj sveta što će neko sa metuzalem brauzerom videti drugačije par stvari, a ako samo jedna osoba klikne na “Update” dugme zbog mog sajta, vredelo je :)

Prednosti:
- motivisanje ljudi da ažuriraju svoje brauzere
- veća sloboda u dizajniranju
- poenta sajta (sadržaj) je svejedno dostupna svima

Mane:
- klijenti se mršte na ideju da će različiti ljudi videti različite stvari na njihovom sajtu a jako je teško edukovati ih po tom pitanju
- prema Marfijevom zakonu, klijent po pravilu koristi najgori mogući brauzer sa isključenim JavaScriptom, zumiranim tekstom i reklamnim toolbar dodacima koji zauzimaju gornjih 350 piksela ekrana.
IE Tester

Odličan besplatni programčić koji vam omogućava da gledate sajtove u bilo kojoj verziji Internet Explorera od petice do osmice. Vrlo je koristan za otkrivanje eventualnih grešaka. Možete ga skinuti odavde.

Moj mali doprinos

Dok čekamo da šestica potpuno prestane da se koristi uvek možemo da ohrabrujemo korisnike da unapređuju svoje brauzere. Sa tim ciljem sam osmislio jednostavno parče HTMLa koje možete ubaciti u svoj sajt. Prekopirajte ga odmah ispod <body> taga, kako bi stare verzije Internet Explorera na vrhu prikazivale ovo:

Evo i koda:

<!–[if IE 6]><p style=”position:relative; top:0; left:0; width:100%; display:block; font-size:14px; background-color:#FC6; color:#000; font-family:Tahoma, Geneva, sans-serif; text-align:center; border-bottom:2px dashed black”><a style=”padding:15px 0; display:block; color:#000; text-decoration:none” href=”http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx” target=”_blank”>!   WARNING: Your Internet Explorer is outdated and unsecure. Click here to download the update. </a><![endif]–><!–[if IE 7]><p style=”position:relative; top:0; left:0; width:100%; display:block; font-size:14px; background-color:#FC6; color:#000; font-family:Tahoma, Geneva, sans-serif; text-align:center; border-bottom:2px dashed black”><a style=”padding:15px 0; display:block; color:#000; text-decoration:none” href=”http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx” target=”_blank”>!   WARNING: Your Internet Explorer is outdated and unsecure. Click here to download the update. </a><![endif]–>

Za poruku na engleskom jeziku koristite ovo:

Ukratko, kod koristi uslovni komentar koji se aktivira u IE6 i IE7 i direktan CSS sa dosta definisanih parametra kako bi implementacija bila što jednostavnija nezavisno od toga šta ste vi definisali u stilu same strane. Možete koristiti linkovan CSS, modifikovati kod na bilo koji način i koristiti i širiti čitavu stvar po slobodnoj volji.

Budite dobro i ažurirajte brauzere,
Randoman

Komentari

Toki

poslat 27.4.2010. u 8:36 pm

krenuo si! \o/ samo napred!

Ostavi komentar

« Idi u prošlost ∞

Randoman - Graficki i Veb Dizajner iz Beograda