sådan debugges CSS med dine udviklingsværktøjer

CSS er ikke et programmeringssprog. Men afhængigt af hvem du spørger, vil fortælle dig at skrive god CSS kan nogle gange være så udfordrende som at skrive i programmeringssprog som Java eller JavaScript.

i denne artikel vil jeg vise dig et par tricks, hvordan du kan debug CSS-problemer for at løse dem. Fra Google Chrome), så vi vil bruge dem.

Rammetilstand

kæmper med layoutproblemer? Måske vil et mere rammelignende udseende hjælpe dig med at forstå dit layout bedre. Følgende CSS-regel får hvert element til at have en sort baggrund, grøn tekstfarve og en rød kant. Du kan enten tilføje reglen i dit stilark eller direkte i din bro.ser. Afhængigt af din brugssag kan du endda forbedre denne regel. Glem ikke at deaktivere dette ved produktion!

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

beregnet stil egenskaber

nogle udviklingsværktøjer (f. eks. Chrome developer tools) tilbyder dig en visning, der viser de stilegenskaber, der anvendes på et bestemt element. Her kan du også se for hver stilegenskab, hvor den er indstillet.

test af CSS-forespørgsler direkte i din bro. ser

medmindre du ikke indliner stilarter, skal du oprette gyldige CSS-deklarationsblokke. Nogle gange kan CSS-vælgere blive komplicerede at læse og skrive. En hurtig måde at kontrollere, om CSS-vælgere fungerer korrekt, er at søge direkte i dine bro.serudviklingsværktøjer. Du kan søge efter både tekst-og CSS-vælgere.

Skiftelementtilstande

visse elementer som inputfelter er stylet, når de er fokuserede. Andre elementer som knapper reagerer, når du svæver med musen på dem. De fleste bro.ser udviklingsværktøjer giver dig mulighed for at skifte element stater som fokus eller hover. Imidlertid, hvis en DOM-lytter lytter til denne begivenhed, så skifter tilstanden af et element normalt ikke en begivenhed, som ville blive registreret af denne lytter.

konklusion

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.