Ik wil een IE webdeveloper extensie !

Of tenminste 1 zéér belangrijke functie ervan. Als je de webdeveloper extensie voor Firefox hebt, ken je vast en zeker de ‘outline’ functies waarmee je snel alle block elementen van een webpagina kan laten omlijnen om zo een overzicht te krijgen welke de exacte afmetingen van elke block element zijn. Klik op onderstaande screenshot als je niet weet waar ik het over heb.

screenshot: outline functie in Firefox

Nu bedenk ik met net dat deze functie nutteloos is voor de webdesigner die weet waar hij mee bezig is. Als je valid CSS code schrijft moet je in principe weten hoe elk element er uitziet en wat de te verwachten afmetingen, padding, margin en dergelijke zullen zijn in een standard compliant webbrowser. Dus … de outline functie is leuk maar in Firefox is het niets meer dan een overbodige bevestiging van de zelfgeschreven code.

Wat ik nu eigenlijk wil zeggen, is dat er eigenlijk een ‘outline functie’ zou moeten bestaan voor Internet explorer aangezien het deze browser is die de CSS code meestal niet begrijpt en het daar dus veel nuttiger zou zijn om te zien hoe de code (verkeerd) geïnterpreteert wordt.
Mits er zo geen extensie bestaat (of ik heb er geen weet van) ben ik verplicht om bij het debuggen van de CSS (debuggen is eigenlijk een verkeerde term aangezien het om valid CSS code gaat maar kom) bij elke CSS classe van een block element de regel

  • border: 1px solid black;

toe te voegen om zo toch maar een zicht te krijgen hoe IE de code interpreteert.

ps: technisch blogposts schrijven is ook niet om te lachen zo blijkt :p

Mogelijk verwante posts:

7 Reacties op Ik wil een IE webdeveloper extensie !

  1. GeertDD zei ...

    Je hebt gelijk. Net omdat IE zo onvoorspelbaar is, is het vooral bij die browser nodig om letterlijk te zien waar je mee bezig bent.

    Momenteel gebruik ik daar verschillende background-colors voor. Het voordeel daarvan ten opzichte van borders is dat je de height en de width van een element niet met 1px vermeerdert, want net die ene pixel kan soms heel vervelend doen. Hangt wat af van de situatie.

  2. Bart N. zei ...

    Geert, een background-color is inderdaad duidelijker. Ik gebruik de border property als de height en width er tijdens het testen niet zo toe doen of als ik toch plaats genoeg heb wat meestal het geval is.

    Eigenlijk geef ik hier het slechte voorbeeld want die extra pixels zouden wel eens verwarrend kunnen zijn voor beginners.

  3. Tim zei ...

    De DevArt plug-in voor de Maxthon browser kan dit voor de IE engine.

  4. Wouter zei ...

    Probeer misschien de “Web Accessibility Toolbar”:

    http://www.nils.org.au/ais/web/resources/toolbar/documentation_v2en.html

  5. Bart N. zei ...

    Wouter, dat is exact wat ik zocht, bedankt voor de link.

  6. johan zei ...

    Bart,
    bedankt voor deze nuttige informatie.
    Dit maakt het leven al weer een beetje makkelijker ;-)

    groetjes en voortdoen
    johan

  7. Patrick zei ...

    http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

    Microsoft heeft hem ook tegenwoordig

Plaats een reactie...