User Style Sheets

A user style sheet is saved on a web user’s computer and maintains their display preferences for browsing the internet. A user style sheet can override an author style sheet by use of the !important construct.

Benefits of User Style Sheets

All of these examples are assuming the author style sheet has not been set up in an inaccessible manner — that is, without the !important construct on key selectors like these and with all font-sizes relative to the body size. If an author has defined a style rule as !important, it cannot be overridden by a user style sheet (without a more specific rule also utilizing !important). It has been brought to my attention that the previous statement does not apply to modern standards-compliant browsers. I had previously written it because of a browser bug that I can no longer verify. I think it may have been a version of Internet Explorer for Windows, but all tests now appear to work correctly.

• Style preferences for accessibility
  • Large fonts
    body { font-size:150% !important; }
  • High-contrast colors
    * {
  color:#000 !important;
  background:#fff !important;
  }
a:link, a:visited, a:link *, a:visited * {
  color:#00f !important;
  background:#ff0 !important;
  }
a:hover, a:active, a:focus, a:hover *, a:active *, a:focus * {
  color:#f00 !important;
  background:#ff0 !important;
  }

    Note: These user styles make the Leahy/Langridge Image Replacement (LIR) method fail — it’s only shortcoming — because it replaces background images. More about image replacement techniques later.

  • Works in any browser capable of user style sheets.
• Ad-blocking by source or reference
  • Attribute selectors
    *[href*="doubleclick"], *[src*="doubleclick"], {
  visibility:hidden !important;
  }
  • Doesn’t work in Internet Explorer
• Showing hidden attribute information
  • Expanding links and abbreviations (see print preview of this page)
    /* html>body hides selectors from WinIE */
/* because it’s treatment of :after is buggy */

html>body a:link:after, html>body a:visited:after {
  content:" (" attr(href) ")";
  font-size:60%;
  text-decoration:none;
  }
html>body acronym:after, html>body abbr:after {
  content:" (" attr(title) ")";
  text-decoration:none;
  font-size:60%;
  }
  • Displaying accesskey information.
    *[accesskey]:after {
  content: attr(accesskey) !important;
  font-family:"courier new",monospace;
  border: outset 1px #fff;
  color:#000 !important;
  background-color:#eee !important;
  }
  • Doesn’t work in Internet Explorer