Identificarea și depanarea erorilor CSS
În această secțiune, explorăm metodele prin care putem identifica erorile din codul CSS: inspectarea codului din pagini sau fișiere CSS și folosirea unor instrumente utile pentru găsirea rapidă a problemelor.
Depanarea CSS nu este la fel de complicată precum depanarea în alte limbaje de programare.
CSS este un limbaj permisiv, similar cu HTML, ceea ce înseamnă că, în ciuda erorilor de sintaxă sau de logică, pagina web va fi afișată oricum.
- Dacă o declarație nu este validă, browserul o ignoră și continuă cu celelalte declarații valide.
- Dacă un selector este invalid, întreaga regulă este ignorată.
Avantajul este că utilizatorii pot vedea conținutul chiar dacă nu este stilizat corect. Dezavantajul: CSS nu oferă mesaje de eroare explicite, ceea ce îngreunează depanarea.
Inspectarea DOM și CSS
Majoritatea browserelor moderne oferă instrumente pentru dezvoltatori, precum Inspectorul DOM și editorul CSS, accesibile din meniul pentru dezvoltatori.
În Firefox, inspectorul se deschide cu CTRL + SHIFT + I, din meniul Web Developer → Toggle Tools sau prin clic dreapta → Inspect Element.
Selectând un element HTML, panoul CSS afișează regulile aplicate. Proprietățile invalide sunt marcate cu un simbol de avertizare și tăiate cu roșu. Trecând cursorul peste simbol, apare un indiciu despre eroare.
☞ Casetele de bifare din stânga fiecărei proprietăți permit activarea/dezactivarea lor pentru testarea rapidă a efectelor.
Corectările pot fi făcute direct în editorul din browser, însă modificările nu se salvează în fișierul CSS — acestea dispar la reîmprospătarea paginii. Pentru a copia modificările, clic dreapta → „Copy Rule”.
Validarea codului CSS
Codul poate fi verificat cu unelte online precum:
- CSS Validation Service - verificare prin URL, fișier local sau cod introdus manual.
- CSS Lint - detectează erori și bune practici.
Aceste servicii sunt foarte utile în special pentru fișiere CSS mari, pentru identificarea erorilor minore de sintaxă.