Weblabor

A cikksorozatnak ebben a részében hibakeresési technikákat fogunk áttekinteni, vagyis átnézzük, mit tehetünk, ha a CSS kialakítása során nem az, és/vagy nem úgy jelenik meg, ahogy/ahol mi azt gondoltuk. Több megoldást is végignézünk: a kézzel történő hibakereséstől a segédeszközöket is használókig. Bízom benne, mindenki megtalálja majd a szimpatikus és hatékony megoldást!

Ha intenzíven használunk CSS-t, bizony előfordul, hogy valami valahol nem működik. A hiba lehet teljesen egyértelmű, de adott esetben viszonylag összetett is. A probléma ettől még probléma marad, nem úgy viselkedik a böngésző, ahogy szeretnénk. Miért? Az alábbiakban egy checklistként használható listában összefoglalom, miként járhatunk el, ha valami nem működik. Akinek van más módszere, ötlete, szívesen veszem, ha hozzászólásokkal kiegészít!

Ha probléma van...

...próbáljuk megtalálni, hogy hol van! Ez evidensen hangzik persze, de ez a legfontosabb. Lássuk, milyen lehetőségek lehetnek!

Magát a CSS definíciót hagyja figyelmen kívül teljesen a böngészőnk? Csak a változtatások nem akarnak megjelenni, vagy pedig csak bizonyos kiválasztók, tulajdonságok nem működnek? Lássuk, mi lehet a baj!

A böngésző megtalálja a CSS hivatkozást?

Ekkor semmilyen más stílus nem lesz hatással a megjelenésre. Ha így van, és a teljes CSS definícióinkat hagyja figyelmen kívül valamiért a böngészőprogram, továbbá külső CSS-t használunk, könnyen előfordulhat, hogy rosszul hivatkozunk rá.

Ellenőrizzük, hogy a CSS elérhető-e, a szerveren helyesen vannak-e beállítva a jogosultságok! Ha igen, és az adott címen elérhető a CSS-ünk, akkor ellenőrizzük le, hogy nem gépeltük-e el a nevét, illetve ha nem abszolút hivatkozással írtuk le a helyét, akkor hogy jól lépdeltünk-e a könyvtárak között! A relatív CSS hivatkozást mindig az oldal webcíméhez képest kell megadni. Írjuk be a böngészőnkbe a címet, és nézzük meg, bejön-e a CSS fájl (javasolt olyan böngésző, például Firefox vagy Opera használata, ami megjeleníti a CSS-t, és nem ajánlja fel lementésre, mint az Internet Explorer).

Támogatja a böngészőnk az általunk használt módszert?

Olyan hivatkozási módszert használtunk, amit ért a böngészőnk? Ha megadtunk média típust, jól adtuk meg? Esetleg nem tiltottuk le a CSS megjelenítést (Web Developer Toolbar, vagy hasonló eszközzel)? Ezeket sem árt ellenőrizni...

Jó HTML elemmel hivatkozunk a CSS-re, nem gépeltük el?

Előfordulhat az is, hogy a hivatkozásnál, magában a meghívásban ejtettünk szintaktikai hibát, elgépeltünk egy kódot. Ezt akár egy HTML validátorral is ellenőrizhetjük, gyorsan jelezni fogja nekünk a hibát!

Le van zárva rendesen az adott HTML elem, illetve környéke?

Szintén egy gyakori hiba lehet, hogy elfelejtünk lezárni egy elemet, és emiatt az oldalszerkezet egy kicsit megváltozik. Egy validátor ezen is gyorsan segíteni képes.

Nincsen véletlenül megjegyzésben a kérdéses részlet?

Ha nem használunk kódszínezést támogató szerkesztőt, akkor előfordulhat, hogy nem tűnik fel: a kérdéses CSS kódrészlet, vagy pedig a hivatkozó HTML kódrészlet megjegyzésben szerepel. Minden jó, csak éppen nem látszik. Használjunk kódszínezést támogató szerkesztőt...

Nem gyorsítótárazta be a böngésző a CSS-t?

Hacsak nem adjuk meg külön (a webszervert beállítva, vagy egy programmal kiszolgálva a CSS-t) hogy ne, akkor a böngészők a távoli állományok esetén általában eltárolják átmenetileg a CSS fájlunkat, ami problémát okozhat akkor, ha mi közben megváltoztattuk. A gyorsítótár törlése, vagy a Frissítés/Refresh gomb Shift billentyűvel történő megnyomása segíthet a dolgon. Ha ez sem segít, biztos ami biztos alapon nézzük meg, jó állományt módosítgatunk-e? Betölthetjük a CSS-t közvetlenül a böngészőbe, és megnézhetjük, hogy látszanak-e benne a változtatások.

Azt értjük az adott kiválasztó vagy tulajdonság alatt, amit a szabvány is?

Előfordulhat, hogy mi értünk félre valamit, rosszul próbálunk meg használni egy elemet (kiválasztót, tulajdonságot), a böngésző pedig teszi a szabványban meghatározott dolgát - helyesen. Ha egy olyan dologról van szó, amit már használtunk korábban is, vagy láttuk a használatát valahol - és ott ment -, nézzük meg, miben különbözik attól az éppen használt módszer!

Egy tipikus lehetőség a félreértésre például a vertical-align használata. Azt várnánk el tőle, hogy függőlegesen az adott blokk elemen belüli pozíciót állítja, pedig a szabvány szerint nem ez a feladata, hanem az adott sorban a függőleges elhelyezkedés állítása. Egy kivétel van ez alól, a táblázat cellában történő használata.

Vegyük elő a szabványt, és nézzük meg, hogy tényleg úgy kell-e viselkednie a böngészőnek, ahogy akarjuk!

Nem gépeltük el a kiválasztót, tulajdonságot?

Gyakori hiba, hogy (főleg a ritkábban használt) kiválasztót, tulajdonságot elgépeljük, vagy rosszul emlékszünk rá. Például a color helyett font-color-t írunk, vagy egy azonosítóval történő kiválasztáskor, például #twocols helyett #twocol írunk. Ilyenkor alaposabban nézzük át a kódunkat, s remélhetőleg megtaláljuk a hibát. A második hibánál, ahol a többesszámmal volt a probléma, segíthet, ha egységesek vagyunk, és kialakítunk valamilyen szabályrendszert magunknak (itt a többesszám használatot illetően), ezzel is csökkentve az elgépelési lehetőségeket.

Nincsenek hiányzó pontosvesszők?

Az egyes tulajdonságokat pontosvesszővel kell elválasztani, a soremelés nem elég. Előfordulhat, hogy kimarad egy pontosvessző az előző definíció elől, így pont az nem fog működni, amit szeretnénk. Egy kódszínezést használó, a tulajdonságok neveit ismerő szerkesztő segíthet könnyebben felfedni ezeket a problémákat.

Nincsenek megnyitott idézőjelek?

Az előzőhöz hasonló helyzet. Egy megnyitott, de be nem zárt idézőjel, aposztróf, zárójel problémát okozhat, előfordulhat, hogy érvénytelenné teszi egy adott ponttól a CSS-ünket. Ahogy az előzőnél is, itt is egy kódszínezős szerkesztő segíthet. Ha validáljuk a CSS-ünket, szintén kiszűrhetőek az ilyen jellegű hibák (és a pontosvessző hibák is).

Le van zárva kapcsoszárójellel a definíciós rész?

Szintén tipikus hiba, hogy egy definíciót elfelejtünk lezárni. Az előző két esetben hivatkozott módszerek: szerkesztő és validálás adhatnak külső segítséget.

Ha minden kötél szakad...

...akkor próbáljuk ki a következőket, a fapados és gyilkos módszerek biztosan segítenek meghatározni, hogy merre keressük a probléma gyökerét!

Töröljük a teljes CSS-t!

Ha mégsem jó helyen módosítjuk a CSS-t, ezzel egyből láthatóvá válik számunkra. Természetesen a törlés helyett választhatunk kíméletesebb módszert is, például átmozgathatjuk máshova, vagy átnevezhetjük az állományt.

Töröljük az adott szabályt, majd gépeljük be megint!

Ez segíthet, ha valamit nagyon elgépeltünk, és sehogy sem fedezzük fel a hibát, még huszadik olvasatra sem. Ha más nem, még egyszer átgondoljuk, hogy jó-e az úgy, ahogy írjuk éppen.

Próbáljuk ki egy másik böngészővel, operációs rendszerrel!

Lehet, hogy éppen nem működik az adott tulajdonság, rosszak az információink a böngészőnkről. Lehet, hogy a böngészőnk hibás, az éppen aktuális napi snapshotba (mert persze a legújabbnak kell meglennie...) hiba csúszott. Lehet, hogy úgy írtunk valamit a kérdéses részlet környezetében, hogy a böngészőnk nem bírja feldolgozni, és az adott részt eldobja. Vagy feltettünk valami újdonságot valahova, valamiért, és szimplán attól állt fejre.

Foglalkozzunk mással!

Ha már semmi sem jut eszünkbe, a legjobb megoldás, ha nem foglalkozunk egy ideig a problémával, továbblépünk, és később térünk vissza rá. Ez nem csak más esetben (vizsga során) hasznos, hanem itt is! Lehet, hogy ahogy elkezdünk mással foglalkozni, egyből be fog ugrani a megoldás.

Tartsunk szünetet!

Aludjunk egyet a dologra, vagy kicsit álljunk fel a gép mellől. A sok munka amúgy sem használ, egy kis pihenés nem árt. Ha kiürítjük a fejünket, utána sokkal hatékonyabban fogunk tudni dolgozni.

Próbáljunk ki egy másik megoldást!

Ha nincs más választásunk, kerüljük meg a problémát. Általában többféleképpen is meg lehet oldani a feladatokat, ha egyikkel meggyűlik a bajunk, próbálkozzunk a másikkal. Csak bejön.

Forduljunk egy levelezőlistához!

Egy másik lehetőség, hogy forduljunk egy levelezőlistához. A Weblabornak is van számos levelezőlistája, a CSS megvitatásához a wl-levlistát tudom ajánlani. Ha jól tesszük fel a kérdést, akkor magar meg szokott érkezni a segítség. Ajánlott a kérdésfetevéshez: a probléma részletes leírása, a konkrét hibajelenség bemutatása, egy webcím, ahol megtekinhető a probléma, egy kódrészlet, amivel pontosan bajunk van.

Használjunk segédeszközt!

Nem mindig a legegyszerűbb a fenti módszerekkel dolgozni, hiszen egy olyan egyszerű dolognál is, mint a CSS, számos apró probléma lehet, melyet nehéz kiküszöbölni. Több fejlesztői segédeszköz is napvilágot látott már, melyek megkönnyítik a CSS fejlesztést, hibakeresést, ezek közül mutatok be kettőt, melyet a napi munkám során használni szoktam.

Wish CSS Debugger

A Wish CSS Debugger segítségével egy oldal aktuális szerkezetét, az adott elemek osztályait, azonosítóit, illetve CSS definícióit vizsgálhatjuk meg. Egy Firefox (és Mozilla) alatt működő bookmarkletről van szó, melyet aktiválva oldalunkon egy kis információs doboz jelenik meg.


A bookmarkletet kiválasztva a problémás oldalon, jobb oldalt alul egy kis ablak fog megjelenni, melyben az éppen a kurzor elemünk alatt található elem típusát, osztályait és azonosítóját láthatjuk, illetve ugyanezt az összes szülő elemére. Itt megvizsgálhatjuk, hogy milyen az oldalszerkezetünk, milyen szülői vannak az elemnek, milyen CSS kiválasztót kell írni rá, hogy kiválasztásra kerüljön az elem.

Ha valamelyik elemre klikkelünk, akkor egy új ablak (div) nyílik meg (viszonylag lassan az oldal szerkezetétől függően), melyben az adott elem, és az összes szülő elem - számított - CSS tulajdonságait tekinthetjük meg. Egy tulajdonság akkor fog megjelenni, ha a szülő elem tulajdonságától különbözik (azaz ha nem találunk valamit, akkor nézzük a következő elemet).

Az eszköz eltüntetése az oldal újratöltésével lehetséges.

Web Developer Toolbar

A Web Developer Toolbar (Firefox/Mozilla kiegészítés) része egy "Edit CSS" nevű kis eszköz (ha a Toolbar-t telepítettünk, akkor a Tools/Web Developer/Css menüben találjuk), melynek segítségével lehetővé válik az aktuális oldal CSS-ének szerkesztése. Ha kiválasztjuk a menüpontot, vagy megnyomjuk a Ctrl-Shift-E gyorsbillentyűket, egy oldalsáv nyílik meg, amiben külön füleken (az újabb verziókban) láthatjuk az aktuális oldal CSS-eit.


A megjelenített CSS-ek szerkeszthetőek, s a változtatások egyből érvényre is jutnak a dokumentumban. Nagyon gyors fejlesztést tesz lehetővé, hiszen nincs szükség a mentés, oldal letöltés (esetleg cache törlés) lépésekre, amint megváltoztatunk valamit, máris láthatjuk az eredményét.

Összefoglalás

Mint láthattuk, van merre hibáznunk, és van mivel keresnünk ezeket a hibákat CSS esetében is. Egy kicsit eltér a többi nyelvtől a CSS hibakeresés, de a listában sok olyan tippet is találhatunk, mely általában jól jöhet a programozás és oldalkészítés során. A két bemutatott eszközt csak ajánlani tudom, nekem nagyon beválltak a napi munkák során, gyorsan lehet velük kipróbálni dolgokat, illetve megtudni, mi merre van. Egyszerre történő használatuk bár egy kicsit furcsa, de lehetséges.

A mostani cikkel a cikksorozat kapcsán egy mérföldkőhöz érkeztünk, ami egyelőre a sorozat végét is jelenti. Ez nem jelenti a CSS téma lezárását, de egy ideig szüneteltetni fogjuk azt. Mivel sok megismernivaló van még a CSS háza táján (gyakorlat, CSS 3, tippek és trükkök minden mennyiségben), ezért biztos vagyok benne, hogy vagy egy másik sorozatban, vagy pedig ebben visszatérünk még a témára a Weblabor hasábjain. Remélem, hogy a cikkek elnyerték mindenki tetszését, és sikerült mindenkinek legalább egy kis újdonságot nyújtani a témával kapcsolatban.