User style sheets in Google Chrome

Firefox users have always enjoyed a high degree of customizability, not only at a browser level through extensions, but also at a page level with user scripts and style sheets. At launch Chrome was far behind in this area, but it quickly closed in with native support for user scripts, restartless extensions and later the labs to easily enable command flags. The one feature that was still missing was support for user style-sheets, which required the use of an extension, like Stylish. But it appears that this was silently added sometime during last year; I stumbled on it a couple of days before. Unfortunately there is no user interface for this, you have to manually edit a text file. This CSS file is located in the Chrome installation directory, in the subfolder \User Data\Default\User StyleSheets, with the name custom.css. Unlike Firefox, where you have two files, one for customizing the browser interface and the other for sites, Chrome has a single file, which controls the styles on webpages; modifying the user interface is restricted to themes in this case.

If you worked with user style sheets before, you already know all what you need to know: close the browser, paste the CSS code in this file and save it; the next time you visit a site, the rules you declared will kick in as if part of the original design. The possibilities are endless, from highlighting nofollow-links to building a rudimentary ad-blocker. And since this is based on CSS, most of the user styles for Firefox on the Internet will be compatible with Google Chrome as well – as long as they don’t use Gecko-specific properties, like those with the –moz prefix. The only downside is that you have to restart the browser, but the advantage is one less extension running in the background, using up memory and maybe crashing.

If you need some suggestions to get started, why not tweak the interface of some Google products, for example:

• Remove the ugly Mail/Contacts/Tasks-menu from Gmail: I never liked that piece of UI, nor understood it’s supposed usefulness. You can easily switch back and forth between ‘Contacts’ and ‘Mail’ using keyboard shortcuts. Add this code to Chrome’s custom.css in order to hide this menu:

  DIV[id=":r9"], DIV[id=":r8"], DIV[id=":r2"] { display: none !important; }

• In Google Reader’s individual feed view, I never use the ‘Previous’ and ‘Next’ buttons on the bottom. Hiding them also makes some extra room for reading:

  DIV[id="viewer-footer"] { display: none !important; }

• Also in Google Reader, you can hide elements from the sidebar, for example the ‘Explore’-link or even ‘People you follow’, if you’re feeling anti-social. Again, these features are still available through keyboard shortcuts, but they don’t take up space anymore if you rarely use them. The top line hides ‘Explore’, the second ‘People you follow’:

  DIV[id="lhn-recommendations"] { display: none !important; }

  DIV[id="lhn-friends"] { display: none !important; }

Update: unfortunately, as of Chrome 33, this feature has been removed, so modifying page styles can only be done with extensions from now on.