4 enkla tekniker för att snabbt felsöka och fixa din CSS-kod i nästan alla webbläsare

4 enkla tekniker för att snabbt felsöka och fixa din CSS-kod i nästan alla webbläsare

du har utformat den perfekta layouten för din nya och kommande webbplats. Men nu konverterar all den vackra Photoshop PSD-skiktade filen till en pixel perfekt kod är den utmanande delen. Det är inte utmanande eftersom du inte vet hur man kodar, men mer utmanande eftersom olika webbläsare gör din kod annorlunda, även när du använder en helt giltig CSS-kod för att visa den fantastiska semantiska HTML5-koden du har skrivit. Detta är ännu mer frustrerande när du fixar ett fel i en webbläsare blir nu ett nytt fel i en annan webbläsare. Även om det inte är utmanande, föreställ dig nu att du är tilldelad att fixa någon annans kod som är överallt. Ofta är det här sista fallet det som gör att du drar håret och säger många WTF: er innan du helt förstår vad som händer i deras kod, för att du förmodligen känner till hela ditt stilark utantill och den här nya koden är ingen där nära någon kodningskonvention. Men ögonblick att komma ner och smutsiga med felsökning att CSS-kod är mycket enklare och mindre frustrerande än tidigare, tack vare dessa mycket enkla verktyg och tekniker.

1) Inspektera Element Tool

Inspektera element överlägset är det bästa verktyget för att starta felsökning något CSS. Om du utvecklar webbplatser behöver du rätt uppsättning webbutvecklingsverktyg. Och lyckligtvis är Inspect Element nu integrerat med alla moderna webbläsare som en del av deras utvecklarverktyg. Med det här verktyget kan du välja det specifika elementet på sidan som du vill fixa och omedelbart se vilka CSS-regler som tillämpas på det elementet som gör att ditt valda element visas på det sättet. Allt du behöver göra är att bara högerklicka och välj ”Inspektera Element” från snabbmenyn.

nu har du full visuell tillgång till alla regler som beräknas för det elementet. Om du inte har valt rätt element kan du helt enkelt klicka på källan och peka på det exakta elementet du vill diagnostisera. Som du ser på skärmdumpen ovan kan du nu justera dina CSS-regler. Med hjälp av kryssrutan till vänster om varje CSS-egenskap kan du växla den egenskapen, eller till och med klicka på egenskapen och ändra dess värde, eller till och med trycka på enter-tangenten och lägga till nya regler för ditt element. Även mest fantastiska är hur lätt det är möjligt att felsöka en sväva tillstånd av ett element genom att helt enkelt öppna rullgardinsmenyn bredvid det valda elementet och välj :sväva tillstånd. Som du kan se i den högra panelen visar detta fantastiska verktyg till och med stilarkfilen och radnumret för CSS-regeln som körs på den här sidan. Dessutom är det mer begripligt att förstå varför vårt element har en 10px topp och botten stoppning istället för 5px, eftersom regeln på linje 1026 av stil.css i vår mediefråga CSS skriver över den gamla regeln på rad 916 i samma fil. Det är till och med möjligt att se boxmodellen för det valda elementet med dess nuvarande dimensioner utan att använda en tredjepartslinjal eller mätverktyg. Att ha denna mängd information gör nu vårt felsökningsjobb mycket enklare. Antag att ditt formulärfält för formatmall för e-post inte liknar andra inmatningselement och du undrar hur du kan lösa detta. Du inspekterar det elementet och upptäcker att eftersom du använder de nya HTML5-inmatningsfälttyperna har din temadesigner inte inkluderat några CSS-regler för input så du lägger till den här väljaren i stilarket.

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

Google Chrome har också liknande utvecklarverktyg som möjliggör samma funktioner. Det är till och med möjligt att ändra ditt felsökningsläge till skärmupplösningen på en enhet som du vill testa din layout och ta reda på hur dina mediefrågor CSS beter sig under dessa förhållanden.

dessa utvecklarverktyg har mycket kraftfulla funktioner även bortom CSS-utveckling som DOM-inspektion, JavaScript-profilering, JavaScript-konsol, resursövervakningsverktyg och helt andra funktioner som behöver sin egen handledning utöver den här artikeln. Som du kan se på bilden ovan, i Chrome developer tools, är det till och med möjligt att emulera olika webbläsaranvändaragenter eller till och med emulera beröringshändelser som svepning. Med dessa verktyg behöver du inte ens aktivt felsöka din CSS i din smartphones mobila webbläsare, åtminstone till viss del.

vilken webbläsares utvecklarverktyg är bäst är en fråga som du kommer att ta reda på genom att experimentera. I slutet av dagen beror allt på vad du försöker uppnå och om det här verktyget gör att du kan komma till ditt slutliga mål. Jag använder personligen alla dessa verktyg till min fördel. Var och en har något som jag gillar och tycker är till hjälp när jag vill felsöka min kod. Till exempel hittar jag den lilla fyrkantiga färgrepresentationen av hex-färgerna bredvid CSS-färgegenskaperna på något sätt användbar, även om jag kan bearbeta RGB-färgen i mitt huvud och få ungefärlig visualisering av färggom, dessa små skillnader gör att jag växlar mellan dessa utvecklarverktyg.

Firebug

Firebug var ett av de första verktygen som gav inspector-funktionen. Det är ett av de mest populära webbutvecklingsverktygen, med nästan 3 miljoner genomsnittliga dagliga användare. När detta skrivs är Firefox CSS-felsökningsverktyg tillräckliga för att jag inte ska använda Firebug, men för JavaScript-felsökning i Firefox använder jag fortfarande Firebug.

rädd för IE7? Var inte längre

du kan bli förvånad men Internet Explorer har till och med Inspect Element (Ctrl+B) – funktionen i deras utvecklarverktyg (F12). Även om det inte är lika vänligt som andra webbläsares utvecklarverktyg, är den här funktionen inbyggd i Internet Explorer 9 till stor hjälp för att testa dina layouter i IE7 och IE8 emulerat läge. Tillbaka i de dagar då ingen av dessa utvecklarverktyg var tillgängliga för felsökning av gamla IE-webbläsare, var denna andra teknik vanligtvis mycket praktisk.

2) Debug i stil

så bra som Inspect Element är, ibland har du inte tillgång till det verktyget, till exempel mobila webbläsare, eller du vill justera styling av några element på sidan istället för bara en specifik. Jag älskar att känna till gränserna för elementet jag stylar, så jag vet om det finns några överflöden eller flytande problem eller etc… av den anledningen lägger jag till en ljus och märkbar bakgrundsfärg till det aktiva elementet jag stylar och tar bakgrundsfärgen ut när stylingen är klar. Ibland går jag fram och tillbaka och justerar dessa element, så jag flyttar bara felsökningskoden till slutet av mitt stilark och kommenterar det och avkommenterar det när jag behöver det igen. På så sätt kan jag snabbt växla felsökningsläge och se hur varje element är placerat på skärmen.

vilket resulterar i …

för det här exemplet har jag bara lagt till felsökningskod till huvudstrukturblockobjekten på min sida. Nu kan jag berätta var varje inlägg börjar och hur mycket gap det finns mellan varje inlägg eller widget-objekt i mitt sidofält, och om jag vill lägga till ett mellanrum mellan sidofältet och huvudinnehållet kan jag visuellt se det i ljusa färger.

motsatsen till detta är också möjligt genom att definiera en serie felsökningsregler och lägga till den klassen till vilket objekt vi vill se. Till exempel ovan har jag definierat en ny klass som heter debug med följande kod.

.debug{ border:1px solid red; }

och när jag vill felsöka något element, lägger jag helt enkelt till felsökningsklass till det elementet.

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

3) felsöka CSS med JavaScript

denna teknik liknar mycket ovan, men ibland av några konstiga skäl händer det att ovanstående situation inte är genomförbar. Detta är en bit av jQuery kod som kommer till vår hjälp genom att tillämpa debug klassen foo element, eller ens lägga CSS direkt till bar elementet i detta fall.

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

denna situation kan hända mycket sällan, men jag vet att jag har använt den här tekniken tidigare, så det är bra att veta.

4) Lär känna kaskaden

vissa CSS-problem är så vanliga som clearingflottorna att du kommer att falla i den fällan en gång, och nästa gång du stöter på något liknande vet du vad som orsakade problemet och hur du åtgärdar det. I allmänhet är de flesta CSS-problem lätta att lösa om du vet hur CSS-reglerna åsidosätter varandra. Till exempel kommer mer specifika väljare att åsidosätta mer allmänna, eller ID-väljare åsidosätter klassväljare, eller !important deklaration har företräde framför en normal deklaration. Att lära känna kaskaden hjälper dig att lösa din Cascading Style Sheets-kod snabbare.

här är ett exempel direkt från W3C spec på hur selector specificitet fungerar.

några exempel:

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

i ovanstående exempel skulle färgen på p-elementet vara grön. Deklarationen i attributet ”stil” kommer att åsidosätta den i STILELEMENTET på grund av kaskadregel 3, eftersom den har en högre specificitet. Om du tycker att det här exemplet är svårt att förstå, kolla den här artikeln om CSS prioritetsordning.

slutliga anteckningar

att uppnå pixelperfekta resultat är svårt på grund av olika återgivningar av olika webbläsare. Vissa gamla webbläsare stöder inte full CSS3 eller HTML5, så kolla html5please community project för att se om syntaxen du försöker använda stöds av majoriteten av webbläsarna. Du kan dock eventuellt använda fallbacks eller polyfills för att ge saknade funktioner för webbläsare som inte stöder fullständig CSS3-eller HTML5-implementering.

Lämna ett svar

Din e-postadress kommer inte publiceras.