Fun with user styles

From Amit’s Thoughts

Long ago (1997), Internet Explorer 4 gave us user style sheets, in the accessibility options. You could point the browser at your CSS file, and it would merge the user styles with the author styles. As with many features in IE4, other browsers adopted this feature too (Mozilla in 2002, Opera in 2003, I think).

User styles are quite neat. However, having to edit a file somewhere and then reload the browser is sort of a pain. The Stylish addon for Firefox makes user styles much easier:

1. You can edit the styles per site instead of globally.
2. You can organize your CSS into named sections.
3. You can share these sections with others.
4. You can browse userstyles.org to find CSS shared by others.
5. You can install user styles from others with just a few clicks.

I just keep forgetting to write my own styles. Tonight I got fed up with MyWay's 700-pixel fixed width TV listings:

I used Firebug to look at the structure of the site, and after navigating nested tables with no class or id names to hang my CSS onto, I decided to use CSS attribute selectors to address the two tables that I wanted:

@-moz-document domain("tv.myway.com") {
  table[width="700"] {
    width: 100% ! important;
  }

  table[bgcolor="888888"] {
    background-color: #fff ! important;
    padding: 2px;
  }

  table[bgcolor="888888"] td {
    border: 1px solid #bbb;
    font-family: tahoma ! important;
    font-size: small ! important;
    -moz-box-shadow: 1px 1px 2px #bbb;
  }

  table[bgcolor="888888"] td a {
    font-weight: bold;
    color: #000 ! important;
    text-decoration: none ! important;
  }
}

Here's the result:

Try out user styles. If you don't know CSS, you can explore userstyles.org; if you do, you can also try writing your own.

Labels: howto, structure