ugrás a tartalomhoz

CSS alapjai VII.

Bártházi András · 2004. Jún. 15. (K), 21.00
CSS alapjai VII.
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.

Wish CSS Debugger - munka közben


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.

Web Developer Toolbar - Edit CSS


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.
 
Bártházi András arcképe
Bártházi András
Az Emarsys-nál dolgozik vezető fejlesztőként, és az API-ért, integrációkért felelős termékmenedzserként. Szeret profi csapatban profit alkotni.
1

Dom Inspector

Jano · 2004. Jún. 15. (K), 23.09
1)
A beepitett Tools : DOM Inspector is kepes megmutatni melyik elemre milyen CSS szabalyok vonatkoznak. Kulon fajlonkent, es computedStyle is megy neki.

1. DOM Inspectorban jobb oldalon inspect az URL mezo mellett.
2. A baloldali kijelol ikonnal kivalsztod melyik elemre vagy kivancsi
3. A jobb oldali frame balfelso sarkaban a lehuloo menubol pedig kivalasztod mire vagy kivancsi.

2)
CSS-nek css headerrel kell kimennie szerverrol! Erre foleg strict doctypel figyelnek bongeszok.

3)
egyes tulajdonsagokat legegyszerubb ugy kikommentezni, hogy ele irsz egy betut

4)
A border megjelenites kevesbe jol hasznalhato debuggolasnal mint talazatoknal mivel floatoknal egyszeruen ha nem fernek be egymas melle a dolgok egymas ala kerulnek es teljesen szet tud esni az oldal. Erdemes hatterszinnel probalkkozni elemenkent esetleg.
2

Pár kiegészítés

Bártházi András · 2004. Jún. 16. (Sze), 06.47
3a)

Csak ne kötőjelet írj elé még véletlenül se, mert IE minden további nélkül figyelmen kívül hagyja.

4a)

A legjobb a -moz-outline, illetve a CSS 3 outline használata. Ez nem módosítja a layout-ot, viszont kiemeli az elemet. A fenti bemutatott CSS Debugger is ezt csinálja.

-boogie-
3

Outline

Jano · 2004. Jún. 16. (Sze), 10.24
Hopp igen. Ezt kerestem!
Egyebkent most 0.9-es firefoxnal ujra raktam osszes bovitmenyt is es a Web Developer kiegeszito is ugy nezem ezt hasznalja mert mar nem mozdulnak el az elemek. (Regebben meg valoszinu kereteket rakott kore.)
6

absolute nem ide vág

Anonymous · 2005. Ápr. 27. (Sze), 18.45
hello andrás
nekem nagyon tetszettek a cikkeid , remélem azért erre a fórumra még rá-rá nézel, szerintem jól megszerkesztetted, ezért könnyen tanultam tőled.

a probléma amit szeretnék , télleg nem ide vág (ha nem haragszol)
készitek egy oldalt és a weblaborhoz hasonlóan egy textura a háttér , ha megnézed itt az átlós szürke háttérre gondolok, a saját oldalamon én is hasonlóan valósítom meg , csak én vízszintesen raktam be egy 2x2 pixeles texturát, és azt vettem észre hogy a görgetésnél a monitor úgymond "berezeg",
esetleg tudnál segíteni hogy hogy lehetne megoldani ezt a problémát.
előre is köszönöm
pisty
7

tegyel be nagyobb hatterkepet

Jano · 2005. Ápr. 27. (Sze), 22.44
A gorgetesnel a gepnek ujra kell rajzolni a hatteret, ha 2*2pixeles kepell kell kitoltenie akkor azt nagyon sokszor ki kell raknia. Vagjal ki iknabb egy 100*100-as mintat es azt tedd be neki. A fajlmeret nem lesz sokkal nagyobb de a bongeszonek kevesebbszer kell rajzolnia.
4

DOMI

aries · 2004. Jún. 16. (Sze), 11.04
az 1)-hez kiegészítés: nem mindegyik Firefox buildben van DOM Inspector, de le lehet tölteni (ill. lehet úgy fordítani, de addig, amíg a ,,nagy'' Mozillánál ez alap, addig itt explicit kell megaszondani).
5

Mindenféle kérdések

Anonymous · 2004. Júl. 29. (Cs), 12.30
A sorozatban korábban volt hivatkozás Bubu oldalára ahol a IE-hez használatos HTC-kről esik szó. Én megnéztem, sőt máshol is találtam hivatkozást rájuk, de még mindig nem igazán értem, hogy mi ez és hogy működik. Lehetne erről pár szót szólni úgy hogy egy abszolút láma is megértse?

Ugyancsak ez a gondom a DOM-mal. Angolul ugyan tudok valamelyest, de olyan szinten nem, hogy megértsem a szakirodalom minden egyes részét.

Saját webhelyem http://web.axelero.hu/ht7050 wegyesen tartalmaz css és html formázást (pl a képeknél az align elem). Tervezem a teljse átalakítást és ehhez örömmel venném ha valaki ráérő, hozzáértő átnézné a lapokat és adna tanácsokat!

Köszönettel:

HT
8

jó cikkek - ezer köszönet

Anonymous · 2005. Júl. 28. (Cs), 15.55
végigolvasva a cikksorozatot, kötelességemnek érzem megköszönni a tudás önzetlen és érthető formában történő megelevenítését . sok sikert Andrásnak.

Róbert herceg
9

táblázat bordercolor

Anonymous · 2005. Aug. 18. (Cs), 23.52
Átolvastam a cikkeket, de lehet, hogy atsiklottam felette, hogyan tudom megadni azt, hogy a osszes tablazat kerete egyszinu legyen:
vmi ilyet szeretnek:
border="2" bordercolor="#FF0000" cellpadding="0" cellspacing="0"
csak css-ben
10

táblázatok stílusa

Hojtsy Gábor · 2005. Aug. 19. (P), 07.59

table {
  border: 2px solid #f00;
}
table td, table th {
  padding: 0;
  margin: 0;
}
11

Cellák között

Jano · 2005. Aug. 19. (P), 10.01
Ha a cellák közötti elválasztó rácsot szeretnéd színezni akkor a td-nek adj border. Hogy ne duplázodjon az érték használd a border-collapse tulajdonságot is.

table { border-collapse: collapse }

td {
 border:2px solid #f00;
 padding:0;
}
12

<Nincs cím>

princza · 2005. Aug. 21. (V), 01.43
koszi a segitseget, de azote akivettem a tablazatot, igy meg szebb is.
13

Köszönet

Pixelbird · 2010. Aug. 8. (V), 09.25
Köszönöm szépen! Nagyon jó tutorial! Azt kívánom, bárcsak meg lehetne rendelni nyomtatott formában,olcsón, és minden faxni nélkül. Nagyon jó referencia lenne a hétköznapi munkához, és gazdaságosabb lenne, mint kiprintelgetni.
Danke mégegyszer!
Éda