CodeBurner: CSS-Referenz für FireBug

Wenn man die Grundlagen von CSS verstanden hat, wird man beim Designen einer Website immer wieder mal auf eine CSS-Referenz zurückgreifen müssen. Niemand kann und will für alle Eigenschaften die Parameter (Werte, Standardwert, Vererbung) im Kopf behalten. Im Leserbereich habe ich die offizielle Referenz des W3C sowie zwei gute deutschsprachige Referenzen verlinkt.

Die meiner Meinung nach beste Referenz, die online verfügbar ist, stammt vom Verlag SitePoint. Leider ist sie nur in englischer Sprache verfügbar. Wer einigermaßen der englischen Sprache mächtig ist, sollte sie sich unbedingt anschauen. Der Clou dabei ist, dass sie auch als Zusatzerweiterung für das Firefox-Plugin Firebug verfügbar ist. Da die Erweiterung und die Website Hand in Hand zusammenarbeiten, werde ich nachfolgend beide Produkte besprechen. Zum besseren Verständnis beachten Sie die drei Grafiken, die Sie mit einem Klick auf selbige vergrößern können.

Die SitePoint Web-Reference

Gehen Sie zur URL reference.sitepoint.com. Hier finden Sie drei Registerkarten: CSS, HTML, JavaScript. Die Site bietet nicht nur für CSS, sondern auch für diese beiden Sprachen eine Vollreferenz gleich mit an. Ich möchte mich hier exemplarisch auf CSS beschränken. Wenn Sie nicht genau wissen, nach welcher Eigenschaft Sie suchen, können Sie sich durch die Themengebiete Eigenschaften [1], Selektoren [2] und At-Regeln [3] durchklicken. Alternativ können Sie auch über das Suchformular [4] gezielt nach diesen drei Themen suchen, und dort z. B. padding eingeben. Sie können aber auch unterhalb des Themengebietes Eigenschaften auf Box-Eigenschaften [5] klicken, und auf der Folgeseite dann auf padding. Nun erscheint eine Übersicht mit allen möglichen Eigenschaften, da der Wert für jede Seite einzeln oder für alle vier Seiten gleichzeitig definiert werden kann. Klicken Sie auf den zusammenfassenden Wert padding. Oben links finden Sie die Tabelle Spec mit folgenden Angaben:

  • Inherited [6]: Wird die Eigenschaft vererbt?
  • Initial [7]: Wie ist für diese Eigenschaft der Standard- / Defaultwert?
  • Version [8]: Welcher CSS-Version unterstützt diese Eigenschaft?

Rechts daneben finden Sie eine Tabelle namens Browser support [9], aus welcher Sie ersehen können, ab welcher Browserversion die Eigenschaft (gegebenenfalls bestmöglichst) unterstützt wird. Exakte Angaben zu den wichtigsten Browserversionen finden Sie ganz am Ende der Seite unter Compatibility. padding wird selbst vom Internet Explorer 6 einwandfrei interpretiert, und kann deshalb unbedenklich eingesetzt werden.

In dem Feld unterhalb der Tabelle sehen Sie eine Regel mit Platzhaltern. padding erlaubt entweder eine Längenangabe (length) [10] oder eine Prozentangabe (percentage) [11], es können bis zu vier Werte definiert werden (1 to 4 values) [12], und mittels inherit [13] kann die Vererbung für padding entgegen dem Defaultwert erzwungen werden.

Im Fließtext finden Sie unter Description [14] eine genaue Erläuterung zu der Eigenschaft inklusive eines Beispiels. Weiter Abwärts unter Value finden Sie genauere Angaben zu den bereits in der Tabelle angesprochenen erlaubten Werten.

Wechseln Sie zur Registerkarte Play [15]. Hier haben Sie nun die Möglichkeit, einen exemplarischen Quellcode zu bearbeiten, und direkt die Auswirkungen zu betrachten. Doch Vorsicht, an dieser Stelle erfolgt keine Prüfung, ob der von Ihnen eingegebene Code valide ist. Wenn Sie beispielsweise für padding einen negativen Wert eingeben, meckert die Anzeige nicht, obwohl dieser Wert überhaupt nicht erlaubt ist.

Hinweis: Die nun folgenden Erklärungen knüpfen unmittelbar an die Erläuterungen zu Firebug im Buch ab Seite 139 (To-Do 53) an.

Das Firefox-Plugin CodeBurner

CodeBurner hieß bis vor einiger Zeit übrigens FireScope, wurde jedoch umbenannt um eine Verwechselung mit der gleichnamigen Firma zu vermeiden. Wundern Sie sich also nicht wenn Sie im Internet hier, und da etwas von FireScope lesen, gemeint ist das identische Add-on. Installieren Sie es zunächst über die Site tools.sitepoint.com/codeburner. Wenn Sie jetzt Firebug aufrufen, sind nun zwei zusätzliche Tabs (Reference [16] und Code Example [17]) vorhanden.

Wir untersuchen nun wieder unser Beispiel (Absatzelement [18]) aus dem Buch zur Kaskade von Seite 142. Wählen Sie nun den Tab Reference [16] aus. Sie sehen nun an erster Stelle das selektierte Absatzelement [19], gefolgt von dem ID- und Klassen-Selektor [20] und schließlich die zugeordneten CSS-Eigenschaften [21], jeweils inklusive einer Minibeschreibung [22] und Angaben zur Browserkompatibilität [23].

Klicken Sie nun auf das Absatzelement P [24]. Rechts öffnet sich nun der Tab Code Example [17], wo Sie eine beispielhafte Anwendung des Elements im Quelltextkontext [25] finden. Darunter finden Sie eine direkte Verlinkung zur SitePoint Web-Reference [26], falls Sie genauere Informationen benötigen.

Fazit

Firebug alleine ist bereits ein mächtiges Tool zum identifizieren, analysieren und editieren von HTML / CSS. Im Zusammenspiel mit CodeBurner mutiert es zur ultimativen Entwicklerzentrale eines Webentwicklers. Gerade Einsteiger sollten sich intensiv mit diesen beiden Tools auseinandersetzen. Für Profis ist es sowieso das Must Have Webworker-Tool schlechthin!

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, , , ,

Ebenfalls Lesenswert:

Trackbacks/Pingbacks

  1. CSS einfach erklärt » Firefinder: CSS-Selektoren auf der Spur - 30. Mai 2009

    [...] Hilfsmittel für Webentwickler darstellt. Insbesondere in Verbindung mit dem Zusatzprogramm CodeBurner bietet es wirklich alle notwenigen Tools aus einem [...]

  2. Geniale Firebug-Erweiterungen für CSS / HTML-Entwickler | CSS einfach erklärt - 17. Januar 2011

    [...] CodeBurner: Eine sinnvolle CSS-Referenz [...]

Hinterlasse eine Antwort