In dem Fenster haben wir drei Bereiche. Während der obere das Portal wie gewohnt darstellt, zeigt der linke untere Bereich das von phpWebSite generierte Xhtml, und der untere rechte Bereich die Css Stile. Es zeigt die gegenwärtig aktuellen Stile in Effekt und woher sie stammen, sogar ziemlich exakt woher sie stammen.
FireBug vermeidet Kopfschmerzen über den komplexen Mix mehrerer verfügbarer StyleSheets, führt uns nicht nur zum gegenwärtigen effektiven Stil und wo er im StyleSheet platziert ist, sondern visualisiert auch die Kaskadierungs-Effekte, die nicht immer leicht in der Tiefe vorstellbar sind.
1.2.2.Beispiel Hindergrundänderung
In diesem Beispiel zeigt der Xhtml Bereich auf die body Auszeichnung, und Css zeigt auf die zugeordneten Stile von body mit der Hintergrundfarbe (background-color) #DFE3BA.
Wir können nicht nur die Art der Transparenz geniessen, mit der FireBug Informationen ausliefert, sondern können auch jedes Detail der gegenwärtigen Eigenschaften temporär ändern. Wechseln wir mal willkürlich die Farbe des Hindergrundes auf #FF9900, etwas wie ein Orange im RGB Farbraum. Die Änderung wird sofort sichtbar.
Nun gut, der Hintergrund besteht aus etwas sehr im Hintergrund liegendes ...
1.2.3.Inspektion
Ein weiterer größerer Bereich einer gefärbten Fläche liegt in der Mitte der dargestellten WebSeite. Wir wissen noch nicht, welches Xhtml mit welchem Css dafür verantwortlich ist. Klicken wir einfach in die Mitte der Fläche und das Kontext Menü (rechte Maustaste) bietet ein Inspect Element an:
Die Inspektion führt im linken unteren Fensterbereich unmittelbar zur korrespondierenden Xhtml Auszeichnung, während die Sicht auf das Element der Webseite (im oberen Fensterbereich) farblich hervorgehoben ist, um auf den entsprechenden Ausschnitt zu verweisen.
Das ist ein Xhtml div mit einer Id namens #container und der stil von #container hat Eigenschaften wie die Hintergrundfarbe (background-color) #ADB583. Wenn wir den Fokus auf die korrespondierende Xhtml div Auszeichnung setzen, verschwindet die Hervorhebung und wir sehen die ursprüngliche Farbe.
1.2.4.Beispiel Element Änderung
Und nun sind wir in der Lage, das zu ändern. Nehmen wir uns einen sandfarbenen Wert, das ist ein #FFFFCC RGB Farbkode.
Der Effekt ist abermals unmittelbar zu sehen.
1.2.5.Temporäre and dauerhafte Änderungen
Zu beachten ist, dass die eben vollzogenen Änderungen nur temporär sind. Um ein eigenes Thema aufzubauen, sollte die von FireBug mitgeteilte korrespondierende Stilzugehörigkeit notiert werden. Für einen prakikablen Arbeitsfluss, gewünschte Änderungen dauerhaft zu vollziehen, sollte das Portal mit etwas geöffnet werden (ich bevorzuge SCP) dass die direkte Editierung der gezeigten Css Datei erlaubt. Das ist leicht, weil die Quellzeilennummern ebenfalls durch FireBug genannt sind. Nur sollte immer auch die Kaskadierungslogik beachtet werden. Auch dabei hilft FireBug, indem die Spitze der Kaskadierungspyramide immer ganz oben und Unterordnungen weiter unten dargestellt werden. Vielleicht sind nur die benachbarten Stilzuordnungen unterhalb zu beachten. Permanente Änderungen, derart gleich vollzogen, sind in FireBug auch zu sehen, wenn die Aktualisierungsschaltfläche im WebBbrowser betätigt wird.
Nur so zum Spaß, ändern wir mal etwas anderes als eine Fläche, z.B. eine Rahmenlinie, die wir dem #container umgebend entdecken, zu ändern vom bisherigen Weiss (#FFFFFF) zu einer Art von Blau mit RGB #006699.
Die Möglichkeiten zu Änderungen der Stile mit Css sind nahezu unendlich.
eZine
