4 eenvoudige technieken om snel uw CSS-code te debuggen en te repareren in bijna elke browser

4 eenvoudige technieken om snel uw CSS-code te debuggen en te repareren in bijna elke browser

u hebt de perfecte lay-out voor uw nieuwe en komende website ontworpen. Maar nu het omzetten van al dat mooie Photoshop PSD gelaagde bestand in een pixel perfecte code is het uitdagende deel. Het is niet uitdagend omdat je niet weet hoe je moet programmeren, maar uitdagender omdat verschillende browsers je code anders weergeven, zelfs als je een volledig geldige CSS-code gebruikt om die geweldige semantische HTML5-code weer te geven die je hebt geschreven. Dit is nog frustrerender wanneer de vaststelling van een bug in de ene browser wordt nu een nieuwe bug in een andere browser. Zelfs als dat niet uitdagend is, stel je nu voor dat je bent toegewezen om de code van iemand anders te repareren die overal is. Vaak de tijd dit laatste geval is degene die maakt je trek je haar en zeggen tal van WTFs voordat u volledig begrijpen wat er gaande is in hun code, omdat u waarschijnlijk weet uw hele style sheet uit het hoofd en deze nieuwe code is niet waar dicht bij een codering conventie. Echter, moment van het krijgen van down en vuil met het debuggen dat CSS-code is veel eenvoudiger en minder frustrerend dan voorheen, dankzij deze zeer eenvoudige tools en technieken.

1) Inspecteer Element Tool

inspecteer element is verreweg het beste gereedschap om alles te debuggen CSS. Als u het ontwikkelen van websites, dan heb je de juiste set van web development tools nodig. En gelukkig inspecteren Element is nu geïntegreerd native met alle moderne webbrowsers als onderdeel van hun ontwikkeltools. Deze tool stelt u in staat om het specifieke element in de pagina die u wilt repareren selecteren en onmiddellijk zien welke CSS-regels worden toegepast op dat element dat ervoor zorgen dat uw geselecteerde element op die manier weer te geven. Het enige wat je hoeft te doen is gewoon rechts klikken en selecteer “inspecteer Element” uit het contextmenu.

nu heb je volledige visuele toegang tot alle regels die zijn berekend voor dat element. Als u niet het juiste element hebt geselecteerd, kunt u eenvoudig op de bron klikken en het exacte element aanwijzen dat u wilt diagnosticeren. Zoals je ziet in de screenshot hierboven, nu kun je je CSS regels tweaken. Met behulp van het selectievakje aan de linkerkant van elke CSS-eigenschap kunt u die eigenschap in-of uitschakelen, of zelfs op de eigenschap klikken en de waarde ervan wijzigen, of zelfs op enter-toets drukken en nieuwe regels voor uw element toevoegen. Zelfs het meest verbazingwekkende is hoe gemakkelijk het mogelijk is om een hover-status van een element te debuggen door simpelweg het drop-down menu naast het geselecteerde element te openen en te kiezen :Hover-status. Zoals je kon zien in het rechterpaneel, deze geweldige tool toont u zelfs het style sheet-bestand en het regelnummer van de CSS-regel die wordt uitgevoerd in deze pagina. Bovendien is het begrijpelijker om te begrijpen waarom ons element heeft een 10px boven-en onderkant padding in plaats van 5px, omdat de regel op lijn 1026 van stijl.css van onze media query CSS overschrijft de oude regel op Regel 916 van hetzelfde bestand. Het is zelfs mogelijk om het boxmodel van het geselecteerde element met zijn huidige afmetingen te zien zonder gebruik te maken van een liniaal of meetinstrument van derden. Het hebben van deze schat aan informatie nu maakt onze debugging taak veel gemakkelijker. Stel dat uw style sheet E-mail formulier veld is niet vergelijkbaar met andere invoerelementen en je vraagt je af hoe je dit zou kunnen oplossen. U inspecteert dat element en erachter te komen dat, omdat u gebruik maakt van de nieuwe HTML5 invoerveld types, uw thema ontwerper heeft geen CSS regels voor input, zodat u deze selector toe te voegen aan het typogram.

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

Google Chrome heeft ook vergelijkbare ontwikkeltools die dezelfde functies mogelijk maken. Het is zelfs mogelijk om uw debugging modus te veranderen naar de schermresolutie van een apparaat dat u wilt uw lay-out te testen en uit te vinden hoe uw media queries CSS zich gedraagt onder deze omstandigheden.

deze ontwikkelaarstools hebben zeer krachtige mogelijkheden, zelfs buiten CSS ontwikkeling, zoals DOM inspectie, JavaScript profilering, JavaScript Console, resource monitoring tools, en hele andere set van functies die hun eigen tutorial sectie nodig hebben buiten dit artikel. Zoals je kon zien in de afbeelding hierboven, in Chrome developer tools, is het zelfs mogelijk om te emuleren verschillende browser user agent, of zelfs emuleren touch gebeurtenissen zoals vegen. Met deze tools hoeft u niet eens actief te debuggen uw CSS in de mobiele browser van uw smartphone, althans tot op zekere hoogte.

welke browser developer tools is de beste is een vragen die u zult ontdekken door te experimenteren. Aan het eind van de dag hangt het allemaal af van wat je probeert te bereiken en of die toolset je in staat stelt om je uiteindelijke doel te bereiken. Persoonlijk gebruik ik al deze tools in mijn voordeel. Elk hebben iets dat ik graag en nuttig vinden wanneer Ik wil mijn code debuggen. Bijvoorbeeld vind ik de kleine vierkante kleurweergave van de hex kleuren naast de CSS kleureigenschappen een of andere manier nuttig, ook al kan ik de rgb kleur in mijn hoofd verwerken en krijg benaderende kleur gehemelte visualisatie, deze kleine verschillen maken me afwisselend tussen deze ontwikkelaarstools.

Firebug

Firebug was een van de eerste tools die voorzien inspector functie. Het is een van de meest populaire web development tools, met bijna 3 miljoen gemiddelde dagelijkse gebruikers. Vanaf Dit schrijven, Firefox CSS debugging tools zijn voldoende genoeg voor mij om Firebug niet te gebruiken, maar voor JavaScript debugging in Firefox gebruik ik nog steeds Firebug.

bang voor IE7? Doe dat niet meer.

je zou verbaasd zijn, maar Internet Explorer heeft zelfs inspecteer Element (Ctrl+B) functie in hun ontwikkeltools (F12). Hoewel niet zo vriendelijk als andere browsers ‘ ontwikkeltools, nog steeds deze functie Gebouwd in Internet Explorer 9 is zeer nuttig voor het testen van uw lay-outs in IE7 en IE8 geëmuleerde modus. Terug in de dagen dat geen van deze ontwikkelaarstools beschikbaar waren voor het debuggen van oude IE browsers, deze tweede techniek was meestal erg handig.

2) Debug in stijl

zo goed als inspecteer Element is, soms heeft u geen toegang tot dat gereedschap, zoals mobiele browsers, of u wilt de opmaak van enkele elementen in de pagina aanpassen in plaats van slechts een specifieke. Ik hou ervan om grenzen te kennen van het element dat ik styling, dus ik weet of er overflows, of zwevende problemen, of etc… om die reden voeg ik een heldere en merkbare achtergrondkleur toe aan het actieve element dat ik styling en neem de achtergrondkleur zodra de styling is gedaan. Soms ga ik heen en weer om deze elementen aan te passen, dus ik verplaats de foutopsporingscode naar het einde van mijn stylesheet en becommentarieer het en verwijder het als ik het weer nodig heb. Op deze manier kan ik snel schakelen debugging modus en zien hoe elk element wordt geplaatst op het scherm.

wat resulteert in …

voor dit voorbeeld heb ik zojuist debug code toegevoegd aan de hoofdstructuur blok items in mijn pagina. Nu kan ik vertellen waar elke post begint en hoeveel kloof er is tussen elke post of widget item in mijn zijbalk, en als Ik wil een kloof tussen de zijbalk en de belangrijkste inhoud toe te voegen, Ik kan visueel zien in heldere kleuren.

het tegenovergestelde hiervan is ook mogelijk, door een reeks debugregels te definiëren en die klasse toe te voegen aan elk item dat we willen zien. Bijvoorbeeld, hierboven heb ik een nieuwe klasse genaamd debug gedefinieerd met de volgende code.

.debug{ border:1px solid red; }

en wanneer ik een element wil debuggen, voeg ik gewoon debug class toe aan dat element.

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

3) Debug CSS met behulp van JavaScript

deze techniek is zeer vergelijkbaar met hierboven, maar soms om een aantal vreemde redenen gebeurt het dat de bovenstaande situatie niet haalbaar is. Dit is een stukje jQuery code die ons te hulp komt door het toepassen van de debug klasse foo element, of zelfs het toevoegen van CSS direct aan de bar element in dit geval.

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

deze situatie kan zeer zelden voorkomen, maar ik weet dat ik deze techniek in het verleden heb gebruikt, dus het is goed om te weten.

4) Maak kennis met de Cascade

sommige CSS-problemen komen zo vaak voor, zoals de clearing floats, dat je één keer in die val zal vallen, en de volgende keer dat je iets dergelijks tegenkomt, weet je wat de oorzaak van het probleem is en hoe je het kunt oplossen. In het algemeen, de meeste van de CSS problemen zijn gemakkelijk op te lossen als je weet hoe de CSS regels overschrijven elkaar. Bijvoorbeeld, meer specifieke selectors zullen meer algemene degenen overschrijven, of ID selector overschrijft klasse selector, of !important declaratie heeft voorrang op een normale declaratie. Het leren kennen van de Cascade zal u helpen uw Cascading Style Sheets code sneller op te lossen.

hier is een voorbeeld rechtstreeks uit W3C spec over hoe selectorspecificiteit werkt.

enkele voorbeelden:

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

in het bovenstaande voorbeeld zou de kleur van het P-element groen zijn. De declaratie in het attribuut “stijl” zal de declaratie in het element stijl overschrijven vanwege de trapsgewijze regel 3, omdat het een hogere specificiteit heeft. Als je denkt dat dit voorbeeld moeilijk te begrijpen is, controleer dan dit artikel op CSS volgorde van voorrang.

eindnoten

het bereiken van perfecte pixelresultaten is moeilijk door verschillende renderings door verschillende browsers. Sommige oude browsers ondersteunen geen volledige CSS3 of HTML5, dus controleer HTML5Please community project om te zien of de syntaxis die u probeert te gebruiken wordt ondersteund door de meerderheid van de browsers. U kunt echter optioneel fallbacks of polyfills gebruiken om ontbrekende functies te bieden voor browsers die geen volledige CSS3-of HTML5-implementatie ondersteunen.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.