View Full Version : Page weight with CSS

Phil_at _work
11-01-2002, 12:34 AM
Just wondering if anyone can tell me how relative CSS pages are called into the page.

I have created a page that uses <div>'s for positioning and CSS to control the text layout and BG colours of the page. It is a very crude version of CSS page layout as we had to support Net 4x browsers.

We have no server side processing available yet we wanted to add the functionality of Changing colour themes and Text size dynamically.

I have created 10 CSS files to achieve this,

I'll quickly explain:

standard with is default. File size::24kb
standard_large default w/ lg text. File size::24kb
standard_large default w/ sml text. File size::24kb

we have two other themes plus a Print CSS all at 24kb that make up the 10 CSS files.

We have had a look at the site on a dial-up connection and the page weight is almost 300kb. Takes an average 20-30seconds to load the page.

I thought the idea of having relative stylesheets, was to lessen page weight. Can someone explain what is going on here.

Any ideas on how to get around this issue?

Has anybody else tried this approach?

11-01-2002, 04:42 AM
Just wondering if anyone can tell me how relative CSS pages are called into the page
<link rel="stylesheet" href="nn7.css" type="text/css">
inside the head.

It kind of sounds like you're loading the 10 css files inside the page... instead of just one...

Or is your page actually 300K?

Phil_at _work
11-01-2002, 04:57 AM
Thanks I do know how call them into the HTML, I was more after how the browser interprets the calls.

Yes I have 10 CSS files written into the page to achieve my goal.

Where is SS processing when you need it.???..

I have one stylesheet which is the preferred ie.
It has no title and is treated as the Default CSS.

I then have::

<link rel="alternate stylesheet" ....> calls for the other ones.

My understanding is please correct me if I am wrong,

That the browser, goes to the preferred stylesheet that has a rel="stylesheet" and only loads in the rel="alternate stylesheet" when the JavaScript calls them.

Code Snip
<link rel="stylesheet" href="/internet/internet.nsf/filestores/ar0102/$file/standard.css" type="text/css" media="screen">
<link rel="alternate stylesheet" title="high" href="/internet/internet.nsf/filestores/ar0102/$file/high.css" type="text/css" media="screen">


I have a JS function written that I call like this.

<input name="HC" type="button" onClick="setNewCSS('high'); return false;" value="High Contrast">

11-01-2002, 06:04 AM
Sorry, I'm missing something...

Yes I have 10 CSS files written into the page to achieve my goal

I have one stylesheet

It has no title and is treated as the Default CSS

A web page shouldn't have ten style sheets.
I don't follow:'written into the page'.... 10 CSS files??? references maybe?

The purpose of a CSS is to do global changes, meaning several (or hundreds) of pages can be changed by changing the script. Hence these style sheets need to be external.

Think you can post the url?

Phil_at _work
11-01-2002, 06:20 AM
I know normally 1 CSS is enough,,

The reason I am using 10 stylesheets is because I want the user to have the ability to change the Colour of the page and also be able to Enlarge and Shrink the text to suit. For each of the respective themes.

To change the colour of the page I use, 3 stylesheets, 1 is my default stylesheet Orange I also have a Green and High Contrast.

To change the font size of each CSS have a _large.css and a _small.css version. This is for Large and Small text.


all have
NAME_small.css and NAME_large.css

All the stylesheets bar the default standard.css, have a relationship to the document as Alternate Stylesheet.

This means that they are not used unless they are being turned on, in this case by JS.

I would post the URL but unfortunatly the publication is still under Government Embargo. Which is a real pain in the ??? cause I think it would help my cause alot.

Basic Run Down of how my page is working:::

Everything is done by JS, Cookies and CSS.

The CSS is given a title in the HTML
<link rel="alternate ... title="standard_large".....

JS says on click setMyCSS('CSS Title')

Cookie saves the 'CSS Title' setting.

Next page loads reads cookie and alternate stylesheet is set to 'CSS Title'

11-01-2002, 06:57 AM
Sounds like you have it under control.
Just to clarify:
- you have 10 external stylesheets
- your page is 300k
- you want to shrink that to a reasonable size
- only the default stylesheet loads

I can only guess that you have plenty of graphics, or wrong filetypes like bmp files.

Just a point though, a 24k CSS is huge, likely 1000 lines or more. Possibly shrink this to.

Many editors add plenty of unnecessary code....

Can't do too much more from this end

Phil_at _work
11-01-2002, 07:02 AM
Thanks for your replies.

yeah the CSS is huge 860 lines is more around the mark, All because we had to support Nets 4.

So alot more classes were added to give us this functionality.

We have made an executive decision to drop one of the themese saves 70k and I have managed to optimise the CSS to around 12k per CSS,

Crazy times when we are maintaining it, 860 lines of uncommented CSS. Wanna swap jobs?

Once again thanks for your replies. By my explaining it to you I have actually thought of things that will help.



11-01-2002, 07:50 AM
phil, you definitely need to check out alistapart.com: