Elements panel näyttää reaaliaikaisen näkymän sivun DOM rakenteeseen. Eli näyttää nimenomaan sivun rakenteen sellaisena jollaisena selain sen on rakentanut. Huomaa, että tämä on eri kuin sivun lähdekoodi. Elements panel on oiva työkalu tutkia sivun rakennetta, sen asemointia ja tyylejä sekä selvittää mahdollisia ongelmia tai kokeilla uusia tyylejä. Elements paneeli onkin ehkä eniten käytetty paneeli työskenneltäessä selaimessa.
Mitä Elements -paneelissa voi tehdä
Elements paneelissa voit mm.
- tutkia sivun html -rakennetta
- lisätä elementeille attribuutteja
- tutkia sivulla käytettyjä CSS -tyylejä
- muokata sivulla käytettyjä tyylejä (live-edit)
- määrittää elementeille uusia tyylejä
- testata sivun ulkoasua uusilla asemoinneilla
Elements panel mahdollistaa minkä tahansa sivun ulkoasun muokkaamisen reaaliaikaisesti. Voit kokeilla uusia asetuksia tai muokata vanhoja. Chrome näyttää elements paneelin DOM rakenteen käyttäen tuttuja HTML -elementtejä. Tarkasteltavan elementin voi valita helposti napsauttamalla sivulla elementtiä hiiren kakkospainikkeella ja valitsemalla Inspect element (tarkastele elementtiä). Tämä aktivoi Elements -paneelissa kyseisen kohdan sivun rakenteesta.
Toinen tapa on avata kehittäjätyökalut näppäinkomennolla Shift+Cmd+C (Windowsissa Shift+Ctrl+C), jolloin Elements paneeli avautuu inspect element tilassa. Samaan tilaan pääset napsauttamalla suurennuslasin näköistä ”inspect element painiketta”. Inspect element painike aktiivisena voit valita hiirellä elementin sivunäkymässä. Hiiren napsautuksella aktivoituu ja avautuu Elements -paneeli vastaavasta kohdasta.
CSS Asemoinnin visuaalinen esitys
Tarkasteltaessa elementtiä, näyttää sivu värein mm. elementin marginaalit ja paddingit. Tämä helpottaa monesti sivun asemoinnin tutkimista. Elementti itsessään saa visuaalisessa esityksessä sinisen peitevärin, padding vihreän ja marginaalit oranssin. Nämä muistamalla on helppo muokata arvoja ja testata asemoinnin muuttamista.
Styles paneelissa näkee missä kohtaa CSS -sääntöjä arvo on asetettu, onko sitä asetettu tai mistä arvo on periytynyt. Sama näkymä näyttää myös selainten omat oletusasetukset tyyleille (User Aget Stylesheet arvot).
DOM rakenteen muokkaus ja navigointi
Elements -paneelin rakenteessa voi helposti navigoida myös näppäimistöä käyttäen. Nuoli oikealle avaa suljetun elementin ja nuoli alas siirtyy seuraavaan elementtiin. Elements -paneelin alalaidassa näet samalla DOM polun aktiivisena olevaan elementtiin.
Hauskaa on se, että elements paneelissa voit myös muokata sivun sisältöä. Voit esimerkiksi:
- muokata elementin HTML sisältöä
- lisätä tai poistaa yksittäisiä elementtejä
- muokata attribuuttien nimiä ja arvoja
- siirtää elementtejä
Voit esimerkiksi hiirella raahata elementtejä toisiin paikkoihin ja siten testata sivun sisältöä, asemointia ja testata ideoitasi ilman, että sinun on muutettava varsinaista lähdekoodia. Myös elementtien attribuuttien muuttaminen on mahdollista. Kaksoisnapauta elementtiä koodinäkymässä mikä mahdollistaa elementin sisällön muokkaamisen. Tästä voi olla hyötyä erityisesti uutta sivustoa suunniteltaessa.
CSS tyylit
Ehkä parasta Elements -paneelin käytössä on CSS -panelin avulla tehtävät tyylimuokkaukset. Omassa työtavassani juuri CSS muokkaus selaimessa on erittäin suuressa osassa. Käytän CSS panelia mm. erilaisten arvojen testaamiseen. Joskus kirjoitan tyylitiedostoon vain perustavat säännöt ja täydennän niitä selaimessa. Selaimessa annetut arvothan eivät automaattisesti tallennu tyylitiedostoon mutta siellä löydän helposti oikeat arvot. CSS panelista voi kopioida tyylisäännöt ja liittää ne tyylitiedostoon, joten sikäli työtapa on ”puoliksi automatisoitu”.
Arvojen muuttaminen tapahtuu napsauttamalla arvoa jolloin se aktivoituu. Aktiiviseen kenttään voi kirjoittaa uuden arvon. Uusi tyyli päivittyy reaaliaikaisesti selainnäkymään. Numeerisia arvoja voi muuttaa myös hiiren rullalla – aktivoi kenttä ja pyöritä hiiren rullaa arvon kasvattamiseksi tai pienentämiseksi. Mac käyttäjille tiedoksi, että trackpadilla tämä tapahtuu kahdella sormella ”vierittämällä”.
Uusien arvojen lisääminen tapahtuu valitsemalla halutun säännön viimeinen arvo ja painamalla tabulaattoripainikketta. Tämä luo uuden tyhjän kentän. Selain osaa myös ehdottaa sopivaa arvoa kirjoitettaessa.
CSS panelin tulkitsemisesta
CSS panelissa näkyy elementtiin vaikuttavat säännöt. CSS säännöt periytyvät elementiltä toiselle ja myöhemmin annettu sääntö korvaa aiemman vastaavan. Tällaiset korvatut säännöt näkyvät yliviivattuina. Mikäli kirjoittamasi sääntö ei näytä tulevan voimaan, kannattaa selata näkymää alaspäin kunnes löytää sen säännön, jota selain käyttää. CSS paneelissa näkyy myös käytetty CSS tyylitiedosto sekä rivi, jolla kyseinen sääntö on. Helpottaa kummasti oikean kohdan etsimistä. Selaimilla on myös omat tyylitiedostonsa; User Agent Stylesheet. Tällaisessa on kaikki selaimen oletustyylit ja ne on esitetty harmaalla taustalla. User Agent -tyylejä ei voi muokata CSS paneelissa mutta voit aina korvata niitä omilla tyylisäännöillä. Mikäli tyylisäännön vieressä on keltainen kolmio, tarkoittaa se virheellistä CSS arvoa. Mikäli kirjoittamasi tyylisäännön kohdalla on tällainen merkki, tarkista CSS syntaksi.
Seuraavassa jaksossa
Ensi kerralla taidan pysytellä edelleen Elements paneelissa ja tyylien muokkaamisessa. Katsotaan ensi viikolla miten tyylejä muokataan ja tehdään mm. pseudo-luokkia.