4 enkle teknikker for raskt å feilsøke OG fikse CSS-koden i nesten hvilken som helst nettleser

4 enkle teknikker for raskt å feilsøke OG fikse CSS-koden i nesten hvilken som helst nettleser

Du har designet det perfekte oppsettet for ditt nye og kommende nettsted. Men nå konvertere alt det vakre Photoshop PSD lagdelt fil til en pixel perfekt kode er den utfordrende delen. Det er ikke utfordrende fordi du ikke vet hvordan du skal kode, men mer utfordrende fordi forskjellige nettlesere gjør koden din annerledes, selv når du bruker en helt gyldig CSS-kode for å vise den fantastiske semantiske HTML5-koden du har skrevet. Dette er enda mer frustrerende når fikse en bug i en nettleser nå blir en ny bug i en annen nettleser. Selv om det ikke er utfordrende, forestill deg nå at du er tildelt for å fikse andres kode som er over alt. Ofte tid denne siste saken er den som gjør at du trekker håret og si mange WTFs før du helt forstår hva som skjer i koden sin, fordi du sikkert vet hele stilark utenat, og denne nye koden er ikke hvor nær noen koding konvensjonen. Men øyeblikk av å komme ned og skitne med debugging AT CSS-koden er mye enklere og mindre frustrerende enn før, takket være disse svært enkle verktøy og teknikker.

1) Inspiser Element Tool

Inspiser element langt er det beste verktøyet for å starte debugging NOE CSS. Hvis du utvikler nettsteder, trenger du riktig sett med webutviklingsverktøy. Og Heldigvis Inspect Element er nå integrert innfødt med alle moderne nettlesere som en del av sine utviklerverktøy. Dette verktøyet lar deg velge det spesifikke elementet på siden du vil fikse, og umiddelbart se HVILKE CSS-regler som brukes på det elementet som forårsaker at det valgte elementet vises på den måten. Alt du trenger å gjøre er bare høyreklikk og velg «Inspiser Element» fra kontekstmenyen.

Nå har du full visuell tilgang til alle reglene som er beregnet for det elementet. Hvis du ikke har valgt riktig element, kan du bare klikke på kilden og peke på det nøyaktige elementet du vil diagnostisere. Som du ser på skjermbildet ovenfor, kan du nå justere CSS-reglene dine. Ved å bruke avkrysningsruten på venstre side av HVER CSS-egenskap kan du bytte den egenskapen, eller til og med klikke på egenskapen og endre verdien, eller til og med trykke enter-tasten og legge til nye regler for elementet ditt. Selv mest fantastiske er hvor lett det er mulig å feilsøke en hover tilstand av et element ved å åpne rullegardinmenyen ved siden av det valgte elementet og velg: hover tilstand . Som du kan se i det høyre panelet, viser dette fantastiske verktøyet selv stilarkfilen og linjenummeret TIL CSS-regelen som blir utført på denne siden. Videre er det mer forståelig å forstå hvorfor vårt element har en 10px topp og bunn polstring i stedet for 5px, fordi regelen på linje 1026 av stil.css av vår media query CSS overskriver den gamle regelen på linje 916 av samme fil. Det er også mulig å se boksmodellen til det valgte elementet med sine nåværende dimensjoner uten å bruke en tredjeparts linjal eller måleverktøy. Å ha denne mengden informasjon gjør nå vår feilsøkingsjobb mye enklere. Anta at stilark e-skjemafeltet ikke ligner på andre inndataelementer, og du lurer på hvordan du kan løse dette. Du inspiserer dette elementet og finner ut at fordi du bruker de nye HTML5-inndatafelttypene, har temadesigneren ikke tatt MED NOEN CSS-regler for input, så du legger til denne velgeren i stilarket.

input,input{ border: 1px solid #ccc;}

Google Chrome har også lignende utviklerverktøy som aktiverer de samme funksjonene. Det er også mulig å endre debugging modus til skjermoppløsningen på en enhet som du ønsker å teste oppsettet og finne ut hvordan media spørringer CSS oppfører seg under disse forholdene.

disse utviklerverktøyene har svært kraftige evner selv utover CSS-utvikling som DOM-inspeksjon, JavaScript-profilering, JavaScript-Konsoll, ressursovervåkingsverktøy og helt annet sett med funksjoner som trenger sin egen opplæringsdel utover denne artikkelen. Som du kan se på bildet ovenfor, I Chrome utviklerverktøy, er det også mulig å etterligne annen nettleser brukeragent, eller til og med etterligne berøringshendelser som swiping. Med disse verktøyene trenger du ikke engang å feilsøke CSS i smarttelefonens mobile nettleser, i hvert fall til en viss grad.

hvilken nettleser utviklerverktøy er best er et spørsmål som du vil finne ut ved å eksperimentere. På slutten av dagen avhenger alt av hva du prøver å oppnå, og hvis det verktøysettet lar deg komme til ditt endelige mål. Jeg bruker alle disse verktøyene til min fordel. Hver har noe jeg liker og finner nyttig når jeg vil feilsøke koden min. For eksempel finner jeg den lille firkantede fargepresentasjonen av hex-fargene ved SIDEN AV CSS-fargeegenskapene på en eller annen måte nyttig, selv om jeg kan behandle RGB-fargen i hodet mitt og få omtrentlig fargegalentvisualisering, gjør disse små forskjellene meg til å skifte mellom disse utviklerverktøyene.

Firebug

Firebug var et av de første verktøyene som ga inspector-funksjonen. Det er et av de mest populære webutviklingsverktøyene, med nesten 3 millioner gjennomsnittlige daglige brukere. I skrivende stund, FIREFOX CSS debugging verktøy er tilstrekkelig nok for meg å ikke bruke Firebug, men For JavaScript debugging I Firefox jeg fortsatt bruker Firebug.

Redd FOR IE7? Ikke vær lenger

Du kan bli overrasket, Men Internet Explorer har Selv Inspect Element (Ctrl+B) – funksjonen i utviklerverktøyene (F12). Selv om ikke så vennlig som andre nettlesere utviklerverktøy, fortsatt denne funksjonen bygget I Internet Explorer 9 er svært nyttig for å teste oppsett i ie7 og ie8 emulert modus. Tilbake i dagene da ingen av disse utviklerverktøyene var tilgjengelige for feilsøking av GAMLE IE-nettlesere, var denne andre teknikken vanligvis veldig nyttig.

2) Feilsøking I Stil

Så godt Som Inspect Element er, noen ganger har du heller ikke tilgang til det verktøyet, for eksempel mobile nettlesere, eller du vil justere styling av par elementer på siden i stedet for bare en bestemt. Jeg elsker å vite grensene for elementet jeg styling, så jeg vet om det er noen overløp, eller flytende problemer, eller etc … Av den grunn legger jeg en lys og merkbar bakgrunnsfarge til det aktive elementet jeg styling og ta bakgrunnsfargen ut når styling er ferdig. Noen ganger går jeg frem og tilbake for å justere disse elementene, så jeg flytter bare feilsøkingskoden til slutten av stilarket mitt og kommenterer det, og fjerner det når jeg trenger det igjen. På denne måten kan jeg raskt bytte feilsøkingsmodus og se hvordan hvert element er plassert på skjermen.

som resulterer i …

For dette eksemplet har jeg nettopp lagt til feilsøkingskode til hovedstrukturblokkelementene på siden min. Nå kan jeg fortelle hvor hvert innlegg starter og hvor mye gap det er mellom hvert innlegg eller widgetelement i sidefeltet, og hvis jeg vil legge til et gap mellom sidepanelet og hovedinnholdet, kan jeg visuelt se det i lyse farger.

det motsatte av dette er også mulig, ved å definere en rekke feilsøkingsregler, og legge til den klassen til det elementet vi vil se. For eksempel, ovenfor har jeg definert en ny klasse kalt debug med følgende kode.

.debug{ border:1px solid red; }

og når jeg vil feilsøke et element, legger jeg bare debug-klasse til det elementet.

<div class="foo debug">Div element with foo and debug classes</div>

3) Debug CSS ved Hjelp Av JavaScript

denne teknikken er veldig lik ovenfor, men noen ganger av noen merkelige grunner skjer det at situasjonen ovenfor ikke er mulig. Dette er et stykke jquery-kode som kommer til vår hjelp ved å bruke debug-klassen til foo-elementet, eller til OG med legge CSS direkte til barelementet i dette tilfellet.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

denne situasjonen kan skje svært sjelden,men jeg vet at jeg har brukt denne teknikken tidligere, så det er godt å vite.

4) Bli kjent Med Cascade

NOEN CSS problemer er så vanlig som clearing flyter som du vil falle i den fellen en gang, og neste gang du støter på noe lignende, vet du hva som forårsaket problemet og hvordan du løser det. GENERELT ER DE FLESTE CSS-problemene enkle å løse hvis DU vet hvordan CSS-reglene overstyrer hverandre. For eksempel vil mer spesifikke velgere overstyre mer generelle, ELLER ID-velger overstyrer klassevelger, eller !important – deklarasjon har forrang over en vanlig deklarasjon. Bli kjent Med Cascade vil hjelpe deg med å løse Din Gjennomgripende Stilark kode raskere.

Her er et eksempel rett FRA W3C spec på hvordan selector spesifisitet fungerer.

noen eksempler:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

i eksemplet ovenfor vil fargen På p-elementet være grønn. Erklæringen i» stil » – attributtet vil overstyre DEN I STILELEMENTET på grunn av cascading rule 3, siden den har en høyere spesifisitet. Hvis du tror dette eksemplet er vanskelig å forstå, sjekk denne artikkelen OM CSS – Rekkefølge.

Endelige notater

Å Oppnå piksel perfekte resultater er vanskelig på grunn av forskjellige gjengivelser av forskjellige nettlesere. Noen gamle nettlesere støtter ikke full CSS3 ELLER HTML5, så sjekk HTML5Please community project for å se om syntaksen du prøver å bruke støttes av flertallet av nettleserne. Du kan imidlertid eventuelt bruke fallbacks eller polyfills å gi manglende funksjoner for nettlesere som ikke støtter full css3 eller HTML5 implementering.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.