Search:

TWikIWeThey (logo)
An experiment in collective intelligence. Stupidity. Whatever.

TWikIWeThey . Main . UserContentCSS TWikIWeThey webs:
Main | TWiki | Know | Test
Main . { Welcome | Topics | FAQ | Changes | Index | Search | Go }

UserContentCSS

Table of Contents

Summary

This is about taking back the web from bad design. And gratuitous, annoying, intrusive advertising.

For those looking for a shortcut to this process, check out the attachments to this page, particularly Default.css which is intended to be used as a default stylesheet in your browser.

You've got a browser. Say, one that isn't MSIE (which automatically puts you in a minority of about 7% or less of the websurfing public). Say, too, you're on a GNU/Linux platform, which means your font selection and scaling differs from 92% of the computers out there.

Now go to a website. Any website. You've got a 1200x1024 X11 session running Galeon with Garamond and Courier New fonts selected, but every site you cross is either itty bitty or meaty beaty big 'n' beefy, which gets annoying as all getout (incidentally, if you're using the stylesheet included here, this sentence will be all uniformly sized text, otherwise, you'll see the itty bitty and big'n'beefy text). Not to mention those sites that are too cool for words and conceal hyperlinks as normal text until you actually, accidentally, move a mouse pointer over them. Or those lurveley sites (why are they always news sites?) which assume that since some viewers have only 800x600 resolution screens (40% the size of your wet dream), everyone's got to be tied to the smaller size.

You can override all of these settings with the use of cascading style sheets (CSS). There are some limitations -- CSS isn't a completely blunt tool, but there are some amazingly broken websites out there, and sometimes the only thing CSS can do is make this blindingly evident. More mundane forms of abuse can definitely be corrected though. The problem is that most documentation of CSS concerns what it can do from a site design standpoint. This page approaches it from the user's perspective, and correcting poor site design.

Principles

I've always been fond of Victoria's principle....

CSS is complex and probably highly overdesigned. The docs referencing it tend to fall very wide of the ideal of telling you what you can do with it.

There are a few key points:

Referencing a stylesheet

Most texts (see refs below) will describe how to reference a linked or embedded stylesheet. For a user CSS, typically userContent.css in a specific directory (.galeon/mozilla/galeon/chrome, for Galeon, chrome, for Mozilla) will do the trick. Some browsers now allow you to specify alternate stylesheets to be invoked by choice or default.

Specifying a style declaration

Generally: selector { property [!important][; property...] }.

Some specifics (from the attached sample). Incidentally, illustrates comments and complex specifications:

BODY {
    padding: 4px 4px;
    font-family: serif !important;
}

/* Force *all* fonts, weights, and line heights to be normal by default
 * unless otherwise specified.
 */

* {
    font-size: 100% !important;
    font-color: #000000 !important;
    font-weight: normal !important;
    line-height: normal !important;

    /* Specify fonts here or in the browser's rendering fonts preferences? */

    font-family: serif !important;
}

H6 { font-style: italic !important }

Selectors

Probably one of the most underdocumented features of CSS -- you're given all this wonderful ability to set stuff the way you want, but you're not told how to specify the stuff.

Selectors (mostly) are elements within the document you're marking up. For HTML, that's your standard set of tags: BODY, P, A (anchors), UL, OL, LI, PRE, etc. This list can be extended, but for the most part, you're concerned with things you're already specifying in your HTML.

There are some modifiers to selectors. Among these are "pseudo modifiers" for the link (<A>) attributes. These include type ( :link and :visited) and dynamic states ( :active, :hover, and :focus ). These can be combined or mixed and matched. Turns out that links are probably something you're going to want to modify, and the various types (named reference vs. anchor, latter of which may be visited or unvisited), and states (not selected, mouse over, mouse selected) lead to interactions. Experience has been that changing state on named references (eg: <a name="foo">) isn't something you want to do.

'*' is the global selector. Properties applied to it apply to all elements (unless overridden elsewhere).

http://www.w3.org/TR/REC-CSS2/selector.html

The !important attribute

This is CSS's one saving grace. The rule is this: author's CSS specification overrides reader's, except when the reader specifies !important, in which case, reader wins. This means you have the ability to correct (or cancel) any given site-specified declaration. Of course, figuring out what declarations (and/or inheretance rules) result in specific behavior can be difficult.

Cascades and Inheritance

The "cascade" in cascading style sheets refers to how a given style is determined, via cascading rules of preference and precedence. These are complicated, suffice to say they exist, but the user can override virtually any given setting.

Limitations

Things you want to keep in mind....

Tips 'n' Tricks

Things made easier through stylesheets.

General

Nuking embedded objects:

/* Nuke all embedded objects, thanks to bertilow on Slashdot.   This
 * will take care of Flash, etc.
 */
object, embed { display: none; }

Printing

Looking for stylesheet tips to make better printed renderings of webpages? AListApart has this handy Going to Print article.

Using the Stylesheets

This will vary by browser. If you're using Galeon or Mozilla, save the Default.css stylesheet and add it to your list of available stylesheets with your preferences. (You can add additional stylesheets here, see below.)

Copy the file and place it in the appropriate directory:

In Galeon, set preferences under 'Settings => Preferences => Rendering => Fonts/Colors'. Mozilla 0.9.9's configuration is unknown. Ditto MSIE.

Both Galeon and Mozilla have a 'Stylesheet' selection under the 'View' menu. If you have added multiple stylesheets, you can apply any or all of the them from the menu, and all rules will apply (following the cascade rules for precedence). eg: You can apply the Default.css stylesheet to control font sizes, and black-on-white.css to control colors.

To use one of these stylesheets as your default, when you add it in Preferences hilight the line and click the checkbox to set it as the default. In this mode, the stylesheet overrides and/or specifies preferences as a default. Rendering is smoother in this mode -- the alternative causes a page to render, then modify as the CSS is applied to it.

For a preview of how the stylesheet changes appearance of a webpage, take a look at these sample pages before and after applying the stylesheet (assumes you don't already apply a default stylesheet changing any settings).

Sample stylesheets

Stylesheets you can use to change your browser's default behavior, and/or activate on a page-by-page basis.

Example of black-on-white.css

The sites below are http://www.megarad.com/ and http://www.freshnews.org/. Both use colored backgrounds as major site elements, which works sometimes, but can be very hard to read for some users. The thumbnails below show the same site twice, once normally, once with the stylesheet applied.

Though Galeon and Mozilla both offer a "use own colors" option, the stylesheet method is far faster, and applies only to a single page or tab. This is typically more useful than the application's native controls.

Megarad -- standard Megarad -- B&W
Freshnews -- standard Freshnews -- B&W

Examples of slashdot-light.css

Background on our story: the userContent.css here apparently pushes Slashdot's HTML a bit hard, resulting in column overlap and occasionally gross rendering bugs requiring (sometimes multiple) reloads to get readable pages.

Slashdot offers a "light" option to registered users, which strips most of the decorations from HTML. However the result is a little too light for my tastes. So I messed with a bit of CSS and turned up a slashdot-light.css which offers a pretty good compromise. Results are screenshot below.

The stylesheet must be applied manually. If your browser offers a stylesheet selector (as Galeon does) you can apply the sheet to pages as you like. For amusement value, it can be applied to third-party pages for an interesting "Slashdotting" effect.

If anyone reading this knows how to use selector attributes to allow automatic application of a stylesheet (perhaps with @import syntax please provide information here, it would be very much appreciated.

Slashdot -- standard Slashdot light Slashdot light+CSS

References

The W3C's sites:

For more tips on blocking ads, see:


Discussion

13 Nov 2002 -- Updated black-on-white.css

I've posted the simplified black-on-white CSS that I thought I'd posted here last night but apparently didn't. It's just BODY, universal (*), FONT, and some anchor properties, skips the table stuff using the majick of inheritance. -- KarstenSelf - 13 Nov 2002


-- KarstenSelf - 03 Jul 2002
-- YendorMike - 13 Nov 2002

Topic UserContentCSS . { Edit | Attach | Ref-By | Printable | Diffs | r1.22 | > | r1.21 | > | r1.20 | More }

Revision r1.22 - 21 Feb 2005 - 05:37 GMT - KarstenSelf
Parents: WebHomeTopicList > IwtArea51 > IwtWWW




Additional IWeThey channels: zIWETHEY (forums), Mailing list, Jabber at iwethey.org:5222, RSS.
Copyright © 2001-2006 by the contributing authors. All material on TWikIWeThey is the property of the contributing authors. This content may be freely distributed, copied, or modified, with attribution, and this notice. Works are provided AS IS with NO WARRANTY and NO LIABILITY for consequences of use.

Ideas, requests, problems regarding TWikIWeThey? Send feedback.

Não brinque com fogo! Ele é chato, não sabe brincar.