User Style Sheets Come of Age

Matthew Magain

User style sheets — CSS files that sit on the user’s desktop machine and override a site’s original styles — have been around for a long time. Personally, though, I’ve never really seen the benefit.

Sure, from an accessibility perspective, I concede that the ability to restore underlines to links, bump up the font size, or improve the contrast of a site would come in handy for someone with a vision impairment (or a low tolerance for offensive colour combinations). But there’s never been any real incentive for me to spend time changing the design of someone else’s site, especially when:

  1. there was no easy way to share and promote a user style sheet for a particular site
  2. adding a style sheet still involved a fair amount of mucking around — files had to be saved to specific folders, and browsers needed relaunching before the style would take effect
  3. per-site user style sheets still aren’t supported in Internet Explorer, and
  4. the foundations (markup) could change drastically from under your feet anyway.

Power to the User

In 2007, finally, it seems that times are a-changin’. Well, not in IE, they’re not — point number 3 above still stands (and as far as I’m aware, there aren’t any add-ons to enable this functionality). But if you use any of the other major browsers (Firefox, Opera, Safari) there are some recent developments that make installation and management of user style sheets easier than ever:

  • userstyles.org: While (somewhat ironically) not the most usable site in the world, what userstyles.org does do well is provide a central repository for user style sheets, addressing point 1 above.
  • Stylish: The Stylish extension for Mozilla browsers (Firefox, Flock etc) allows user style sheets to be applied with a single click, and in most cases the style is applied immediately. A terrific solution for point number 2, if Firefox is your main browser.
  • SafariStand: SafariStand is an add-on for the Safari browser that increases the amount of customisation permitted by users — including, but not limited to, specifying user style sheets on a per-site basis. While the process of adding a user style sheet still involves saving the CSS file to a specific directory before you can load it in SafariStand, it’s a heck of a lot easier than it was. Tick off point number 2 for Safari users.

And of course (I’m pre-empting brothercake and charmedlover here), there are browsers like Opera that have permitted per-site user style sheets as a core feature for years.

So we’ve addressed points 1 and 2 above. And I mentioned that we’re stuck with point 3. But what of point 4 — having to redo all of your work should the site’s developers decide to change their page structure? Let’s look at that issue through a case study.

A Case Study

Designer Jon Hicks recently chose to give the popular Google Reader, a web application for reading feeds, a visual makeover. This was an excellent choice of site to author a user style sheet for, given that:

  • Google Reader is enormously popular and therefore (hopefully) less likely to change its markup drastically.
  • The content of the site is, by its nature, delivered in a consistent manner (as compared to, say, a site that used a different style sheet for every page).

A before and after comparison of Google Reader, as styled by Jon Hicks

Hicks’s redesign is subtle, reflecting his desire to style Google Reader to “look more like an OS X application” than to completely gut the original layout. As you can see in the screenshot below, some of the text links have been tastefully styled as icons, and the result is a cleaner, more polished-looking version of the same web application.

A before and after comparison of the navigation bar of Google Reader, as styled by Jon Hicks"

While there is still the possibility that Google could change the markup and render this user style sheet useless, at least one of the Google engineers knows that it is in Google’s best interest not to, based on his response to Hicks’s announcement of an update to the skin. A community is building around skinning Google Reader and other high-profile sites, and members of that community are the site’s most loyal users.

There has been much discussion in the past over using standard naming conventions for a page’s elements. This probably fueled the microformats movement, but not much else — we’re going to be stuck with inconsistent naming conventions for a long time to come.

Your Markup is an API

With all the hype about APIs and mash-ups, it’s easy to forget that your HTML is also an API, and your users are experimenting with it right now.

With user style sheets providing custom visual representations of your site and Greasemonkey scripts allowing for customised behaviour, now more than ever is a good time to remember that separating your content, presentation and behavior can result in your users doing more with your application than you ever dreamed.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.realityedge.com.au mrsmiley

    So we’ve addressed points 1 and 2 above. And I mentioned that we’re stuck with point 3. But what of point 4—having to redo all of your work should the site’s developers decide to change their page structure?

    I think you have points 3 and 4 backwards.

    Considering the amount of time and effort that goes into a site design, its a shame to cover it up because you can do a better job (not you personally, just the proverbial you). It only makes sense to me for truly useful sites that impair the users ability to access the content. Even then, a nice email to the owner offering to redesign the site for them would do more for the wider community. I wonder who makes use of this browser feature for anything but a high traffic site anyway?

  • http://www.sitepoint.com Matthew Magain

    Thanks mrsmiley, ordering of points rectified.

    its a shame to cover it up because you can do a better job

    It would certainly require a shift in thinking–probably not unlike that required to accepting that someone else is mashing up your data via its API.

    It’s certainly not a shame if the user style sheet is an improvement, which in my opinion is the case for the case study mentioned!

  • http://www.brothercake.com/ brothercake

    Indeed :) Once again we see Firefox catching up to what Opera’s been doing for years (draggable tabs anyone?) ;)

  • User1

    I’m happy to see that there are plug-ins for user defined styles. I would often keep a copy of an alternative style sheet and paste it into the pages markup with WebDeveloper.

    The best use for CSS that I found so far is hiding everything but the article I am reading on those graphic heavy sites or sites with a poor contrast. Also, works great in hiding ads.

    Btw, the link to the Firefox Plugin (Stylish) is https://addons.mozilla.org/en-US/firefox/addon/2108/ (your link has an extra http://).

  • BillyG

    “I wonder who makes use of this browser feature for anything but a high traffic site anyway?”

    A high traffic site to me is comparable to a site that I frequent everyday, no matter how many other people want to go there. With User Styles and Stylish, I can change a sites representation through my browser (whether I publish it for others to use or not). If nothing else, it’s good CSS practice and everybody can probably stand some of that (it is – along with HTML – a global language IMO).

    Remember, Adblock, CustomizeGoogle and others have been doing this all along.

  • http://www.lowter.com charmedlover

    Yes, Opera has had support for user style-sheets for quite some time. And as brothercake expressed, it has taken awhile for Firefox to copy this feature to a useful state.

    Nevertheless, I have found a number of uses for user style-sheets myself, especially with the recent interface improvements in Opera 9 as to applying these style-sheets. They serve most useful for websites that have so much information, but just have a really, really bad design that makes it hard to navigate. The best example of this for me is PHPclasses, which has lots of good information, but is nearly impossible to easily navigate.

    However, I do find user JS files much more useful overall.

  • http://www.realityedge.com.au mrsmiley

    Ok, I get that some people here find them useful, but has anyone actually submitted that stylesheet back to the site owner as a suggested enhancement for their site? If your stylesheet truly does improve the usability of the site (not hiding images and ads because obviously that wont be accepted), then surely you almost have a duty to try and share that with the rest of the world rather than the few savy enough to use a service like userstyles.org.

    This would essentially solve problem #4 because the onus is back on the owner, not the users to fix the problem.

  • http://diigital.com cranial-bore

    The link to the stylish extension is broken, but luckily being the amazing web professional that I am I was able to figure it out ;)

    To me the main benefit of user style sheets is to fix minor usability issues for sites I frequent. For example some have small text with lacklustre leading. Increasing the text sizes just pushes the lines even closer together. Now I can fix that :)

  • http://www.dotcomwebdev.com chris ward

    What if you end up using user-stylesheets to remove the adverts on sites? Like S.P. for instance…

    surely this is going to upset people?

  • http://www.sitepoint.com Matthew Magain

    @chris: No doubt this is happening already, for sites like sitepoint.com and others. There simply is no way to tell whether visitors to your site are customising your site to suit their own preferences, including the removal of ads.

  • http://www.sitepoint.com AlexW

    What if you end up using user-stylesheets to remove the adverts on sites? Like S.P. for instance…

    surely this is going to upset people?

    No use getting too upset about it, Chris. Once the page leaves the server you have to let it go. ;)

    Our audience, by it’s nature, is more likely to customize their browsing experience as a matter of course — we all do. Even our office admins run greasemonkey to customize the way Cerberus (customer support system) works.

  • http://www.sitepoint.com/ andrew.k

    There simply is no way to tell whether visitors to your site are customising your site to suit their own preferences, including the removal of ads.

    Sure there is, by checking the computed style of the elements in question. But if you’re paranoid enough to write JavaScript to detect if users are hiding your ads, you’ve got bigger problems to deal with :)

  • http://www.sitepoint.com/ Paul Annesley

    mrsmiley: In the example given, I’d say that this user stylesheet for Google Reader does nothing to improve usability or accessibility, and it makes Reader look less like a Google application.

    So there’s no way Google would adopt it as their primary style, nor would they add the complexity of selectable skins/themes for Reader.

    Yet as a user stylesheet, it provides an alternate interface which many people (but still a minority) prefer. Also, this example aims to make Reader look more like a Mac OS application, to help it blend in to Mac desktops. Mac users are another minority for now.

    Google themselves seem to at least passively encourage things like user scripts and user style, with a Google Reader developer releasing a Grease Monkey userscript to integrate Reader into the Gmail interface.

    I think it’s great that minority groups and individuals are able to create and share new ways of presenting the data from websites and web applications without needing the approval of the site owner, and I think site owners should embrace this – after all, it leads to a larger and happier user base.

  • Steve

    Being a person who provides technology support to people with disabilities for several years now, and someone who is profoundly colour blind, I can, without fear of contradiction, state that no-one likes my custom style sheets.
    Most of the web designers that I deal with are mortified at what I can do with a few simple tweaks to my browser.
    There in lies my point: “It’s MY browser”.
    The styles presented by the developer are merely suggestion that can be accepted or ignored.
    I learned a long time ago that what is good for some is not good for all.

  • Megan

    As someone who writes a lot of user stylesheets (and has a site to share them!) I can say that the biggest problem is that the coding on most sites sucks. Even trying to enlarge the font size on a site can lead ot hour of weeding through bad HTML and even worse CSS. The enduring prevalence of tabled layouts is another problem, although that can be overcome to some extent with attribute selectors.

    Sorry for the delay in responding to this – someone sent me the link in a commnent about my site and I’m just getting around to reading it! My site is at mystylesheet.org if you’re interested. It’s meant for users of all browsers, not just Firefox.