hur felsöka CSS med din webbläsare utvecklingsverktyg

CSS är inte ett programmeringsspråk. Än, beroende på vem du frågar, kommer att berätta att skriva bra CSS kan ibland vara lika utmanande som att skriva i programmeringsspråk som Java eller JavaScript.

i den här artikeln vill jag visa dig några knep hur du kan felsöka CSS-problem för att lösa dem. Som en bra Webbutvecklare bör du vara bekant med webbläsarutvecklarverktyg (t.ex. från Google Chrome) så vi kommer att använda dem.

Wireframe-läge

kämpar med layoutproblem? Kanske kan en mer wireframe-liknande look hjälpa dig att förstå din layout bättre. Följande CSS-regel gör att varje element har en svart bakgrund, grön textfärg och en röd kant. Du kan antingen lägga till regeln i din stilmall eller direkt i din webbläsare. Beroende på ditt användningsfall kan du till och med förbättra denna regel. Glöm inte att inaktivera detta vid produktion!

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

beräknade stilegenskaper

vissa webbläsarutvecklingsverktyg (t. ex. Chrome developer tools) erbjuder dig en vy som visar stilegenskaperna som tillämpas på ett visst element. Här kan du också se för varje stilfastighet där den har ställts in.

testa CSS-frågor direkt i din webbläsare

om du inte är inlining stilar, måste du skapa giltiga CSS-deklarationsblock. Ibland kan CSS-väljare bli komplicerade att läsa och skriva. Ett snabbt sätt att verifiera om CSS-väljare fungerar korrekt är att söka direkt i webbläsarens utvecklingsverktyg. Du kan leta efter både text-och CSS-väljare.

växla elementtillstånd

vissa element som inmatningsfält är utformade när de är fokuserade. Andra element som knappar reagerar när du svävar med musen på dem. De flesta webbläsarutvecklingsverktyg låter dig växla elementtillstånd som focus eller hover. Men om en DOM-lyssnare lyssnar på den här händelsen kommer det vanligtvis inte att kasta en händelse som skulle registreras av den här lyssnaren.

slutsats

Lämna ett svar

Din e-postadress kommer inte publiceras.