View the Web Your Way with Edit CSS

For a while I have been using the Web Developer Toolbar in Firefox for various puroses. It’s extremely helpful, allowing me to quickly and easily outline custom elements, display the rendered sizes of block-level elements, provide an overview of the page’s structure without fiddling with the DOM inspector (choose CSS → View Style Information… and then look at the status bar as you move your mouse over the page), and much more.

However, I’ve also actually been using it to make my experience on the Web more my own.

Introducing Edit CSS

One especially useful option in the Web Developer Toolbar for the Firefox and Mozilla Web browsers is the “Edit CSS” option. You can get at it from the Tools Menu → Web Developer → CSS → Edit CSS or by pressing CTRL + SHIFT + E. This will show the browser sidebar and, if any exist, load the existing styles applied to the page you’re viewing in a large text-entry field.

To use the feature, simply start typing in some applicable CSS. On each keypress, Firefox evauluates your style rules and applies any changes as appropriate. In other words, you can edit the styles of any page you visit faster and easier than ever before, and your changes are displayed live, as you type!

I like this a lot, because it further develops the application of the philosophy that giving the user more control over his or her environment is a good thing. Here are some examples of how to start making this new power work for you right away.

Exercise Your Power

  1. The next time you come across a web site whose entire textual content is centered on the page (we all know how annoying that is), open your Edit CSS sidebar and type the following:

    * { text-align: left; }

    This will immediately left-justify all text on the page. Now you can read with ease!

  2. To further help readability on pages whose line lengths span the whole screen, add a suitable maximum width for your reading pleasure:

    * { max-width: 40em; }

    Now all elements on the page won’t be wider than 40 em’s which should be comfortable for most people. Of course, feel free to substitute your own value in place of mine. That’s the beauty of it.

  3. If the author of the page you’re viewing has chosen a horrendously annoying shade of pink or yellow to display text in (often coupled with an equally unreadable choice of background color), just open your Edit CSS sidebar and type the following:

    * { color: black; background: white; }

    Now you have easy-to-read text and you don’t have to strain your eyes. Again, simply swap the values for white text on a black background to inverse the colors, or feel free to use your own preffered colors.

What if the page doesn’t change?

If the page you’re viewing hasn’t changed after typing these lines in the Edit CSS sidebar, then you’ve either mistyped something or another rule later down in the style sheet is overriding the one you just added. In this case, you can either go hunting for the stubborn culprit in the original CSS or try increasing the weight of your own rule by doing one of the following:

  • Increase your rule’s specificity by adding html>body to the front of your selector (in my examples above, the asterisk (*) symbol is your selector). That is to say, your modified rule becomes:

    html>body * { text-align: left; }
  • Make your rule !important by adding that text after the rule. Your modified rule, marked as important, would look like this:

    * { text-align: center !important }

According to the creators of CSS, one of their goals was to make the Web more customizable to the end user. Thanks to tools like Firefox’s Edit CSS option in the wonderful Web Developer Toolbar, this is finally an easily-achieveable reality!

Create Personal Stylesheet Preferences in Other Browsers

If you’re not using a Mozilla-based browser (why aren’t you?) and don’t have access to this extension, try writing your own style sheets with your specific display preferences in it and applying them through your browser software.

Your style sheet is just a plain text file which can be written in any text editor.

Safari on the Mac allows this by going to the Safari Menu → Preferences → click the Advanced pane → select Other… from the Style Sheet drop down menu and select your style sheet.

Internet Explorer for Windows also supports this technique but the option is a little more cleverly hidden. Go to the Tools Menu → select Internet Options… → click on Accessibility → check “Format documents using my style sheet” in the “User Style Sheet” section → click Browse and open your style sheet.

(Internet Explorer 5 for the Mac also supports this option but that browser is so bad, so old, so slow, so buggy, and so insecure that finding the option is left as an exercise to any reader who dares to still use it.)

Opera for Windows and Mac also let you choose your own style sheet. Go to Preferences (from the Opera menu on a Mac or from the Tools menu on Windows) → click Page Style in the left column → click Choose next to the text box that reads “My style sheet.”

Here’s a recommendation for what to put in your new personal style sheet. Remember, however, it’s your style sheet, so feel free to start with this but add your own preferenes as well!

/* make pages dark-on-light and use a big-enough text size */
body { background: white; color: black; font-size: medium; }
/* keep paragraphs narrow and left-justified */
p { max-width: 40em; text-align: left !important }
/* I want headings in the Times font */
h1, h2, h3, h4, h5, h6 { font-weight: bold; font-family: Times; }
/* show me what the access keys are! */
[accesskey]:after { content: "(Access key: " attr(accesskey) ")" }
/* show me which images are actually links */
a img { border: 2px solid blue; }

Try browsing the Web with your new stylesheet. I’d be very interested to hear how it goes. Which sites could you use your new preferences in without any problem? Which did you break?

2 replies on “View the Web Your Way with Edit CSS”

Comments are closed.