For those familiar with Greasemonkey, a Firefox addon for writing custom Javascript on websites, Stylish alows you to write custom CSS for websites. Stylish makes it extremely easy to fix annoying websites (such as MySpace), hide advertisements and diagnose web design issues.
Fix The Internet(s)
One of best uses of Stylish is to override website's poor design choices. MySpace, a website that gives uneducated users control of the design is a great example of this. I spent roughly 2 minutes on the site looking for an example and had no trouble finding a couple.
Creating Custom CSS Rules
Stylish makes it really easy to fix a broken design. With a little CSS know-how you can fix MySpace and other offending sites by first clicking on the Stylish icon, then going to "write new style" and finally choosing whether you want to create a new rule for a single URL, domain or your own rule. I almost always pick domain to make the changes site-wide.
After making your choice, you're presented with an input box. For those familiar with CSS, simply add in whatever CSS you want, give it a name and click "save". Within the two curly brackets you can insert any CSS rules you want.
Pro Tips
This is a great chance to brush up on your CSS Selector Specificity skills since you'll need to give your selectors more weight than the current ones on the website. The easiest way to achieve this is to use the !important keyword like so:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("myspace.com") {
html, body { background-image: none !important; }
}
Another great tool to add to your arsenal is Firebug. With Firebug you can determine how to circumvent horrible designs by sifting through the design's stylesheet. Once you've determined what selector's properties are creating the ugliness it's easy to copy and paste that into to Stylish and add !important to the end.
Other Uses?
Another great use for Stylish is to re-enable functionality on websites. I've noticed some websites using pop-up DIVs to force users into registering. With Stylish, you can hide these annoyances and continue using the site without giving away your information:
In the screenshot above, the website imeem.com forces uses to register in order to listen to music for free. The CSS below hides the annoying DIV:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.imeem.com") {
.mask, .bd { display: none !important; }
}
HTML & CSS Diagnostics
Another excellent use of Stylish is CSS Diagnostics. If you're not familiar with CSS Diagnostics, they're basically CSS Selectors that highlight ugly parts of your HTML such as FONT element or the use of TABLE attributes such as BORDER, CELLSPACING etc.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("example.com") {
font, table[cellspacing], table[border] { border: 1px solid red !important; }
}
Hide Advertisements
Another great use of Stylish is to hide ads on webpages. While I realize that the Firefox addon Adblock Plus already does this, occasionally it will miss an ad on website.
Notice how I hid the default Google search results ads above with a single selector below:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.google.com") {
#mbEnd { display: none !important; }
}
Conclusion
Stylish is a great tool for web designers and developers. Below are links to addons I mentioned in this article to get you started:
