CSS debuggen met uw browser ontwikkeltools

CSS is geen programmeertaal. Toch, afhankelijk van wie je vraagt, zal je vertellen het schrijven van goede CSS kan soms zo uitdagend zijn als het schrijven in programmeertalen zoals Java of JavaScript.

In dit artikel wil ik u een paar trucs laten zien hoe u CSS-problemen kunt debuggen om ze op te lossen. Als een goede webontwikkelaar, moet u bekend zijn met browser ontwikkeltools (bijvoorbeeld van Google Chrome), dus we zullen deze gebruiken.

Wireframe mode

heeft u problemen met de opmaak? Misschien zal een meer wireframe-achtige look u helpen om uw lay-out beter te begrijpen. De volgende CSS-regel zorgt ervoor dat elk element een zwarte achtergrond, groene tekstkleur en een rode rand heeft. U kunt de regel in uw stylesheet of direct in uw browser toevoegen. Afhankelijk van uw use case kunt u deze regel zelfs verbeteren. Vergeet niet om dit uit te schakelen tijdens de productie!

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

berekende stijleigenschappen

sommige browserontwikkelingsprogramma ‘ s (bijv. Chrome developer tools) bieden u een weergave van de stijl eigenschappen die worden toegepast op een bepaald element. Hier kunt u ook zien voor elke stijl eigenschap waar het is ingesteld.

CSS-query ‘ s rechtstreeks testen in uw browser

tenzij u geen stijlen inline, moet u geldige CSS declaratieblokken aanmaken. Soms kunnen CSS-selectors ingewikkeld worden om te lezen en te schrijven. Een snelle manier om te controleren of CSS selectors correct werken is om direct te zoeken in uw browser development tools. U kunt zoeken naar zowel tekst als CSS selectors.

elementtoestanden

bepaalde elementen, zoals invoervelden, worden opgemaakt wanneer ze gefocust zijn. Andere elementen zoals knoppen reageren wanneer u met uw muis op hen beweegt. De meeste browser development tools kunt u element staten zoals focus of zweven schakelen. Echter, als een DOM-luisteraar luistert naar deze gebeurtenis, dan zal het omschakelen van de status van een element meestal niet een gebeurtenis die zou worden geregistreerd door deze luisteraar gooien.

conclusie

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.