Webkrauts: Für mehr Qualität im Web.

Artikel

Schneller Layoutcheck mit Firebug und jQuery

Insbesondere, wenn man seine Schriftgrößen nicht in Pixel definiert, kann man sich nicht immer sicher sein, ob sich nicht Schriftgrößen ungewollt multipliziert haben oder ob man richtig umgerechnet hat. Denn im Normalfall verlangt ein Designer/Kunde ja eine Schriftgröße in einer Pixelgröße, nicht in “bitte gut lesbar”. Ich habe für solche und ähnliche Fälle die Firebug-Konsole zusammen mit jQuery besonders schätzen gelernt. Mit jQuery kann ich in bekannter und gewohnter CSS-Syntax meine Zielobjekte selektieren, die Konsole zeigt mir die Ergebnisse. Es gibt hierfür prinzipiell drei Wege:

1. Direkteingabe der Anweisungen in der Firebug-Konsole
2. Notierung der Anweisungen in der betreffenden HTML-Datei
3. Notierung der Anweisungen einer externen Javascript-Datei

Die Auswahl des Vorgehens ist Geschmackssache. Gegen die erste Variante, die Direkteingabe in die Firebug-Konsole, spricht in meinen Augen, daß diese Art des Debuggings meist der Beginn eines Prozesses ist. Es folgen also Anpassungen und wiederholte Überprüfungen. Es wäre mir lästig, immer die gleichen Anweisungen in die Konsole einzutippen. Kopiere ich sie aus einer Datei in die Konsole, kann ich auch gleich kosnequenter eine der anderen beiden Lösungswege beschreiten.

Schriftgrößen anzeigen lassen

So kann ich beispielsweise die Schriftgröße einer Liste in einem Container folgendermaßen bestimmen und zudem vernünftig beschriftet ausgeben lassen:

// Schriftgröße in Firebug anzeigen lassen
if ($.browser.mozilla) {
     console.log('Liste voller Nebensächlichkeiten, Schriftgröße: '+$('#container ul.nebensaechlich ').css('font-size'));
}

Auf diese Weise kann man sich natürlich auch alle anderen CSS-Eigenschaften ausgeben lassen. Die Multiplikationseffekte bei Schriftgrößen kann man so prima kontrollieren.

em und Pixel

Und wie kommt man initial auf die em- an Stelle der Pixelwerte? Ich nutze dafür ein kleines AIR-Tool namens "EM Calculator". Die Browser verwalten allerdings intern alle Schriftgrößen als Pixel. Egal wie man nun seine Schriften auszeichnet, Firebug wird immer nur Pixel ausgeben. Ein Test in anderen Browsern bestätigt dieses Verhalten. Es handelt sich dabei um “computed values” (berechnete Werte).

Kein jQuery zur Hand? Kein Problem!

Was aber tun, wenn man auf der eigenen Seite kein jQuery nutzt oder auf einer fremden Seite etwas überprüfen will, dort aber auch kein jQuery eingebunden ist? Alles kein Problem dank des jQuerify-Bookmarklets.

Nach Klick auf das Bookmarklet wird jQuery in die gerade offene Webseite hinzugefügt. Man kann es nun innerhalb von Firebug nutzen.

Streng genommen muss man natürlich nicht jQuery für eine Layoutprüfung nehmen. Es kann allerdings recht umständlich werden, exakt das gewünschte Objekt zu selektieren, wenn man kein Javascript-Framework zur Hand nimmt.

Zum Autor

Jens Grochtdreis arbeitet als "Senior Frontend Developer" bei SinnerSchrader in Frankfurt. Neben seinem Weblog betreut er auch die CSS-FAQ und setzt sich mit den Webkrauts für moderne, standardkonforme Webseiten ein.

Info:

Schneller Layoutcheck mit Firebug und jQuery ist Beitrag Nr. 493

Autor:

Jens Grochtdreis am 25. Dezember 2008 um 07:33

Kategorie:

Adventskalender 2008

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   Den "computed value" in px bekommt man auch ohne jQuery ganz leicht raus.

   1. Rechtsklick auf das gewünschte Element im Firefox
   2. Klick auf "Element untersuchen"
   3. Im Firebugfenster rechts oben "Optionen" anklicken
   4. "Berechneten Style anzeigen" anklicken
   Oder habe ich da was missverstanden? Sei's wie's sei: Happy Xmas everybody.

   Kommentar von Peter Müller - 25. Dezember 2008 um 11:14

2. 2.
   

   Also ich nutze ganz gerne den „Em Calculator“ von Piotr Petrus.

   http://riddle.pl/emcalc/

   Kommentar von Markus - 25. Dezember 2008 um 13:00

3. 3.
   

   Noch einfacher geht das mit dem Firefox-Add-on "CSSViewer".

   Kommentar von Hans Blank - 29. Dezember 2008 um 17:14

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.