YAML CSS-Debugging per Bookmarklet http://www.highresolution.info/weblog/entry/yaml_css_debugging_per_bookmarklet/ Kleine, frische Ideen sollte man sofort umsetzen, sonst bleiben sie zulange liegen und verkümmern. So geschehen vor einigen Monaten, als ich mir angesehen habe, wie man JavaScript geschickt in Bookmarklets einsetzt. Heute, einen Tag nach dem Release von YAML 3.0.6, kam diese Idee wieder hoch und ich habe YAML ein kleines Bookmarklet spendiert, mit dessen Hilfe sich das YAML-Debug-Stylesheet auf jeder beliebigen Webseite per Klick auf den Bookmark zu- und abschalten lässt. Das Debugging-Stylesheet wurde in V3.0.6 bereits leicht verbesser, an der Online-Variante für das Bookmarklet habe ich heute noch etwas weiter geschraubt und werde sicher auch in den nächsten Tagen noch die eine oder andere Ergänzung integrieren. Insgesamt ist dieses kleine Helfertool aber schon sehr nützlich und erlaubt eine schnelle und unkomplizierte Fehlerkontrolle - auch und vor allem bei Ferndiagnosen. Erreichbar ist das Bookmarklet über die Debugging-Seite der Online-Dokumentation. Einfach den Link aus der Hinweisbox als Lesezeichen im Browser speichern, auf eine YAML-Webseite gehen und den Bookmark anklicken - voila. Nach aktuellem Stand sind folgende Funktionen implementiert: Verfügbarkeitstest für YAML’s iehacks.css Stylesheet (Funktioniert gesichert über Einbindung ins zentrale Stylesheet)Hervorhebung von DIV-Containern mit ID- und Klassenbezeichnung (einschl. YAML-Subtemplates und .floatbox-Klasse)Hervorhebung der Gliederungsebenen bei Überschriften (H1..H6)Hervorhebung spezieller Textauszeichnungen (z.B. abbr, code, q, cite)Hervorhebung inhaltsleerer ElementeHervorhebung von Elementen mit Inline-StylesHervorhebung von Skip-Ankern Viel Spaß damit und bitte hinterlasst konstruktives Feedback hier in den Kommentaren für Verbesserungen. de-de Dirk Copyright 2008 2008-06-10T;18:49:02+00:00 Kommentar von Reinhard Hiebl http://www.highresolution.info/weblog/entry/yaml_css_debugging_per_bookmarklet/ Sehr gute Idee! Einen Schönheitsfehler hab ich gefunden. Wenn man auf einen Link hovert sieht man ja den Link. Geht man mit der Maus auf einen Link innerhalb eines Absatzes, dann Flackert dieser. Ich vermute das liegt vorallem an der Blocksatz Formatierung des Absatzes in der YAML-Doku. Würde alternativ eine Absolute Positionierung vorschlagen. Oder ganz einfach mit einem Tooltip Plugin. Gruß Reinhard Sehr gute Idee!

Einen Schönheitsfehler hab ich gefunden.
Wenn man auf einen Link hovert sieht man ja den Link. Geht man mit der Maus auf einen Link innerhalb eines Absatzes, dann Flackert dieser.

Ich vermute das liegt vorallem an der Blocksatz Formatierung des Absatzes in der YAML-Doku.

Würde alternativ eine Absolute Positionierung vorschlagen. Oder ganz einfach mit einem Tooltip Plugin.

Gruß
Reinhard

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Johannes http://www.highresolution.info/weblog/entry/yaml_css_debugging_per_bookmarklet/ wirklich gute idee - vor allem, wie eric eggert schon sagte, kann man es für wirklich alle webseiten verwenden. mir ist nur ein typo aufgefallen: es heißt immer “scollbarbereich” -> da fehlt wohl ein “r” :-) wirklich gute idee - vor allem, wie eric eggert schon sagte, kann man es für wirklich alle webseiten verwenden.

mir ist nur ein typo aufgefallen: es heißt immer “scollbarbereich” -> da fehlt wohl ein “r” :-)

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Jürgen Gutsch http://www.highresolution.info/weblog/entry/yaml_css_debugging_per_bookmarklet/ Eine tolle Idee. :-) Eine tolle Idee. :-)

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Eric Eggert http://www.highresolution.info/weblog/entry/yaml_css_debugging_per_bookmarklet/ Auf anderen, nicht-YAML-Seiten ist es auch ziemlich praktisch. Eine Bitte noch: Könntest du das Hintergrundbild fixieren, damit man auch andere Elemente bemessen kann? Vielleicht auch als Overlay… Auf anderen, nicht-YAML-Seiten ist es auch ziemlich praktisch. Eine Bitte noch: Könntest du das Hintergrundbild fixieren, damit man auch andere Elemente bemessen kann? Vielleicht auch als Overlay…

]]> 2012-01-18T;11:39:34+00:00