nl.hideout-lastation.com
Inspecteer het doosmodel van een element eenvoudig met XRAY
Heb je ooit de exacte grootte van een bepaald element in een webpagina willen weten, zoals de opvulling, de marge, de positie enzovoort? Meestal kun je de info krijgen met behulp van een webinspectie-tool; de meeste browsers hebben ingebouwde hulpmiddelen om u te helpen dit te doen. Als alternatief kunt u Firebug gebruiken, wat ook een vrij populaire webtool is. Wanneer de zaken echter ingewikkeld worden, moet je misschien terugvallen op een tool als XRAY.
XRAY is een gratis hulpmiddel voor meerdere browsers waarmee u het boxmodel voor elk element van een webpagina rechtstreeks in uw browser kunt bekijken. In tegenstelling tot andere gecompliceerde webcontroletools, richt XRAY zich op het geven van volledige informatie over het doosmodel van het element.
Ermee beginnen
XRAY is een boekenlegger. Om het te gebruiken, sleept u XRAY naar uw bladwijzerbalk van uw favoriete browser. XRAY is beschikbaar voor IE6 +, Webkit- en Mozilla-gebaseerde browsers zoals Safari en Firefox.
Net als andere bookmarklets, kan XRAY niet werken als SSL-protocol (HTTPS) wordt toegepast .
Inspecterende elementen
Als u met de inspectie wilt beginnen, opent u de webpagina die u wilt inspecteren, controleert u of deze volledig is geladen en klikt u op de XRAY-bladwijzer. U krijgt een nieuw pop-upvak in uw browser. In dit vak wordt alle informatie weergegeven over het element dat u hebt geselecteerd.
Laten we mijn inspectie van de XRAY-startpagina als voorbeeld gebruiken. Stel dat ik de doosmodelinformatie van het volgende element wil weten.
Ik klik op XRAY in de bladwijzerbalk en selecteer het element. Dit geeft mij de naam, id, klasse, hiërarchie, positie, opvulling, rand en marge van het element .
Als u het vak wilt sluiten, drukt u op de X-knop in de rechterbovenhoek van het vak of ververs u uw pagina om het hulpprogramma te sluiten.
Laatste gedachte
Afgezien van zijn geavanceerde functie voor het inspecteren van doosmodellen, biedt XRAY u niet de informatie die algemeen beschikbaar is in andere webinspectietools, zoals de stijl of DOM . Hoe dan ook, het is nog steeds een zeer nuttige en eenvoudig te gebruiken tool voor dagelijks gebruik.
Cutestrap is je kleine alternatief voor Bootstrap
Niet elk project heeft een groot raamwerk nodig . Zowel Foundation als Bootstrap zijn fantastische breed ondersteunde frontend frameworks.Soms heeft een webproject gewoon iets simpels nodig . En dat is precies wat Cutestrap levert.Cutestrap beschrijft zichzelf als "iets tussen normalize.css en een volledig opgeblazen raamwerk"
Automatiseren: n-de-kind Selectors met Family.scss Mixins
Sass is de beste manier om moderne CSS te beheren en mixin bibliotheken kunnen zelfs meer tijd besparen tijdens de ontwikkelingscyclus.Deze mixins werken als geautomatiseerde codes of functies die u in uw belangrijkste Sass-bestanden aanroept. Sommige mixins zijn algemener, andere zijn heel specifiek, zoals de Family
