Email conversation
| From | Thomas Zuber |
|---|
| To | Me |
|---|
| Subject | alternate style sheets |
|---|
| Date | 15 October 2006 20:43 |
|---|
Mark,
I am using your suggestions and style switcher script to make my site more
accessible. I have a question regarding the impact of alternate sytle
sheets on page size.
I have a total of 13 style sheets. One is defined as the 'default' and the
other 12 are alternate. Each is about 20KB in size for a total of 260KB.
My question is, have I increased the size of each of my web site's pages by
240KB (260 minus the original 20)? If so, does this mean each time a
visitor views a page on my web site, it is downloading 260KB of style sheet
in addition to the content, images, etc.
Thank you.
Thomas
| From | Me |
|---|
| To | Thomas Zuber |
|---|
| Subject | Re: alternate style sheets |
|---|
| Date | 15 October 2006 22:31 |
|---|
Thomas,
> I have a total of 13 style sheets.
Wow! Seriously, that is a huge number. You have to ask yourself is it really
needed. Are there really that many different accessibility needs? Couldn't
you just have one or two that apply all the accessibility changes at once,
and not bother with most of the rest?
> Each is about 20KB in size for a total of 260KB.
That is another huge number. My biggest is 16 KB, and I consider that very
large. Why do you need so many so big? Are they sharing a large amount of
CSS, with perhaps only some colour tweaks between them? Could you put most
of the CSS into a single persistent stylesheet, and have only the
differences between them in separate stylesheets? With stylesheets this
size, surely they must be sharing a lot of the same code.
It is even possible for a few - but not all - alternate stylesheets to use
the same pseudo-persistent stylesheet like this:
<link rel="alternate stylesheet" href="common.css" title="foo" ...>
<link rel="alternate stylesheet" href="common.css" title="bar" ...>
<link rel="alternate stylesheet" href="common.css" title="baz" ...>
<link rel="alternate stylesheet" href="foo.css" title="foo" ...>
<link rel="alternate stylesheet" href="bar.css" title="bar" ...>
<link rel="alternate stylesheet" href="baz.css" title="baz" ...>
<link rel="alternate stylesheet" href="qux.css" title="qux" ...>
> does this mean each time a
> visitor views a page on my web site, it is downloading 260KB of style
sheet
> in addition to the content, images, etc.
The first time they load a page on your site, yes. All major browsers will
download all those stylesheets. Some will also download any images
referenced by those stylesheets. For subsequent pages, the stylesheets
should be cached (depending on the browser's cache settings), so they should
not need to be downloaded again until the cache expires. The first page load
will be very painful though, especially on slower connections.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Thomas Zuber |
|---|
| To | Me |
|---|
| Subject | Re: alternate style sheets |
|---|
| Date | 16 October 2006 03:50 |
|---|
Mark
Thank you for the quick response. All of your points are valid. I will
have to read up on pseudo-persistent style sheets because I honestly don't
understand them. In my current design, the 12 individual style sheets
@import a common one.
But your point of repeating code is valid. For example, in my Color-Med
style sheet, I have
dt.glossary_term { font-family: Arial, sans-serif;
font-weight: bold;
text-align: left;
font-size: 12pt;
color: #000000; }
and in my Negative-Small style sheet I have
dt.glossary_term { font-family: Arial, sans-serif;
font-weight: bold;
text-align: left;
font-size: 10pt;
color: #FFFFFF; }
If I understand your point correctly, the first three elements could be in a
common style sheet (which I have) and only the font-size and color elements
need to be in the alternative style sheets.
Your point about having 12 different styles is also valid. (#13 style sheet
is the common one.) I have probably come up with the wrong solution, but in
my research on visually impaired web users, a common recommendation is to
have a quick way for individuals to resize the font size without using the
browser menus. So I have a small (10 point), medium (12 point) and large
(14 point) font size sytle sheet. I have also have a style sheet where
font-size is in % for those who do use IE's View > Text Size to resize text.
So this takes me up to 5 style sheets. 1 common + 4 based on font size.
In my research on color perception (i.e. color blind) impaired web users,
high contrast seemed to be their need. So I have a B&W design (except for
the photos) based on black text on a white blackground (I call this
Grayscale). In addition, I have a B&W design based on white text on a black
blackbround (I call this Negative (my site is a photography site)). So in
all, this takes me to 13 style sheets. 1 common + 4 color/10pt-12pt-14pt-% +
4 grayscale/10pt-12pt-14pt-% + 4 negative/10pt-12pt-14pt-%.
I will probably do away with one of the B&W designs, but I don't know which
one yet since I personally don't know any color perception impaired persons
so I cannot ask their opinion as to which one to keep.
p.s. If you want to have a look, it is at [URL] and the
style selection is the drop down box. I have it working in Firefox and IE.
In Opera, if I pick a style, click around the site, it works fine. If I
click the refresh button, that page reverts back to the default style, but
if I click links to other pages in the site, the style used is the one I
selected. Haven't figured that one out yet.
Again, thanks for all your help.
Thomas
| From | Me |
|---|
| To | Thomas Zuber |
|---|
| Subject | Re: alternate style sheets |
|---|
| Date | 16 October 2006 11:38 |
|---|
Thomas,
> I will
> have to read up on pseudo-persistent style sheets because I honestly don't
> understand them.
Importing will also work well enough, so if you are using that there is no
need to use the link tags in the way I said.
> If I understand your point correctly, the first three elements could be in a
> common style sheet (which I have) and only the font-size and color elements
> need to be in the alternative style sheets.
Correct.
> a common recommendation is to
> have a quick way for individuals to resize the font size without using the
> browser menus.
I do not see why this is needed. If you just use em units for all fonts in
all your main stylesheet, all browsers can resize using their menus without
needing extra stylesheets. Also, you can just use a simple tiny stylesheet
to allow scaling:
html { font-size: 1.2em; }
or:
html { font-size: 0.8em; }
> In my research on color perception (i.e. color blind) impaired web users,
> high contrast seemed to be their need.
If your normal design has high enough contrast, this may or may not be
needed. Try testing your site using a filter:
http://colorfilter.wickline.org/
If you feel that you really do need one, use just one - white on black seems
to be popular for this use.
People who need high contrast would also benefit from large fonts, so you
may want to default to that and not bother with the other combinations. If
you use em units for all fonts, then they can always resize using their
menus.
> So in
> all, this takes me to 13 style sheets. 1 common + 4 color/10pt-12pt-14pt-%
> +4 grayscale/10pt-12pt-14pt-% + 4 negative/10pt-12pt-14pt-%.
You are using my stylesheet switcher, so you do not need to do this at all.
It can enable combinations of stylesheets at the same time, such as the
large font stylesheet, and the high contrast stylesheet. See the
instructions for more details.
> In Opera, if I pick a style, click around the site, it works fine. If I
> click the refresh button, that page reverts back to the default style
That is expected. Onunload does not fire when reloading, since you are not
really unloading the page, just reloading it. If this causes problems, store
the preference after every change instead of onunload.