CSS einfach erklärt

Möchte man die Auswirkungen der Änderungen am CSS oder HTML-Code in unterschiedlichen Browsern nachvollziehen, ist ein ständiges hin- und herspringen zwischen Code-Editor und Browser notwendig. Ein Hilfsmittel, das diese Prozedur erheblich vereinfacht, ist XRefresh, welches automatisch das Browserfenster aktualisiert, sobald eine Änderung am Code vorgenommen wurde. Insbesondere beim Debugging greifen jedoch viele Entwickler auf Firebug zurück. Doch für Liebhaber von Firebug gibt es derzeit keine Möglichkeit, dort getätigte Änderungen am Code live auf mehreren Browsern zu überwachen. Möglich werden könnte dieser Spagat jedoch mit dem Tool FireCSS.

Mehr lesen … »

Praktisch zeitgleich mit Firefox 4 ist auch Firebug 1.7.0 erschienen, die nun vollständig kompatibel zur neuen Browserversion ist. Ebenfalls kompatibel zu Firefox 4 ist die bei Webentwicklern sehr beliebte Erweiterung Web Developer. Hier konnte ich allerdings schon seit dem letzten Update des Add-ons keine Einschränkungen feststellen – weder mit den Betaversionen von Firefox 4 noch mit der finalen Version.

Optisch zurück in die Zukunft

In meinem direkten Umfeld gibt es übrigens einige Upgrader, die sich mit dem neuen Look des Firefox 4 überhaupt nicht anfreunden können oder wollen. Bei bestimmten Punkten kann ich dem durchaus zustimmen; beispielsweise ist beim Laptop mit einem 16:9-Monitor der Weg zum Home-Button mit dem Touchpad nun ein recht langer Weg. Die vertraute Firefox 3 Ansicht lässt sich jedoch mit wenigen Klicks wiederherstellen - eine Anleitung findet sich beispielsweise im Loadblog.

Firebug ist nicht nur für den fortgeschrittenen Webentwickler, sondern gerade auch für Anfänger, die zum ersten Mal ihre Homepage erstellen, ein unverzichtbares Hilfsmittel. Aus diesem Grund habe ich in meinem CSS-Buch Firebug ein eigenes Kapitel gewidmet und dort beispielsweise erklärt, wie die theoretischen Regeln der CSS-Kaskade in dem genialen Tool sichtbar werden (siehe Seite 141). Das Schöne an Firebug ist aber auch, dass zahlreiche Erweiterungen existieren, die die ohne hin schon einzigartige Funktionalität noch erweitern. Nachfolgend möchte ich Euch eine Übersicht geben, über die wichtigsten Firebug-Plugins, die ich natürlich im Laufe der Zeit schon verbloggt habe. Mehr lesen … »

Ein Browser, der von einem Webserver einen HTML-Quelltext einliest (parst), erstellt zunächst einen virtuellen Dokumentenbaum, der den hierarchischen Aufbau beschreibt. Die Fachbezeichnung hierfür lautet Document Object Model, abgekürzt DOM. Die nachfolgende Abbildung zeigt, wie ein solches Modell für einen einfachen Dokumentenbaum aussehen kann: Mehr lesen … »

Wer Informationen über den DOM-Zweig eines CSS-Elementes sucht, kann nicht immer auf Firebug zurückgreifen. Insbesondere auf betagteren Systemen bzw. mobilen Lösungen kann der zusätzliche Ressourcenverbrauch des Firefox-Plugins als störend empfunden werden. Mehr lesen … »