Take back the web: CSS for the user

I've been known to rant about crap web design from time to time, largely font face and size, poor color choices, and restricted viewports. I've known that most of these issues could be attacked by way of CSS, but hadn't gotten around to writing a ~~good~~ ~~decent~~ only-mildly-sucky cascading style sheet to override preferences.

Well, I've got one. [link|http://kmself.home.netcom.com/Download/userContent.css|userContent.css]. This is a default user stylesheet -- it's not referenced by a page, you copy it to the default user stylesheet location for your browser. For Mozilla this varies, under Linux: ~/.mozilla/$USER/*/chrome/userContent.css, for Galeon, ~/.galeon/mozilla/galeon/chrome/user/Content.css. Other browsers, consult docs.

This is a work in progress, it's meant to be relatively flexible. I'd like to hear from others who are using this to see how well it does/doesn't work.

I've included [link|http://kmself.home.netcom.com/Download/test.html|test.html] as a sample webpage which illustrates a number of configurations changed by the stylesheet.

Following, some notes on they why and what of this

I'm working on a CSS that results in a largely readable, presentable, workable Web experience for users, primarially of GNU/Linux, but ideally of any platform. Results for me right now are pretty good, I'm working on smoothing some edges, generalizing the stylesheet further, and simplifying it if possible. Its main aims are to: - Standardize font faces and sizes. It largely leaves you with your default selected serif, sans-serif, and monotype, as specified by your font preferences, with minimal extremes of size and face acress sites. A uniform, user-controlled, environment is IMO a Very Good Thing\ufffd. - Allow UI flexibility by respecting font face / size preferences selected by the user through font dialogs. This is not fully achieved, we're working on it. That is: the values being specified here are _derived from the user's own preferences_, to the extent possible. This isn't the case for all styles specified, but I'm trying to root out the exceptions. - Minimize the hardcoded font size range delta, while allowing a slight degree of size hinting. These are the <font size="value"> and <font size="+/-delta"> tags, and the absolute and relative size hints in CSS. Currently this is resolved by zeroing the scaling factor: all base text is presented at the same size, regardless of sizing hints. Given the rampant abuse of these features, this may not be a bad thing. Anyone with information as to how these scaling ranges can be modified through CSS is encouraged to give me a shout. - Make link appearance more uniform and/or more apparent. Overzealous web designers are making links fade into the page, frankly, the damned things are more useful when visible. This is accomplished right now by specifying a color preference for the old standards (blue link, purple visited), and by producing a highlight on hover, with more emphasis on selection. This makes links stand out without making them too obnoxious. Unfortunately, many sites use dark or blue backgrounds, making the non-hover color selection somewhat troublesome. I'm investigating a HSC (hue/sat/contr) color CSS configuration to be used for background elements. - A few other odds'n'ends, most of which tend to improve readability in my experience. Specification of H1-H6 presentation, largely for cleaner scaling and readability. Addition of a slight margin (2px top/bottom, 3 px sides), for cleaner visual seperation of page from window frame. Specific encoding of input and textarea font and size. I'm trying to get a viewsource wrap option set but it doesn't appear to work. Input, suggestions, critiques welcomed. Work in progress, subject to change. I'm also checking against the following websites. Note that the emphasis isn't to _match_ rendering without the stylesheet, but to _improve rendering_ to the point of creating an more readable page. For the news sites listed, look at a few story posts as well. [link|http://slashdot.org/|[link|http://slashdot.org/|http://slashdot.org/]] [link|http://linuxtoday.com/|[link|http://linuxtoday.com/|http://linuxtoday.com/]] [link|http://news.yahoo.com/|[link|http://news.yahoo.com/|http://news.yahoo.com/]] [link|http://www.sfgate.com/|[link|http://www.sfgate.com/|http://www.sfgate.com/]] [link|http://www.theregister.co.uk/|[link|http://www.sfgate.com/|http://www.sfgate.com/]] [link|http://kmeleon.sourceforge.net/docs/mozpref.php|[link|http://kmeleon.sourceforge.net/docs/mozpref.php|http://kmeleon.sour.../mozpref.php]] [link|http://www.embedded.com/story/OEG20011130S0034|[link|http://www.embedded.com/story/OEG20011130S0034|http://www.embedded...0011130S0034]] [link|http://www.webreview.com/1998/06_26/webauthors/06_26_98_7.shtml|[link|http://www.webreview.com/1998/06_26/webauthors/06_26_98_7.shtml|http://www.webrevie...6_98_7.shtml]] I'm using Galeon. I've specified Garamon 16pt as my default serif and sans-serif font (I don't like sans-serif body text), and Courier New 12pt for monotype. I've *NOT* selected the "use own fonts" preference.

Feedback welcomed.

Edit: Fixed link, missing start quote.

Post #20,761 by kmself 12/7/01 11:49:46 PM 12/9/01 10:09:46 PM Reply	Take back the web: CSS for the user I've been known to rant about crap web design from time to time, largely font face and size, poor color choices, and restricted viewports. I've known that most of these issues could be attacked by way of CSS, but hadn't gotten around to writing a ~~good~~ ~~decent~~ only-mildly-sucky cascading style sheet to override preferences. Well, I've got one. [link\|http://kmself.home.netcom.com/Download/userContent.css\|userContent.css]. This is a default user stylesheet -- it's not referenced by a page, you copy it to the default user stylesheet location for your browser. For Mozilla this varies, under Linux: `~/.mozilla/$USER//chrome/userContent.css`, for Galeon, `~/.galeon/mozilla/galeon/chrome/user/Content.css`. Other browsers, consult docs. This is a work in progress, it's meant to be relatively flexible. I'd like to hear from others who are using this to see how well it does/doesn't work. I've included [link\|http://kmself.home.netcom.com/Download/test.html\|test.html] as a sample webpage which illustrates a number of configurations changed by the stylesheet. Following, some notes on they why and what of this I'm working on a CSS that results in a largely readable, presentable, workable Web experience for users, primarially of GNU/Linux, but ideally of any platform. Results for me right now are pretty good, I'm working on smoothing some edges, generalizing the stylesheet further, and simplifying it if possible. Its main aims are to: - Standardize font faces and sizes. It largely leaves you with your default selected serif, sans-serif, and monotype, as specified by your font preferences, with minimal extremes of size and face acress sites. A uniform, user-controlled, environment is IMO a Very Good Thing\ufffd. - Allow UI flexibility by respecting font face / size preferences selected by the user through font dialogs. This is not fully achieved, we're working on it. That is: the values being specified here are _derived from the user's own preferences_, to the extent possible. This isn't the case for all styles specified, but I'm trying to root out the exceptions. - Minimize the hardcoded font size range delta, while allowing a slight degree of size hinting. These are the <font size="value"> and <font size="+/-delta"> tags, and the absolute and relative size hints in CSS. Currently this is resolved by zeroing the scaling factor: all base text is presented at the same size, regardless of sizing hints. Given the rampant abuse of these features, this may not be a bad thing. Anyone with information as to how these scaling ranges can be modified through CSS is encouraged to give me a shout. - Make link appearance more uniform and/or more apparent. Overzealous web designers are making links fade into the page, frankly, the damned things are more useful when visible. This is accomplished right now by specifying a color preference for the old standards (blue link, purple visited), and by producing a highlight on hover, with more emphasis on selection. This makes links stand out without making them too obnoxious. Unfortunately, many sites use dark or blue backgrounds, making the non-hover color selection somewhat troublesome. I'm investigating a HSC (hue/sat/contr) color CSS configuration to be used for background elements. - A few other odds'n'ends, most of which tend to improve readability in my experience. Specification of H1-H6 presentation, largely for cleaner scaling and readability. Addition of a slight margin (2px top/bottom, 3 px sides), for cleaner visual seperation of page from window frame. Specific encoding of input and textarea font and size. I'm trying to get a viewsource wrap option set but it doesn't appear to work. Input, suggestions, critiques welcomed. Work in progress, subject to change. I'm also checking against the following websites. Note that the emphasis isn't to _match_ rendering without the stylesheet, but to _improve rendering_ to the point of creating an more readable page. For the news sites listed, look at a few story posts as well. [link\|http://slashdot.org/\|[link\|http://slashdot.org/\|http://slashdot.org/]] [link\|http://linuxtoday.com/\|[link\|http://linuxtoday.com/\|http://linuxtoday.com/]] [link\|http://news.yahoo.com/\|[link\|http://news.yahoo.com/\|http://news.yahoo.com/]] [link\|http://www.sfgate.com/\|[link\|http://www.sfgate.com/\|http://www.sfgate.com/]] [link\|http://www.theregister.co.uk/\|[link\|http://www.sfgate.com/\|http://www.sfgate.com/]] [link\|http://kmeleon.sourceforge.net/docs/mozpref.php\|[link\|http://kmeleon.sourceforge.net/docs/mozpref.php\|http://kmeleon.sour.../mozpref.php]] [link\|http://www.embedded.com/story/OEG20011130S0034\|[link\|http://www.embedded.com/story/OEG20011130S0034\|http://www.embedded...0011130S0034]] [link\|http://www.webreview.com/1998/06_26/webauthors/06_26_98_7.shtml\|[link\|http://www.webreview.com/1998/06_26/webauthors/06_26_98_7.shtml\|http://www.webrevie...6_98_7.shtml]] I'm using Galeon. I've specified Garamon 16pt as my default serif and sans-serif font (I don't like sans-serif body text), and Courier New 12pt for monotype. I've NOT* selected the "use own fonts" preference. Feedback welcomed. Edit: Fixed link, missing start quote. `-- Karsten M. Self [link\|mailto:kmself@ix.netcom.com\|kmself@ix.netcom.com] What part of "gestalt" don't you understand?` Edited by kmself Dec. 8, 2001, 01:20:43 AM EST Edited by kmself Dec. 9, 2001, 10:09:46 PM EST Expand All History
Post #20,844 by Meerkat 12/9/01 7:14:09 PM 12/9/01 9:28:55 PM Reply	To be picky: ending quote on userContent.css link. It's a fab idea, will be giving it a good go once I can convince Mozilla to use it. On and on and on and on, and on and on and on goes John. Edited by Meerkat Dec. 9, 2001, 09:28:55 PM EST Expand All History
Post #20,863 by Meerkat 12/9/01 10:28:41 PM Reply	It be groovy. Figured out where to put it so Moz could get to it (It's under WINNT/Application Data/... on NT) and it appears to be working a treat. I fiddled around with the fonts a bit, but only because I have some bizazrre aversion to Serifs. I'll leave it on for a few days and see how I feel about it then. I might re-enable the text sizing (at least a bit), primarily so Ashton's posts will retain as much impact as possible. :) On and on and on and on, and on and on and on goes John.
Post #20,873 by kmself 12/10/01 12:40:18 AM Reply	Fixed. A view-in-place option Thanks for the head's up. It was actually a missing quote at the start of the URL, not a missing one at the end.... I've also added a test page with the stylesheet already linked in. If you want to see the differences in place, you've got a CSS-compliant browser (Mozilla, Galeon, IE5+, Opera, Skipstone, and Konqueror should all work, Netscape <=4.x won't, NS 6.x+ will), try viewing [link\|http://kmself.home.netcom.com/Download/test.html\|test.html] and [link\|http://kmself.home.netcom.com/Download/test-css.html\|test-css.html], to see the difference the stylesheet makes. `-- Karsten M. Self [link\|mailto:kmself@ix.netcom.com\|kmself@ix.netcom.com] What part of "gestalt" don't you understand?`
Post #20,937 by imric 12/10/01 4:07:53 PM Reply	Interesting. Visiting either of those pages seems to crash my Mozilla. With or without the .css I'm using the MicroImages X server on a Powermac 7200, Mozilla .94 running on a Cyrix m200 + Mandrake 8.1 chuckle Imric's Tips for Living Paranoia Is a Survival Trait Pessimists are never disappointed - but sometimes, if they are very lucky, they can be pleasantly surprised... Even though everyone is out to get you, it doesn't matter unless you let them win.

Welcome to IWETHEY!