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 zugehörigen CSS-Quelltexte zur Verfügung.
Im CSS-Auswahlmenü
(siehe Bildschirmfoto) werden alle
<style>
-Elemente und auf CSS-Dateien
verweisende <link>
-Elemente mit ihrem 'title' Attribut aufgelistet.
Fehlt ein solches Attribut,
so kommt der Dateiname zum Tragen.
<style>
-Elemente werden einfach durchnummeriert.
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 herausgefiltert, welche die Darstellung dieses Elementes beeinflussen. Einer ausführlichen Beschreibung 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
abspeichern. Hierbei werden alle zur Seite gehörenden CSS-Dateien unter ihrem ursprünglichen Dateipfad aktualisiert und dabei mit einer einheitlichen Formatierung versehen. Unter können Sie die dabei verwendete Formatierung Ihren Wünschen anpassen.Suchen und Filtern
Um einen besseren Überblick zu erhalten, kann am rechten Rand die Selektorübersicht aufgezogen werden. Klicken in einen dort angezeigten Selektor zeigt die zugehörige Regel in der CSS-Ansicht.
Die angezeigte Liste von Regeln kann mit Hilfe von Suchbegriffen und vordefinierten Filtern eingeschränkt werden.
Fehlermeldungen
Kann eine CSS-Datei aufgrund von Syntaxfehlern nicht vollständig von Xylescope
gelesen werden, 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.