a CSS hibakeresése a böngésző fejlesztőeszközeivel

a CSS nem programozási nyelv. Még, attól függően, hogy kit kérdezel, megmondja, hogy a jó CSS írása néha ugyanolyan kihívást jelenthet, mint az olyan programozási nyelveken történő írás, mint a Java vagy a JavaScript.

ebben a cikkben néhány trükköt szeretnék megmutatni, hogyan lehet hibakeresni a CSS problémákat azok megoldására. Jó webfejlesztőként ismernie kell a böngésző fejlesztői eszközeit (például a Google Chrome-ból), így ezeket fogjuk használni.

drótváz mód

az elrendezési problémákkal küzd? Talán egy drótvázszerű megjelenés segít jobban megérteni az elrendezést. A következő CSS szabály szerint minden elemnek fekete háttere, zöld szövegszíne és piros szegélye lesz. Hozzáadhatja a szabályt a stíluslaphoz vagy közvetlenül a böngészőhöz. A Felhasználási esettől függően még javíthatja ezt a szabályt. Ne felejtse el letiltani ezt a gyártásnál!

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

számított stílus tulajdonságai

néhány böngészőfejlesztő eszköz (pl. Chrome developer tools) olyan nézetet kínál, amely megjeleníti az adott elemre alkalmazott stílustulajdonságokat. Itt azt is láthatja, hogy az egyes stílustulajdonságok hol vannak beállítva.

tesztelés CSS lekérdezések közvetlenül a böngészőben

ha nem inlining stílusok, akkor létre kell hozni érvényes CSS nyilatkozat blokkokat. A CSS-szelektorok néha bonyolulttá válhatnak az olvasás és az írás során. A CSS-szelektorok megfelelő működésének gyors ellenőrzése az, ha közvetlenül a böngésző fejlesztőeszközeiben keres. Kereshet mind a szöveg, mind a CSS választókat.

Elemállapotok átkapcsolása

bizonyos elemek, például a beviteli mezők fókuszáláskor stílusosak. Más elemek, mint a gombok reagálnak, ha lebeg az egérrel rájuk. A legtöbb böngészőfejlesztő eszköz lehetővé teszi az elemállapotok, például a fókusz vagy a hover váltását. Ha azonban egy DOM hallgató hallgatja ezt az eseményt, akkor az elem állapotának váltása általában nem dob olyan eseményt, amelyet ez a hallgató regisztrál.

következtetés

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.