When taking into consideration the average person browsing the Web, there isn’t much cause for concern regarding user style sheets interfering with your intended CSS. Many people are not aware of the fact that you’re able to control virtually every aspects of any document rendered in your own browser. This can be attributed to the fact that in order to take advantage of such a feature, a working knowledge of CSS is required.
Customizing browser form controls with user CSS
A small post over at Open Switch clued me into an article with instructions on how to prettify the Firefox widgets (screenshot provided). The post provided readers using Linux a way to improve the aesthetics of the various form controls provided by default in Firefox.
I was intrigued so I took a second to run the small script, after a quick Firefox restart all of the ‘default’ form controls had a new and improved look. At first glance, they’re a vast improvement over the stock controls originally offered. Naturally, I became curious as to what exactly was happening under the hood.
I began poking around the shell script, inspecting the installation process. To put things simply, the script appends two style sheets as well as a set of six images to complete the new control designs.
The purpose of user styles
User styles are designed to allow readers the ability to control how their browser displays content by default. While user styles can still be influenced by site CSS, user styles can have great affect on the final display of any webpage. A good way to think about user style sheets is giving your reader the ability to infinitely expand various dialogs in their browser preferences to include any aspect of a documents design.
In my personal experience, however, I don’t think that I’ve come across anybody that has taken the time to customize their default font size or link colors, let alone use an entire style sheet.
Does anyone you know use their own style sheet?
In your personal experience, have you ever run into a reader who uses a custom style sheet? I personally don’t use one, and haven’t seen any circumstance in which a user style sheet was used.
The Firefox form control updates put a different spin on user style sheets, however. This script doesn’t require that the reader have any working knowledge of CSS, yet a custom style sheet will be applied to all documents after installation. This concept isn’t something that had occurred to me before, but it could be a trend that becomes more common in the future.
There is a moral to this story
What I took home from installing these custom Firefox controls is that user style sheets can have a strong impact on the CSS I author. While some of the applied CSS in this example is overridden by author CSS, there are other selectors that need attention to achieve the look I originally intended. Some of these specific selectors are proprietary, and the thought of having to nullify or correct them wouldn’t normally cross my mind.
Authors have absolutely no control over user styles, and in all honesty, stressing over the possibility of their presence isn’t in our best interest. What’s important to do, however, is be mindful of the possibility that a reader may have a user style sheet for accessibility purposes over aesthetic reasons.
A user style sheet that bumps up the default font size is very important to readers with impaired vision. User style sheets can also be used to improve color contrast by default by forcing a certain color and background-color. These things are important to keep in mind, and the best thing we can do is compensate our CSS with a bulletproof design.
Comments
One thing I do, to combat certain FF extensions is add the following:
input, textarea {background-color: #fff !important;}
This stops the yellow ‘auto-complete’ fields when using the Google Toolbar (like I see on this form, infact).
I personally don’t use these auto-complete fields, but I can see this overriding as a slight problem to those who do. However, I have seen some designs where the font colour contrasts with the new yellow background. So, in this situation, adding the !important sorts it out. And I see this as the justification.
@trovster: That’s something I hadn’t thought of before — native browser CSS application in exactly the situation you describe. I’ll be sure to keep that in mind from now on, thanks for pointing it out.
For those times I’m forced to use IE because the site won’t work in FF, I have a user stylesheet that prevents wiley designers from changing the colors of my scrollbars.
I use user stylesheets quite often on an site-by-site basis. I have made some alerations to remove annoyances from sites I visit often. I also sometimes make my own print stylesheets for sites that don’t have them.
By far the most annoying problem I encounter when writing stylesheets for other sites is bad coding. Tables and div-itis make this task really difficult. You wouldn’t believe the amount of bad code out there!
I have a litte wiki site at mystylesheet.org to share user CSS (for all browsers) if anyone’s interested. It’s pretty dead though.
Opera also hs a lot of built-in user CSS for accessibility and development. I use those sometimes too.
Yes. I was supposed to tell you about the userstyles in Opera. You can use a userstyle to get a textbrowser, – or an C64 or just better contrast et al. You should try looking at these inside Opera if you’ve got it on your harddrive.
Cool tips on the Firefox for Linux «nicer widgets»-thingy. I’ll look into it. :]
Ah, I know a user who really likes his links to be _blue_, so has that in his user style.
Like Megan, I have several user stylesheets in use, mostly to prettify some bad looking sites. They range from simply shifting the BBC’s fixed-width pages into the centre of the screen, to a complete design for one of my favourite phpbb boards (their theme is pretty ugly!).
It’s really useful to have the tools and knowledge to actually fix many of the gripes I have about certain websites.
@NatalieMac: I can absolutely sympathize with that, another use of user styles that hadn’t crossed my mind.
@Megan: You give some good tips too — maybe I’m missing out by not using user style sheets more often. Using them for print is a fantastic idea. There is a fantastic amount of awful markup out there — luckily things are getting better.
@Odin Omdal Hørthe: Yes, you and Megan both mentioned Opera in that it can do a lot with user CSS, it is quite a powerful browser. It’s interesting to hear that someone you know chooses to force all links to be blue…
@Ollie: It’s good to learn that people truly do use user style sheets, but it’s true — in order to really take advantage of the opportunity, having a strong knowledge of CSS is very helpful.
I use userstyles on a site-by-site basis too. using the Fx extension Stylish it is very easy to add styles to specific domains or URLs (like a.com, b.a.com, (b.)a.com/c).
Stylish is like greasemonkey for CSS jockeys without JS knowledge.
Something that I also do is to alter sites temporarily with FireBug, because it’s so easy to inspect and alter the HTML and CSS. For example if I’m reading an article and I want the text size bigger, but the column becomes to narrow, I just open FireBug for a few seconds and it’s perfect for reading. And if it’s a site that I visit a lot I do the same thing but with Stylish.
I’m missing Fx support for the :nth pseudo-classes and such though because applying userstyles to sites with horrible HTML would be infinitely easier with them.
I strongly recommend that you give Stylish a try (if you use Fx) and userstyles in general. When something bothers you just pop open FireBug and see if it’s a quick fix. It’s such a relief to know that you don’t have to read that stupid 11px #aaa text, and that you don’t have to look at a completely broken layout when you try to scale the text up.
Cheers!