cum să depanați CSS cu instrumentele de dezvoltare a browserului

CSS nu este un limbaj de programare. Cu toate acestea, în funcție de cine întrebați, vă va spune că scrierea unui CSS bun poate fi uneori la fel de provocatoare ca scrierea în limbaje de programare precum Java sau JavaScript.

în acest articol, vreau să vă arăt câteva trucuri cum puteți depana problemele CSS pentru a le rezolva. Ca un bun dezvoltator web, ar trebui să fiți familiarizați cu instrumentele de dezvoltare a browserului (de exemplu, de la Google Chrome), așa că le vom folosi.

modul Wireframe

lupta cu probleme de aspect? Poate că un aspect mai asemănător cu wireframe vă va ajuta să înțelegeți mai bine aspectul. Următoarea regulă CSS va face ca fiecare element să aibă un fundal negru, culoarea textului verde și o margine roșie. Puteți adăuga regula în foaia de stil sau direct în browser. În funcție de cazul dvs. de utilizare, puteți chiar îmbunătăți această regulă. Nu uitați să dezactivați acest lucru pe producție!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

proprietăți De stil calculate

unele instrumente de dezvoltare a browserului (de ex. Instrumente pentru dezvoltatori Chrome) vă oferă o vizualizare care afișează proprietățile stilului care sunt aplicate unui anumit element. Aici, puteți vedea, de asemenea, pentru fiecare proprietate stil în cazul în care acesta a fost setat.

testarea interogărilor CSS direct în browserul dvs.

cu excepția cazului în care nu introduceți stiluri, trebuie să creați blocuri de declarații CSS valide. Uneori, selectorii CSS pot deveni complicați de citit și scris. O modalitate rapidă de a verifica dacă selectoarele CSS funcționează corect este să Căutați direct în instrumentele de dezvoltare a browserului. Puteți căuta atât text, cât și selectori CSS.

Comutarea stărilor elementelor

anumite elemente, cum ar fi câmpurile de intrare, sunt stilizate atunci când sunt focalizate. Alte elemente, cum ar fi butoanele reacționează atunci când treceți cu mouse-ul pe ele. Majoritatea instrumentelor de dezvoltare a browserului vă permit să comutați stări de elemente precum focus sau hover. Cu toate acestea, dacă un ascultător DOM ascultă acest eveniment, atunci comutarea stării unui element nu va arunca de obicei un eveniment care ar fi înregistrat de acest ascultător.

concluzie

Lasă un răspuns

Adresa ta de email nu va fi publicată.