Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Schneller Layoutcheck mit Firebug und jQuery

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Schneller Layoutcheck mit Firebug und jQuery

Während der Arbeit an einer Webseite kann es zu Situationen kommen, in denen die DOM-Kontrolle in Firebug oder die Webdeveloper-Toolbar nur bedingt weiterhelfen können. Firebug und jQuery stellen dann eine fast unschlagbare Kombination dar. Jens Grochtdreis zeigt, wie das geht.

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.

Kommentare

Peter Müller
am 25.12.2008 - 11:14

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.

Permanenter Link

Markus
am 25.12.2008 - 13:00

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

http://riddle.pl/emcalc/

Permanenter Link

Hans Blank
am 29.12.2008 - 17:14

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

Permanenter Link

Die Kommentare sind geschlossen.