Muke po browserima - osnove hackiranja

Jedno od najčešćih pitanja što ih dobivam jest "Zašto mi $%&# ne prikazuje ovo, a u ?#$%& je sve u redu?" To što se uopće netko zapitao zašto jest dobar znak - znači da ljudi shvaćaju da postoje i drugi browseri osim Internet Explorera i voljeli bi svim posjetiteljima udovoljiti. Takva svjesnost nam je potrebna, jer ne uzimajući u obzir druge brandove, potpomažemo monopol. Svi znamo što nam monopol donosi (T-com anyone?) - visoke cijene, loša podrška... Tržišno natjecanje prisiljava proizvođače da se trude poboljšati svoje proizvode. Dakle, da biste napraviti mali korak u poboljšanju vlastite pozicije kao krajnjeg korisnika, počnite podržavati i ostale proizvođače.

Kako izbjeći greške?

Uh, ovo je teško pitanje. Imam 3-4 godine iskustva i još uvijek mi ponekad problemi s browserima zadaju muke. Ne mogu precizno odgovoriti. Jedini pravi odgovor bio bi: testirajte. Ne možete biti sigurni da nešto radi ako to ne vidite svojim očima, koliko god vam se činilo logično da mora raditi. Zar nije ružan osjećaj kada vam netko ostavi poruku "U tom-i-tom-browseru ti se ne vidi ..."? Dakle, prva stvar: ako imate priliku (brzu vezu) downloadajte instalacije nekoliko poznatih borwsera:

• Microsoft Internet Explorer - samo za Windows
• Opera
• Mozilla Firefox
• Netscape - samo za Windows
• Safari - samo za Mac OS
• Camino - samo za Mac OS
• Omniweb - samo za Mac OS

Dakako, postoji i browser za Linux, Konqueror, ali pošto on dolazi sa K Desktop Environmentom, svaki Linux korisnik ga već ima i nemoguće ga je zasebno instalirati.

Okej, sad imate sve browsere koje možete vrtiti na svojem računalu. Ako nemate, poslužiti će vam Browsershots, korisna skripta koja prikazuje screenshot vaše stranice na raznim konfiguracijama računala i u raznim browserima. Nažalost, ne možete vidjeti kako se stranica ponaša dok scrollate, klikćete na linkove... što je veliki minus.

Resetirajte "browser defaults"

Browser defaults su vrijednosti koje browser pretpostavlja ukoliko ih niste naveli. Na primjer, svi browseri dodaju margine na body i liste, padding na ćelije tablica, border na sliku ako je ta slika link, dok neki browseri (Opera, npr.) dodaju border na sve slike. Evo linije koju možete navesti na početak svog CSS-a, a potom postavljati margine, padding i bordere točno kako vama odgovara:

Kako ispraviti greške?

Prvi i najvažniji savjet koji vam mogu dati jest: potrudite se da vam stranica izgleda prije svega dobro u jednom od tzv. standard-compliant browsera (Firefox, Opera, Netscape), jer je velika mogućnost da će izgledati identično u sva tri, a potom i u onima za Mac. Opera i Safari ponekad imaju svoje načine, ali uglavnom funkcioniraju prema W3C specifikacijama. Internet Explorer je ovdje iznimka, jer Microsoft forsira neke vlastite standarde. No, zahvaljujući nekim hackovima moguće je definirati posebna pravila za IE. Napominjem da za ovo trebate dobro poznavati CSS - ako ne znate, molim vas nemojte postavljati pitanja jer ovo nije tema za početnike.

Hack * html

Da bi neki kod vidio samo IE (ostali browseri ga ignoriraju), potrebno je ispred selectora u CSS-u (body, .kalendar, .post, #naslov ...) upisati * html - evo primjera kako:

IE će najprije prihvatiti marginu od 300px, a zatim je promijeniti u 150px.
Negativna strana ovog hacka jest da ne prolazi na validatoru.

!important

Kao što sam rekla, IE6 malo kasni za standardima, pa mu !important ništa ne znači. Evo kako to možemo iskoristiti:

Noviji browseri dobiju instrukciju da je pravilo označeno sa !important važnije od svih drugih koji mu konkuriraju. IE prihvati drugo pravilo (jer je napisano kasnije, pa je dakle novije), a ostali ga ignoriraju jer je manje važno.

Kondicionalni komentari: <!--[if IE]>

Jedina stvar za koju sam iskreno pomislila "Kad bi bar i drugi browseri to imali..!" - ovo je najbolji način kako ne "zaprljati" svoj stylesheet hackiranjem. Jednostavno napišete ono što želite da IE vidi, a drugi ne! Ovo bi trebali uključiti ispod < /style > taga koji inače imate u HTML kodu:

Dakle, svi browseri će vidjeti vaš normalan stylesheet, ali samo IE će "shvatiti" da u ovim komentarima nešto piše - svi ostali će to prepoznati kao običan komentar, i ignorirati ga. Sve što napišete između (JavaScript, neki tekst...) bit će prikazano u IE, a drugdje neće.

Maratz ima zamljiv članak gdje detaljno objašnjava upotrebu kondicionalnih komentara: Essentials of CSS Hacking For Internet Explorer.

Je li vam ovo dovoljno? Čisto sumnjam :) Da biste saznali više o bugovima browsera i njihovom zaobilaženju, svakako posjetite Position Is Everything, posebno obratite pažnju na Explorer Exposed!, Opera Omnibus te Open Source Oopsies.

DOCTYPE?

Hvala Prokletom što me podsjetio na ovo. Inače, planirala sam posvetiti poseban post DOCTYPE-u, ali sam smetnula s uma pa će pričekati neku drugu priliku. Do tada, svakako pročitajte ovaj poučan članak, a ako želite znati više naučite i kako različiti browseri prihvaćaju koji DOCTYPE.