Röntgenblick auf CSS
Per Mail wurde ich auf das CSS-Tool Xylescope aufmerksam gemacht, wofür ich mich herzlich bedanken möchte. Xylescope ist Browser, DOM-Inspektor und CSS-Tutor in einem. Beim Surfen zeigt Xylescope den HTML-Quelltext der besuchten Seite in einem gesonderten Bereich zeitgleich an. Dabei werden alle zugrunde liegenden CSS-Dateien übersichtlich zur Ansicht gestellt. Alle Quelltexte werden automatisch formatiert. Es lassen sich eigene Stylesheets für diese Anzeige konfigurieren. Auf diesem Wege kann man sich schnell einen Überblick über die Struktur eines Layouts verschaffen.
Seitenelemente können durch einen Klick auf die dargestellte Seite ausgewählt werden. Xylescope zeigt dann die vollständige CSS-Kaskade zu diesem Element an und stellt die daraus resultierende Liste von Stilregeln übersichtlich formatiert dar. Eine Volltext-Suche ermöglicht das schnelle Auffinden verschiedener Selektoren.
Schön finde ich auch die Möglichkeit, das angezeigte Stylesheet verändern zu können. So kann man bei eigenen Projekten schnell mal testen, wie sich eine Farbänderung oder eine Änderung der Schriftgröße auswirken würde.
Xylescope ist als stabile Betaversion für Mac OS X 10.3.9 kostenlos verfügbar. Ich bin sehr angetan und werde weiter testen.
Werbeunterbrechung
Kommentare und Feedback (18)
Folgende Seiten verweisen auf diesen Beitrag
Werbung
Vorheriger Artikel: TypePad Fotoupload, nächster Artikel: Firefox und del.icio.us
22.04.2005, 02:44
Wie geil ist das denn?
Entschuldigt meine Ausdrucksweise, aber ich bin völlig aus dem Häuschen.
Xyle scope heruntergeladen, Systemupdate durchgeführt und dann getestet.
Der absolute Wahnsinn. Ich werde jetzt auch fleißig testen und den Entwicklern Feedback geben, denn der Ansatz der Software ist supergut und diese Software hat es verdient!
22.04.2005, 03:00
Wäre ja wirklich toll, wenn es das Teil auch für den PC gäbe, kann ja nicht sooo schwer sein. Da ich momentan noch ohne MAC (ke) durch die Welt laufe, bleibt wohl wieder nur zusehen. Langfristig steht einer auf dem Wunschzettel, aber wann war doch gleich Weihnachten?
22.04.2005, 03:02
Habe ein Problem beim Posten, die Vorschau zeigt keinen Kommentartext und bringt eine hässliche Fehlermeldung, sowohl im IE als auch im Firefox.
22.04.2005, 03:30
Hi Jörg: Ein “Geschenk” von MT 3.16? Jetzt sollte es wieder klappen.
22.04.2005, 03:32
Wo lag der Fehler? Reine Update-Routine, oder?
22.04.2005, 06:11
Hallo Jörg, meine Vorschau Variante mittels SetVar wollte nicht mehr. Ich habe den Anlass nun genutzt, die Vorschau etwas besser anzupassen. Danke für den Hinweis.
22.04.2005, 10:00
Hi! Klingt wahnsinnig interessant, setzt aber leider ein Mac OS voraus, welches ich nicht habe. Gibt es / kennt jemand so ein Tool vielleicht für Windows?
Liebe Grüße aus Wien, Alexander
22.04.2005, 10:40
na das sieht ja superinteressant aus, nachher mal ausprobieren, vielen dank!
22.04.2005, 11:55
Mennooooooooo. Auch haben wollen. Für Windows oder Linux bitte !!! Nur dafür einen Mac kaufen, ist dann doch bei aller Begeisterung für CSS ein wenig übertrieben :-)
25.04.2005, 09:41
> kennt jemand so ein Tool vielleicht für Windows?
Es gibt “Edit CSS” bzw. “Web Developer Toolbar” (Edit CSS ist da eingebaut) als Firefox-Extensions. Damit ist ebenfalls Live-Bearbeitung von CSS möglich, nur nicht annähernd so komfortabel. Man erhält einfach nur ein Textfeld, in dem man das CSS “pur” ändern kann, ohne irgendwelche Automatismen oder Hilfestellungen. Das Grundkonzept ist aber das gleiche, und es ist allemal besser als garnix.
26.04.2005, 04:31
leute, also ich finde die app zwar super schön, aber total nutzlos.
sie ist doch eigentlich nur gut wenn man styles von anderen seiten klauen will.
bei eigenen projekten hat man 100% mehr übersicht wenn man ganz simple die css im editor öffnet, da man die styles ja auch selbst angelegt hat.
hat jemand etwa ein beispiel wo ein wo das programm bei ner entwicklung dem workflow beschleunigen würde.
und alle die denken das sie mit dem programm css erlernen oder besser verstehen könnten, werden sich wundern wie einfach css doch ohne Xylescope sein kann.
26.04.2005, 06:01
Hallo nimmermehr, die Applikation ist v.a. sinnvoll, wenn man die Vorgehensweise auf anderen Seiten verstehen will.
Den DOM Inspektor verwende ich z.B. zur Fehlerbereiningung auf eigenen Seiten und finde, das Xylescope das nun übersichtlicher erlaubt.
29.04.2005, 09:12
Eine tolle Software wie es scheint, aber leider nur für MacOS. So muß man auf dem Windows-PC mit der Webdeveloper Extension und der Aardvark-Extension für den Firefox vorlieb nehmen.
04.05.2005, 10:01
Vielen Dank für den Link. Schade nur, dass es nur die Version für MACs gibt.
Ich stimme Manuela zu; ich wage zu behaupten, dass man etwas sinnvoll erst dann lernen kann, wenn man sich zuerst ausführlich mit der Theorie beschäftig, und anschließend an guten Beispielen lernt.
Und, Sebastian Bechtold, danke für den Tipp! :)
Mit freundlichen Grüßen aus Saarbrücken,
Vitaly Friedman,
http://www.alvit.de/vf
04.05.2005, 10:01
Vielen Dank für den Link. Schade nur, dass es nur die Version für MACs gibt.
Ich stimme Manuela zu; ich wage zu behaupten, dass man etwas sinnvoll erst dann lernen kann, wenn man sich zuerst ausführlich mit der Theorie beschäftigt, und anschließend an guten Beispielen lernt.
Und, Sebastian Bechtold, danke für den Tipp! :)
Mit freundlichen Grüßen aus Saarbrücken,
Vitaly Friedman,
http://www.alvit.de/vf
04.05.2005, 10:06
Vielen Dank für den Link. Schade nur, dass es nur die Version für MACs gibt.
Ich stimme Manuela zu; ich wage zu behaupten, dass man etwas sinnvoll erst dann lernen kann, wenn man sich zuerst ausführlich mit der Theorie beschäftigt, und anschließend an guten Beispielen lernt.
Und, Sebastian Bechtold, danke für den Tipp! :). Ich würde aber auch Aardvark (http://www.karmatics.com/aardvark/) empfehlen.
Mit freundlichen Grüßen aus Saarbrücken,
Vitaly Friedman,
http://www.alvit.de/vf
04.05.2005, 10:07
Vielen Dank für den Link. Schade nur, dass es nur die Version für MACs gibt.
Ich stimme Manuela zu; ich wage zu behaupten, dass man etwas sinnvoll erst dann lernen kann, wenn man sich zuerst ausführlich mit der Theorie beschäftigt, und anschließend an guten Beispielen lernt.
Und, Sebastian Bechtold, danke für den Tipp! :). Ich würde aber auch Aardvark (http://www.karmatics.com/aardvark/) empfehlen.
Mit freundlichen Grüßen aus Saarbrücken,
Vitaly Friedman,
http://www.alvit.de/vf
04.05.2005, 10:08
Sorry für Doppelpost – mein Firefox spinnt :)