XML-Ecke

Struktur in den Content!

Firefox 11: Operation am offenen CSS

Firefox 11 CSS Editor

Mit der neuen Version des Mozilla Browsers bekommen Web-Designer einen nützlichen CSS-Editor in die Hand: Bei den Extras für Web-Entwickler findet sich der Eintrag Stil-Bearbeitung, mit dem sich ein zusätzliches Fenster für alle CSS-Anweisungen zu der gerade im Browser gezeigten Webseite öffnet. Angezeigt werden alle internen und externen Stylesheets mit der Anzahl der jeweils darin enthaltenen Regeln. In diesen kann man nun nach Belieben Änderungen vornehmen – das Ergebnis wird sofort im Browser angezeigt. Hier wurde etwa kurzerhand die Hintergrundfarbe von Grün in Orange geändert:

Firefox 11 CSS Editor Will man Änderungen dauerhaft behalten, kann man die aktualisierte CSS-Datei speichern, um sie dann auf den Server hochzuladen. “It’s a quick and easy way to iterate and test designs on a website”, erklärt das Mozilla-Projekt in einem Blog-Beitrag.

Ziemlich cool ist ein weiteres Tool, das die Struktur einer Website in einem 3D-Modell darstellt, das sich beliebig drehen, skalieren und von allen Seiten anschauen lässt:

Firefox Inspector

Dieser Page Inspector 3D wird ebenfalls über das Menü Extras, Web-Entwickler aufgerufen. Wählt man den Eintrag Untersuchen aus, finden sich unten rechts im Browserfenster drei Schaltflächen für 3D, HTML und Style. Wählt man 3D wird das DOM (Document Object Model) der Webseite dargestellt, in einem Canvas-Element mit HTML5, um das 3D-Rendering kümmert sich die JavaScript API WebGL. Klickt man auf einzelne Platten des Schichtenmodells wird am unteren Bildschirmrand angezeigt, um welchen Knoten in der DOM-Baumstruktur es sich dabei handelt.

Posted in Im Lauf der Zeit | Tagged , , | 1 Comment