Die CSS-Ansicht

Die CSS-Ansicht, die sich rechts unten im Hauptfenster von Xylescope befindet, bietet einen bequemen Zugang zu allen für eine geladene Seite relevanten Stilregeln.

Einzelne Dateien

Xylescope stellt zu jeder geladenen Seite automatisch alle zuge­hörigen CSS-Quelltexte zur Verfügung. screenshot: css menuIm CSS-Auswahl­menü (siehe Bildschirmfoto) werden alle <style>-Elemente und auf CSS-Dateien verwei­sende <link>-Elemente mit ihrem 'title' Attribut auf­gelistet. Fehlt ein solches Attribut, so kommt der Dateiname zum Tragen. <style>-Elemente wer­den einfach durch­nummeriert.

Importierte Dateien bekommen einen abknickenden Pfeil vorangestellt und werden unter dem importierenden <style>-Element oder der importierenden Datei eingerückt.

Das Ausnutzen von Fehlern in älteren Browsern erlaubt, CSS-Dateien gezielt nur von diesen importieren zu lassen oder den Import auszuschließen. Diese Technik ist auch als Filterhack bekannt. Per Filterhack importierte Dateien sind durch einen gepunkteten Pfeil gekennzeichnet und in Klammern mit dem Namen des Filterhacks versehen.

Die Kaskade

Ist in der CSS-Ansicht die Kaskadendarstellung eingestellt, so werden zu jedem ausgewählten HTML-Elemente genau die Stilregeln aus den verknüpften CSS-Dateien heraus­gefiltert, welche die Darstellung dieses Elementes beeinflussen. Einer ausführlichen Be­schreibung der CSS-Ansicht im Kaskadenmodus ist das gesamte nächste Thema gewidmet.

Live Experimentieren

Sowohl im Kaskadenmodus als auch auch beim Betrachten ganzer CSS-Dateien können CSS-Werte sofort verändert werden. Klicken Sie in der CSS-Ansicht einfach in einen angezeigten Wert und ändern Sie ihn nach belieben. Nach Drücken der Eingabetaste wird die Web Ansicht sofort aktualisiert, ohne dass die angezeigte Seite neu geladen werden müsste.

Änderungen speichern

Befinden sich die CSS-Dateien, mit denen Sie experimentiert haben, auf Ihrem Computer, so können Sie Ihre Änderungen mit dem Menü­befehl Ablage > Sichern abspeichern. Hierbei werden alle zur Seite gehörenden CSS-Dateien unter ihrem ursprünglichen Dateipfad aktualisiert und dabei mit einer einheitlichen Formatierung versehen. Unter Einstellungen… > Quelltexte können Sie die dabei verwendete Formatierung Ihren Wünschen anpassen.

Suchen und Filtern

screenshot: Filter Um einen besseren Überblick zu erhalten, kann am rechten Rand die Selektor­über­sicht aufgezogen werden. Klicken in einen dort ange­zeigten Selektor zeigt die zuge­hörige Regel in der CSS-Ansicht.

Die angezeigte Liste von Regeln kann mit Hilfe von Suchbegriffen und vordefinierten Filtern eingeschränkt werden.

Fehlermeldungen

screenshot: syntaxcheck Kann eine CSS-Datei aufgrund von Syntaxfehlern nicht vollstän­dig von Xylescope gelesen wer­den, so wird der Teil, der den Fehler enthält, rot dargestellt.

Ebenso wird sowohl der Kaskadenschriftzug als auch die Titel aller von Fehler betroffenen Dateien rot gefärbt.

Weitere Details