Otisni ovo poglavljeOtisni ovo poglavlje

Alati za testiranje CSS-a

Razvojni alati preglednika Firefox


 

Web preglednik Firefox od verzije 10 ima i ugrađen dodatak Web Developer. Odgovarajući alati mogu se pregledati prikazivanjem izbornika ([F10]), pa izborom Tools > Web Developer. Na istom se mjestu mogu pronaći i prečaci za odgovarajuće funkcije.

Kao uvod u razvojne alate upoznat ćemo se s funkcijom Inspect (Pregledaj) dostupnom s izbornika, ali i desnim klikom na bilo koji element te izborom funkcije Inspect Element.

Rezultat upravo opisane akcije je vizualno istaknut izabrani element, te popis elemenata u kojima se nalazi taj element na dnu ekrana.

Preglednik elemenata
Preglednik elemenata u
web pregledniku Firefox.

Klikovima na gumbe HTML, odnosno Style, dobiva se kontekst izabranog elementa u HTML datoteci na dnu ekrana te odgovarajuće definicije stila na desnom rubu.

Prikaz HTML dokumenta olakšava kretanje po dokumentu, pa se tako nakon klika na gumb Inspect prelaskom miša preko elementa mijenjaju i prikazani dio HTML dokumenta i odgovarajući stilovi.

Prikaz CSS-a omogućava promatranje svojstava (gumb Properties) ili svih svojstava koja su se primjenjivala na element (gumb Rules) uz prekrižena svojstva koja su „nadjačana” drugim pravilima.

Prikaz stila
Prikaz stila na kojem je vidljivo da je svojstvo color
promijenjeno za (izabrani) link.
  • Ako ovu stranicu gledate u web pregledniku Firefox, prvo provjerite koju verziju imate, te po potrebi preuzmite najnoviju verziju. Kad imate verziju 10 ili višu, istražite kako su u ovom tečaju prikazane slike vezane uz sadržaj i tekstovi ispod njih, a kako slike u okvirićima poput ovog.