Handige tool: Met Inspect Element tijdelijk je CSS aanpassen

inspect-element-css

Toen ik voor het eerst HTML en CSS zag was werkelijk alles onduidelijk. Ik snapte er helemaal niets van. Door wat tutorials te lezen maar vooral door te oefenen en proberen (en falen, dat vooral!) kreeg ik vrij snel de basis onder de knie. Dit is inmiddels zo’n 15 jaar geleden, misschien zelfs langer dan dat… Je begrijpt dat toentertijd niet veel informatie beschikbaar was, in ieder geval niet zoals nu. Tegenwoordig wordt het allemaal een stuk makkelijker gemaakt om een eigen website te maken. Tutorials genoeg te vinden op internet maar ook handige hulpmiddelen waar je op een gegeven moment niet meer zonder kan.

Één tool die ik dagelijks gebruik is Inspect Element, dit programma zit standaard in de laatste versies van alle browsers. Mocht je Firefox gebruiken dan raad ik aan om de extensie Firebug te installeren omdat deze net makkelijker en overzichtelijker werkt.

Waarom is Inspect Element nou zo handig? Het laat je namelijk het framework van een website zien inclusief alle bijbehorende styling! Zo kan je heel gemakkelijk fouten opsporen, codes van andere websites bekijken om ervan te leren (dus niet jatten!) maar ook tijdelijk iets aanpassen op je eigen website om het resultaat te kunnen bekijken. Zo pas ik wel eens de kleur aan om te zien of dat beter staat, of ga ik spelen met lettertypes, achtergronden of iets anders wat er op dat moment in mij opkomt. Ik verander dus niets definitief, het is puur om te testen en als ik het wel mooi vind dan weet ik wat er aangepast moet worden en kan ik dit vervolgens in de stylesheet aanpassen.

Inspect Element is heel handig om te achterhalen of een DIV nu een ID of CLASS attribuut heeft en hoe deze heet. Ik heb laatst een artikel geschreven over wat een DIV, ID en CLASS precies is. Door middel van Inspect Element kan je zo heel snel het juiste attribuut opsporen dat je nodig hebt, deze selecteren en styling toevoegen. Overigens kan je met Inspect Element ook tijdelijk je styling aanpassen. Als je het eindresultaat mooi vindt, kopieer dan wat je net aangepast hebt en plaats het in je stylesheet. Handig toch? Scheelt een hoop op F5 klikken om te refreshen en kijken wat het resultaat is.

element-inspecteren
Noot: Ik heb overigens ook de extensie Firebug Lite vandaar dat ik twee opties heb om een element te inspecteren.

Voorbeeld: Ik zou heel graag de achtergrondkleur van mijn widget titels willen veranderen. Ik selecteer het element, klik op de rechtermuisknop en selecteer Element Inspecteren. Vervolgens krijg ik links het HTML framework van mijn website te zien. Rechts de styling van mijn widget titel.

Ik pas vervolgens de achtergrond kleur aan en zie gelijk het resultaat. Leuk he?

background-color-change

Ik kan zo eindeloos kijken en proberen zonder dat ik iets verander aan mijn website. Zo kan ik de gehele look veranderen en gelijk kijken wat dat oplevert. Ideaal! Ik kan echt niet meer zonder. En jij? Lijkt dit programma jou wat?

Geef een reactie

2 reacties

  1. Mariska says:

    Hey die kende ik nog niet joh! Wat een uitvinding haha! Ik was inderdaad wel de hele tijd aan het refreshen en dan opende ik Firefox ook en daar heb ik zo’n toolbar..
    Dit is wel makkelijker 😀