kuinka CSS: ää debugataan selaimen kehitystyökaluilla

CSS ei ole ohjelmointikieli. Silti, riippuen siitä, keneltä kysyt, kertoo hyvän CSS: n kirjoittaminen voi joskus olla yhtä haastavaa kuin ohjelmointikielillä, kuten Java tai JavaScript.

tässä artikkelissa haluan näyttää muutaman kikan, miten voit debugata CSS-ongelmia niiden ratkaisemiseksi. Hyvänä web-kehittäjänä sinun pitäisi tuntea selaimen Kehittäjän työkalut (esim. Google Chromesta), joten käytämme niitä.

Wireframe mode

kamppailee layout-ongelmien kanssa? Ehkä enemmän wireframe-tyyppinen ulkoasu auttaa sinua ymmärtämään asettelua paremmin. Seuraava CSS-sääntö tekee jokaisesta elementistä mustan taustan, vihreän tekstin värin ja punaisen reunan. Voit lisätä säännön joko tyylisivullesi tai suoraan selaimeesi. Käyttötapauksesta riippuen voit jopa parantaa tätä sääntöä. Älä unohda poistaa tämän tuotannon!

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

Tietokonetyylin ominaisuudet

jotkut selaimen kehitystyökalut (esim. Chrome developer tools) tarjoaa sinulle näkymän, joka näyttää tyyliominaisuudet, joita sovelletaan tiettyyn elementtiin. Täällä, voit myös nähdä kunkin tyylin omaisuutta, jossa se on asetettu.

Testing CSS kyselyt suoraan selaimessasi

ellet ole inline tyylejä, sinun täytyy luoda voimassa CSS ilmoitus lohkot. Joskus CSS-valitsimet voivat olla monimutkaisia lukea ja kirjoittaa. Nopea tapa tarkistaa, toimivatko CSS-valitsimet oikein, on etsiä suoraan selaimesi kehitystyökaluista. Voit etsiä sekä teksti-että CSS-valitsimia.

toggling element states

tietyt elementit, kuten syöttökentät, stailataan, kun ne tarkennetaan. Muut elementit, kuten painikkeet reagoivat, kun viet hiirellä niitä. Useimpien selainten kehitystyökalujen avulla voit vaihtaa elementtitiloja, kuten tarkennus tai hover. Kuitenkin, jos DOM kuuntelija kuuntelee tätä tapahtumaa sitten toggling tilan elementti ei yleensä heittää tapahtuma, joka olisi rekisteröity tämän kuuntelija.

johtopäätös

Vastaa

Sähköpostiosoitettasi ei julkaista.