Stylish en userstyles

Ondertussen zullen de meeste 'geavanceerde Firefox gebruikers' Greasemonkey al wel kennen. Sinds enkele maanden is er echter een soort gelijke extensie voor CSS: Stylish. Toen ik Stylish een paar maanden geleden voor het eerst tegenkwam zag ik er niet direct het potentieel van in. Van Greasemonkey zag ik in het begin ook niet echt alle mogelijkheden in, maar de dag van vandaag kan ik nog moeilijk zonder Greasemonkey. Daarom besloot ik een paar dagen geleden toch maar om Stylish eens te proberen en ik ben er echt van onder de indruk!

Om je eigen CSS los te laten op websites heb je natuurlijk niet persé Stylish nodig, maar het maakt het echt veel makkelijker. Via de 'klassieke' manier moet je je usercontent.css en/of userchrome.css-bestand aanpassen en daar de css zetten die je op de site/chrome wilt toepassen. Voor zover ik weet worden de nieuwe css-regels echter pas uitgevoerd op de pagina nadat je Firefox opnieuw hebt opgestart (omdat dan het usercontent.css-bestand opnieuw wordt ingelezen.). Userstyles die in Stylish worden geïnstalleerd worden onmiddellijk toegepast waardoor het veel makkelijker is om nieuwe css-regels voor een site te schrijven, of om het uiterlijk van Firefox zelf te tweaken want ook dat is perfect mogelijk.

Een andere manier om toch je eigen css toe te passen op een site zonder dat je Stylish hoeft te gebruiken is natuurlijk om de CSS doormiddel van wat Javascript in een Greasemonkey-scriptje toe te passen op de pagina. Maar dan ben je natuurlijk wel meer werk aan het verrichten dan nodig is wanneer je Stylish gebruikt. Bovendien is het, denk ik, niet mogelijk om met Greasemonkey CSS toe te passen op de Firefox Chrome (=vensters) zelf.

Net als Greasemonkey userscripts.org heeft, is er voor Stylish userstyles.org. Als je de volledige lijst van styles bekijkt zie je dat er al aardig wat zijn en dat je er best knappe dingen mee kan doen, zeker als je bedenkt dat er enkel gebruik wordt gemaakt van css.

Het schrijven van een eigen userstyle is overigens vrij eenvoudig, als je wat css-kennis hebt. Surf naar de site waarvoor je css wil schrijven, klik op het Stylish icoonte in de statusbalk, kies 'create style for foo.com' (of 'this url' als je css enkel op die specifieke pagina moet toegepast worden) en begin je css te schrijven.

del.icio.us nicer tagcloud

Vanzelfsprekend moest ik dat zelf eens testen en heb ik ondertussen twee userstyles geschreven. De eerste maakt de del.icio.us tagcloud een beetje mooier (hiervoor moet je de taglijst wel op 'cloud' zetten, onderaan de lijst). In feite is het niets meer dan wat css code die al maanden in m'n usercontent.css stond, waar ik nu dus een userstyle van heb gemaakt. De tweede verwijdert enkele ads van slashdot. Op zich heb ik niets tegen ads, websites moeten hun kosten ook betalen, maar wel als het knalrode lelijke overdreven grote tekeningen zijn die in het midden van de tekst staan. Dankzij Stylish en enkele regeltjes css was ik binnen de minuut van de ads verlost.

Mijn userstyles zijn te vinden op de gluefish pagina voor Stylish.

UPDATE: Ik ben al een tijdje de nieuwe Windows Live Mail aan het beta-testen. Ik moet toegeven dat het een grote verbetering is tegenover Hotmail, hoewel het niet kan tippen aan Gmail. Wat me vreselijk stoorde zijn de afschuwelijke banners, zeker bovenaan de pagina. Maar daar zijn we nu ook weer van verlost dankzij een nieuwe userstyle die ik zonet heb toegevoegd op gluefish.