Tutor.blog

Tutor.Blog je online priručnik na hrvatskom jeziku, za lakše snalaženje u HTML i CSS kodu. Ovdje možete naučiti kako učiniti svoj blog vizualno privlačnim, ali i osnove dizajniranja web stranica koje ne moraju biti nužno vezane uz blog.

Ovaj blog nije povezan sa uredništvom Blog.hr-a, te ne pruža podršku za tehničke probleme.

Besplatni predlošci za blog

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:

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:

* {margin: 0; padding: 0; border: none; text-decoration: none;}

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:

.post {margin-left: 300px;} /* ovo vide svi browseri */
* html .post {margin-left: 150px;} /* ovo vidi samo IE6 i niže verzije */

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:

.post {margin-left: 300px !important;} /* ovo vide svi browseri */
.post {margin-left: 150px;} /* ovo vide svi, ali samo IE6 i niži prihvaća */

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:

<!--[if IE]>
<style type="text/css">
.post {margin-left: 150px;}
</style>
<![endif]-->

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.

28.10.2005. @ 19:47

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Još niste uspjeli naći baš ono što vam treba? Pretražite cijeli Tutor.Blog:

Google

Informacije, razno

Tekstovi, slike i izvorni kod: nelchee


Nela Dunato art & Design
Moj design portfolio


In obscuro
Besplatni predlošci za web stranice


Cwtam - sketchblog
moj sketchblog




Prati me na Twitteru


Ako želite na svoj blog dodati link do Tutor.blog-a, kopirajte kod iz textbox-a (Desni klik --> Select All --> Copy) na mjesto gdje želite da se link pojavi. Hvala! :D


Tutor.Blog


HTML i CSS tutoriali


HTML i CSS tutoriali

Sadržaj ovog bloga je autorski rad. © 2005-2007 Nela Dunato
Login
Google

Blog.hr koristi kolačiće za pružanje boljeg korisničkog iskustva. Postavke kolačića mogu se kontrolirati i konfigurirati u vašem web pregledniku. Više o kolačićima možete pročitati ovdje. Nastavkom pregleda web stranice Blog.hr slažete se s korištenjem kolačića. Za nastavak pregleda i korištenja web stranice Blog.hr kliknite na gumb "Slažem se".Slažem se