Alati za testiranje CSS-a

Već smo spomenuli da svaki web dizajner mora svoje stranice testirati na raznim preglednicima, što se najlakše ostvaruje tako da ih ima nekoliko instaliranih na svom računalo.

Ne sasvim očekivano, današnji web preglednici imaju dodatke za lakše otkrivanje stilova i raznih drugih elemenata web stranica. Takvi dodaci pomažu pri rješavanju problema (debugiranju) izgleda vlastitih stranica, ali i pri učenju, tj. analiziranju tuđih uradaka.

Ti alati omogućavaju lako čitanje kôda stranice i definicije stilova, ali i eksperimentiranje s brisanjem, dodavanjem i promjenom definicija stilova. Pritom je važno znati da sve promjene radite na kopijama stranica učitanim u preglednik i da svojim pokusima ništa ne možete uništiti.

Postoje i razni online alati, među kojima ističemo CSS Validator W3 konzorcija koji provjerava ispravnost CSS-a, a često daje i poneki savjet vezan uz izgradnju stilova.

Jedan od prvih dodataka za pomoć pri izradi CSS-a i web stranica je Web Developer dodatak za preglednik Mozilla Firefox.

Autor je Chris Pederick, a alat je dostupan s adrese dodataka za Firefox. Instalira se jednostavnim klikom na link i uglavljuje se u preglednik kao alatna traka.

Padajući izbornik s funkcijama za pregled i uređivanje CSS-a.

Traka Web Developer nudi čitav niz funkcija, uključujući pregled stila, prikaz elemenata na stranici i još mnogo toga. Jedan od zanimljivijih detalja je online uređivanje stila. Uz prikaz stranice, korisnik dobiva i prozor sa zapisom u kojem može mijenjati stil i u stvarnom vremenu pratiti promjenu na stranici.

Označavanje elemenata pomoću alata Web Developer Toolbar pomaže otkriti hijerarhiju elemenata u HTML dokumentu, vrlo važnu za razumijevanje primjene stilova.

Padajući izbornik s funkcijama za označavanje
pojedinih elemenata stranice.

• Ako ovu stranicu gledate u web pregledniku Firefox, 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.
• Uputa: iz izbornika CSS izaberite View Style Information, kliknite na sliku te pri vrhu ekrana pogledajte u kojem se elementu i kojoj klasi nalazi. Na desnom dijelu ekrana pojavljuju se odgovarajuće definicije stilova koje trebate proučiti da biste riješili postavljeni zadatak.
• Ponovite postupak za slike druge vrste.

• Firefox ima u traci Web Developer ugrađen niz funkcija namijenjenih testiranju stranica, no te su funkcije složenije za upotrebu od upravo opisanih.

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 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 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.

• Pogledajte prikaz rada s razvojnim alatima na Mozillinom službenom blogu.
   

Web preglednik Internet Explorer od verzije 8 ima ugrađene alate koji, među ostalim, olakšavaju prepoznavanje dijelova web stranica, pa tako i pogrešaka na njima. Ti su alati dostupni iz izbornika Alati ili izravno tipkovničkim prečacem [F12].

Razvojni alati omogućavaju pregledavanje raznih elemenata stranice te akcija vezanih uz stranicu, ali ćemo se ovdje ograničiti na funkcije vezane uz izgled stranice i njegovih elemenata.

Traka izbornika, alatna traka i naslovi kartica
razvojnih alata internet Explorera.

Za pregledavanje svojstava pojedinog elementa je nakon aktiviranja razvojnih alata najjednostavnije na novom oknu prozora preglednika imati aktiviranu karticu HTML, što je i slučaj pri njegovom prvom otvaranju. Nakon toga se iz alatne trake odabere alat Odabir elemenata klikom, te se klikne na element stranice kojem želimo proučiti oblikovanje. Time se pokaže dio HTML kôda odgovoran za prikaz izabranog elementa te odgovarajući stilovi.

Prikaz dijela HTML kôda i stilova koji djeluju na izabrani element.

Osim pregledavanja elemenata i ovi razvoji alati omogućavaju analizu tipa „što bi bilo, kad bi bilo”, tj. jednostavno uključivanje i isključivanje pojedinih dijelova definicije stila, kao i dodavanje novih selektora, odnosno svojstava.

• Ako ovu stranicu gledate u web pregledniku Internet Explorer, 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.
   

• Predlažemo da proučite detaljno napisane upute dostupne iz izbornika Datoteka ili izravno tipkom [F1].
   

Razvojni alati web preglednika Google Chrome dostupni su iz izbornika Prilagodi i kontroliraj Google Chrome > Alati > Alati za razvojne programere ili tipkovničkim prečacem [ctrl]+[shift]+I. Time se, kao i u Internet Exploreru, otvara okno za pregled HTML kôda i stilova te raznih drugih svojstava stranice.

Pregled elementa koji nam stvara poteškoće ili nas zanima iz bilo kojeg drugog razloga može započeti i bez otvaranja navedenog okna desnim klikom na taj element i izborom funkcije Pregledaj element koja u oknu za pregled aktivira prikaz dijela HTML kôda koji sadrži izabrani element i odgovarajućih stilova.

Prikaz dijela HTML kôda i stilova koji djeluju na izabrani element.

Svako od svojstava u opisu stila se može lako isključiti ili ponovno uključiti, te promijeniti. Mogu se i dodavati nova svojstva, eksperimentirati s izgledom, te nakon testiranja željena svojstva uključiti u pravu CSS datoteku.

• Ako ovu stranicu gledate u web pregledniku Google Chrome, 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.

• Dodatne informacije o razvojnim alatima preglednika Google Chrome mogu se naći izvan preglednika, na web sjedištu Google Code.

• Ovo je posljednja lekcija vezana uz razvojne alate u tri trenutačno najzastupljenija web preglednika. Predlažemo da sad u preglednicima koje upotrebljavate proučite alate koji će vam pomoći u otkrivanju problema u oblikovanju stranica.
• Posjetite neko web sjedište jednostavnog izgleda (npr. neki blog) i pokušajte otkriti od kojih se elemenata sastoji.