slik feilsøker DU CSS med nettleserens utviklingsverktøy

CSS er ikke et programmeringsspråk. Likevel, avhengig av hvem du spør, vil fortelle deg å skrive god CSS kan noen ganger være like utfordrende som å skrive i programmeringsspråk som Java eller JavaScript.

i denne artikkelen vil jeg vise deg noen triks hvordan du kan feilsøke CSS-problemer for å løse dem. Som en god webutvikler bør du være kjent med nettleserutviklerverktøy (f. Eks. Fra Google Chrome), så vi vil bruke dem.

Wireframe-modus

Sliter du med layoutproblemer? Kanskje et mer wireframe-lignende utseende vil hjelpe deg å forstå oppsettet ditt bedre. FØLGENDE CSS regelen vil gjøre hvert element har en svart bakgrunn, grønn tekstfarge og en rød ramme. Du kan enten legge til regelen i stilarket eller direkte i nettleseren. Avhengig av brukssaken din, kan du til og med forbedre denne regelen. Ikke glem å deaktivere dette på produksjon!

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

Beregnede stilegenskaper

Noen nettleserutviklingsverktøy (f. eks. Chrome utviklerverktøy) gir deg en visning som viser stilegenskapene som brukes på et bestemt element. Her kan du ogsa se for hver stil eiendom hvor den er satt.

Testing CSS spørringer direkte i nettleseren

Med Mindre du ikke inlining stiler, må du opprette gyldige CSS deklarasjonsblokker. NOEN GANGER, CSS velgere kan bli komplisert å lese og skrive. En rask måte å kontrollere OM CSS velgere fungerer riktig er å søke direkte i nettleseren utviklingsverktøy. Du kan se etter både tekst og CSS velgere.

Veksling element stater

Visse elementer som input felt er stylet når de er fokusert. Andre elementer som knapper reagerer når du svinger med musen på dem. De fleste nettleser utviklingsverktøy lar deg veksle element stater som fokus eller sveve. Men hvis EN DOM-lytter lytter til denne hendelsen, vil veksling av tilstanden til et element vanligvis ikke kaste en hendelse som vil bli registrert av denne lytteren.

Konklusjon

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.