CSS-debuggolás

CSS-debuggolás

Most, hogy elsajátítottuk a CSS alapjait, már csak az maradt hátra, hogy a debuggolás (hibakeresés és hibajavítás) elveit is megismerjük. Ezek segíthetnek megtalálni a hibákat a kész CSS-kódokban, illetve elhárítani a gondokat.

Amire szükséged lesz a lecke megértéséhez, az a HTML és a HTML-debuggolás alapfokú ismerete, valamint az, hogy tisztában legyél a CSS működési alapelveivel. Ha figyelmesen követted cikksorozatunkat, ezek a fogalmak már mind ismerősek számodra, ezért a CSS-debuggolás elveit is könnyen meg fogod érteni. Mai leckénk célja, hogy bemutassa a CSS-debuggolás elsődleges módjait. A HTML-debuggoláshoz hasonlóan a CSS-debuggolás sem túl ijesztő.

A CSS és a debuggolás

Csakúgy mint a HTML, a CSS is permisszív. A CSS esetében ez annyit tesz, hogy ha a deklaráció nem valid, azaz nem érvényes (szintaxishibát tartalmaz, vagy a böngésző nem támogatja a funkciót), a böngésző egyszerűen csak ignorálja a deklarációt, és továbblép a következőre. Elsőre ugyan bonyolultnak tűnhet, de a debuggolás nem kell hogy ijesztő legyen — a lényeg az, hogy ismerjük a programnyelv, a kód és a debuggoló eszközök működését is.

Ha a szelektor az, amely nem érvényes, semmi nem lesz szelektálva, és a szabály semmit nem csinál — a böngésző ebben az esetben is továbblép a következő szabályra.

Ez jó hír, több okból is: a legtöbb esetben a tartalom úgy is a felhasználók elé kerül, ha nincs teljesen jól stilizálva. A rossz hír viszont az, hogy az ilyen működés nincs túlzottan a segítségünkre, amikor próbáljuk megtalálni a hibát (semmilyen hibaüzenetet nem kapunk, amely ebben segítene). Még nagyobb a gond, ha a felhasználók a tartalmat sem látják — talán egy létfontosságú stílus nem lett alkalmazva, ami miatt az egész felépítés összeomlott?

Szerencsére számos olyan eszköz áll rendelkezésünkre, amely segíteni tud. Vegyük őket sorra:

A DOM Inspector és a CSS Editor

Napjainkban már minden böngésző felkínál olyan fejlesztőknek szánt eszközöket, amelyek segítenek ellenőrizni és megérteni a weboldalakat. A számos eszköz között két olyan van, amely minden böngésző része: a DOM Inspector, valamint a CSS Editor, melyek a Firefoxban például a page inspector toolban találhatóak. Amellett, hogy bemutatjuk a DOM Inspectort, azt is elmagyarázzuk, hogyan használható a CSS Editorral kombinálva a legjobb eredmények érdekében.

Kezdjünk el vizsgálni egy tetszőleges oldalt. A Firefox böngészőben a Page inspectort a Cmd/Ctrl + Shift + I billentyűkombinációval (vagy a Tools > Web Developer > Inspector menü segítségével) tudjuk elérni, és egy egész eszköztárt nyit meg az oldal aljában.

(Megjegyzés: Példánkban a Firefox szerepel, viszont ezek az eszközök minden böngészőben megtalálhatóak — csak más útvonalon érhetőek el.)

Ha a bal oldali DOM Inspectorban egy elemre kattintunk, a jobb oldali CSS Editor a rá vonatkozó szabályt fogja mutatni. Ez főleg azért hasznos, mert minden érvénytelen tulajdonság áthúzva jelenik meg egy figyelmeztető jelecskével együtt. Ez gyakran nagyon sokat segít!

Minden tulajdonság mellett van egy jelölőnégyzet, mely lehetővé teszi, hogy ki-be kapcsoljuk a CSS tulajdonságait. Ez főleg akkor hasznos, amikor próbáljuk felfedni, mi okozza a hibát.

CSS-validáció

A W3C HTML Validatorról már a HTML-debuggolás során is esett szó — a szervezetnek azonban van egy szuper CSS Validator eszköze is. A CSS Validator esetében is validálhatjuk a CSS-t az URL bevitele, a lokális fájl feltöltése vagy a direkt CSS input megadása után.

Hogyan validálhatunk?

Egyszerű, rövid kódoknál az a legjobb, ha kiválasztjuk a CSS Validation Service Validate by direct input nézetét. A szövegmezőbe bemásolhatjuk a hibás CSS-t, majd a Check gombra kattintva megkapjuk a hibák listáját.

Vitathatatlan, hogy ez az eszköz első látásra kevésbé tűnhet hasznosnak, mint a böngészőben találhatóak — hiszen nem teszi lehetővé, hogy lássuk a hibára vonatkozó renderelt kódot, továbbá arra sem használható, hogy megtaláljuk a hibás szelektorokat vagy azokat a helyeket, ahol a szintaxis helyes, de nem érvényes értéket választottunk a dizájnhoz. Az viszont tagadhatatlan, hogy a nagy stíluslapoknál mindenképp érdemes átfuttatni a kódot ezen az eszközön, hogy megszabaduljunk az elsődleges szintaxishibáktól, mielőtt a böngésző eszközeit használnánk az apróbb gondok azonosítására.

A CSS Lint is egy hasonló eszköz a CSS validálására és a hibák felfedésére, illetve hasznos tippeket, érdekes figyelmeztetéseket is ad a kóddal kapcsolatban.

Összegzés:

Gratulálunk! Elsajátítottad a CSS alapelveit! Most már debuggolni is tudod a CSS-t, így az esetleges hibáidat is meg tudod találni, és könnyen tanulhatsz belőlük. Már csak annyi maradt hátra, hogy a tanultakat magad is kipróbáld — a gyakorlati tudás elsajátítása lehetővé teszi, hogy a soron következő leckecsoportunkat is könnyen tudd majd követni!


Nyereményjáték!

Rovatunk elsődleges célja, hogy közelebbről is bemutassa a legismertebb webtechnológiákat. Azok között az olvasók között, akik minden héten követik rovatunkat, azaz velünk tanulják a programozás alapjait és kitöltik a feladatsort, a sorozat végén egy laptopot sorsolunk ki.
 

A játék heti kérdése:

Mit csinál a böngésző a helytelenül megírt kóddal?
1. Hibát jelez
2. Ignorálja
3. Magától javítja
 

A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
 


 

Néhány szó rólunk:

Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.

Szeretne értesülni, ha új cikk jelenik meg Számtek rovatunkban? Iratkozzon fel értesítőnkre!

E-mailben értesíteni fogjuk Önt az új cikkekről. Feliratkozáshoz kérjük adja meg a nevét és az e-mail címét.

Hozzászólások

Kapcsolódó cikkek

CSS-debuggolás
Számtek
  • Erdsoft
  • 2019.04.22.
  • LXXIV. évfolyam 16. szám
CSS-debuggolás
Számtek
  • Erdsoft
  • 2019.04.13.
  • LXXIV. évfolyam 15. szám
Facebook

Támogatóink