Bernhard Häussner

Firefox-Tricks für Webentwickler

30.10.2009, 10:12
userContent.css

userContent.css

Der populäre Webbrowser Mozilla Firefox zeichnet sich unter anderem durch viele Add-Ons aus. Jedoch wird nicht jede persönliche Vorliebe durch ein Add-On abgedeckt. Doch wer sich etwas mit Javascript und CSS auskennt, kann auch selbst kleine Einstellungen machen, ohne viel Aufwand. Dazu gibt es mindestens diese vier Möglichkeiten:

Anpassen von userContent.css und userChrome.css

Diese beiden Dateien befinden sich im Unterordner chrome des Firefox-Profilordners und müssen meistens angelegt werden. Sie sind (fast) ganz normale CSS-Stylesheets; Die userChrome.css enthält CSS-Regeln, die auf das XUL-Interface des Browsers, also alle Menüs, Toolbars etc. angewendet werden. So ist es leicht, z.B. die Schriftgröße der Bedienelemente zu vergrößern, oder der Adressleiste eine Monospace-Schriftart zu verpassen. Auf mozilla.org gibt es weitere Beispiele für userChrome.css.

Die Datei userContent.css enthält CSS-Regeln, die auf die angezeigten Webseiten angewendet werden. Ich benutze die Datei, um mich vor gewissen Links zu warnen: Zum Beispiel mag ich es nicht von Google immer auf experts-exchange.com zu klicken. Darum habe ich diese kleine Regel eingebaut, die mittels CSS3-Attribut-Selektor alle Links zu dieser Seite durchstreicht und verblasst:

a[href^="http://www.experts-exchange.com/"] {opacity:0.3 !important; text-decoration: line-through ! important;  }

Das !important bewirkt, dass die Regel die bereits vom Webseitengestalter gesetzten Regeln überschreibt.

Die Regeln lassen sich glücklicherweise auf bestimmte Seiten beschränken, so wie hier:

@-moz-document url(http://twitter.com/), url(http://twitter.com/home)
{
.latest-status {background-color:#FFFFC9;}
}

Diese Regel hinterlegt z.B. die letzte selbst geschriebene Nachricht im Stream von twitter.com mit einem leichten Gelb. Das erleichtert zu sehen, was wann passiert ist.

Eigene Sidebars

Wer Plattform-übergreifende Widgets basteln will, kann auf die Firefox-Sidebar zurückgreifen. In dieser lassen sich beliebige Webseiten anzeigen. Dazu muss man lediglich ein besonderes Lesezeichen erstellen, dass dann immer in der Sidebar geöffnet wird:

Sidebar Lesezeichen

Sidebar Lesezeichen

Man kann also wenn man etwas Bildschirmplatz opfern will, selbst gemachte Widgets anzeigen lassen. Der Link im Screenshot verweist auf eine Seite, die nur ein Textfeld enthält, um schnell Notizen zu machen oder als erweiterte Zwischenablage. Doch die Möglichkeiten sind nahezu unbegrenzt (Monitoring, Feeds, ...?).

Bookmarklets

Bookmarklets führen auf Knopfdruck bestimmte Javascript-Schnippsel auf einer Webseite aus, und funktionieren dabei nicht nur im Firefox. Dazu muss man den JS-Code von Zeilenumbrüchen befreien, alle Leerzeichen mit %20 kodieren und das Ganze dann umschließen mit:

javascript:(function(){/*here goes the code*/})();

So wird das Script zu einem Javascript-Link, der dann als Lesezeichen gespeichert werden kann. Ich habe mir z.B. ein Twitter Bookmarklet gebastelt. Außerdem einen DOM-Performance-Tester:

javascript:(function(){var%20d=0,l=500,n=document.getElementsByTagName('*').length;for(var%20i=0;i<l;i++){document.body.style.display='none';var%20s=Number(new%20Date());document.body.style.display='';var%20h=document.body.clientHeight;d+=Number(new%20Date())-s;}alert('Reflow:%20'+(d/l)+'%20ms%20('+Math.round(1000/(d/l))+'%20fps)\nDOM-Nodes:%20'+n+'\nRewlow%20per%20node:'+Math.round(1000000*d/(l*n))+'%20ns');})()

DOM-Benchmark

Das Kurze Script ermittelt, wie lange der Browser für einen Seitenaufbau braucht und wie viele DOM-Knoten das Dokument enthält. Es ist praktisch, wenn man komplexere Javascript-Animationen oder ähnliches erstellt, die langsam wirken. Dann offenbart der Test, ob nicht zu viele DOM-Knoten oder komplizierte CSS-Regeln die Seite verlangsamen.

Faustregel: Je weiter hinten ein Selektor steht, desto weniger Elemente sollten auf ihn passen, also li #id ist schneller als #id li, wobei sich das besonders in Verbindung mit CSS-Expressions bemerkbar macht.

Greasemonkey

Um auf bestimmten Seiten JS-Code auszuführen, gibt es das Firefox-Plugin Greasemonkey. Zu diesem Add-On gibt es nicht nur ein großes Repositorium existierender sog. Userscripts, sondern man kann auch schnell ein eigenes Script erstellen, um auf bestimmten Webseite irgendetwas anzupassen. Außerdem kann man jQuery benutzen mit folgender Zeile im Header:

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

Ich habe z.B. ein Quick Search-Userscript gebastelt, welches beim Auswählen von Text ein kleines Menü öffnet, sodass ich den Text z.B. googlen, übersetzen oder twittern kann.

Es gibt also mehr effektive Möglichkeiten Firefox anzupassen, als das installieren von Add-Ons.

Kurze URL http://1-co.de/b/1Q. Post to twitter

Kommentare

keine





 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zu dieser Seite: http://1-co.de/b/1Q