User-defined CSS style sheets

CSS style sheets have often been lauded for the richness of the styles they allow to apply, their lightness and their flexibility, and all these points contribute to their late but growing deployment as a stylization method for the content by Web pages authors.

One use of these style sheets is less known though : indeed, some browsers such as Mozilla and derivate, Opera or Konqueror, allow to the user to apply user-defined style sheets ; these style sheets thus empowers the user of a Web site to adapt its presentation to her taste and needs.

The needs addressed by these style sheets are often bound to accessibility : larger fonts, strong color contrast, aural stylsheet, etc. But besides these, they allow to make one's life easier easily. Here are a few examples of style sheets that I use:

Default style sheet

This style sheet is applied on all the pages that I visit, and allows to remove some of the adverstizing banners with the most usual dimensions ; it allows sets the default printing size of the fonts

iframe, embed[type="application/x-shockwave-flash"][width=750] {
  display: none !important;
  visibility: hidden !important;
} 

 *[width=468] {
  display: none !important;
  visibility: hidden !important;
} 

embed[type="application/x-shockwave-flash"][height=800], embed[type="application/x-shockwave-flash"][height=728] {
  display: none !important;
  visibility: hidden !important;
} 

@media print {
  font-size:10pt;
}

Legibility style sheet

I apply this style sheet to pages that I find hard to read, due to a dubious background image or font color. It also allows to shrink the width of the page to a defined maximum.


body, html, * {
color:black ! important;
font-family:sans-serif;
}

html {
background:#eef;
}

body {
  padding:2em;
  background:white ! important;
  max-width:40em;
  line-height:1.1em;
  margin-left:auto;
  margin-right:auto;
}

b, strong { 
            background-color:#eef;
            font-weight:normal;
 }

a:link {
color:blue ! important;
}

a:active {
color:red ! important;
}

a:visited {
color:navy blue ! important;
}

Quick-links style sheet

I apply this style sheet on a case by case basis, when I visit a page with a fair number of links and that I want to find quickly those that I have followed recently ; it hides all the text but the visited links


body * { visibility:hidden;font-size:0}

:visited { visibility:visible; font-size:16pt}

Hence, with very little work, I can dapt the Web to my comfort of reading and surfing.

Plan / Aide

Dominique Hazaël-Massieux
dominique.hazael-massieux@centraliens.net
Dernière modification : le 14 Octobre 2003

Nimbustier.net

Navigation

User-defined CSS style sheets