Class Dependant CSS Import?

[flamingmo]

Hi Everyone, it's my first post, so please be kind... :-)

I've had a look through the board and although CSS importing has been covered in quite a few topics, I have what I think is a unique challenge, which is to import a specific stylesheet depending on the class set in my body tag. Let me explain.

I am using the usual <link> tag to import my "screen" stylesheet into each of my pages. This provides basic structure and formatting, which I've put together specifically for older browsers.

This layout is complimented by the import of another sheet called "styles" from within "screen", which to provides section-specific colour schemes and a few bells and whistles for newer browsers. As the @import function means that the new styles are hidden from NN4 and IE4, if someone visits using an ancient browser, they get one view; if they visit with something newer, they get antother - simple, eh?

Now, here's the difficult bit. I have set my body tag on each page with a different class, which when set to a specific name such as "home", tells the menu which item to show as active and which section-specific colours or formatting to display. The menu info comes from my "screen" stylesheet, the colour and formatting from "styles".

As you can imagine, a single stylesheet covering all possible colour schemes and formatting for each section (8+) would be - in fact, is - huge, so I wanted to know if any one has any suggestions for importing a stylesheet depending on the body class that has been set?

One last thing, I realise I could just manually link section-specific stylesheets to pages (!!!) but I'd really like to automate the process as it's quite possible that I won't be the only person making future changes to the site.

Thanks in advance for your help,


Mo

[Banfa]

As you can imagine, a single stylesheet covering all possible colour schemes and formatting for each section (8+) would be - in fact, is - huge, so I wanted to know if any one has any suggestions for importing a stylesheet depending on the body class that has been set?

How big (in kbytes) is huge?

Remember that if all the pages are linked to the same style sheet what should happen is that that style sheet will be downloaded with the first page but after that the users browser should just access it from the browser cache (this is 1 of the stated advantages of style sheets in CSS files).

Personally I don't think what you want to do is actually possible, well may be using javascript but then you are just putting in another thing that can go wrong/be switch off.

[flamingmo]

How big (in kbytes) is huge?

Remember that if all the pages are linked to the same style sheet what should happen is that that style sheet will be downloaded with the first page but after that the users browser should just access it from the browser cache (this is 1 of the stated advantages of style sheets in CSS files).

Personally I don't think what you want to do is actually possible, well may be using javascript but then you are just putting in another thing that can go wrong/be switch off.

Banfa, thanks for your response.

To answer your question, the style sheet was sitting at around 17k - I normally stick to a max of 10k, with most of mine hitting between 4-8k each.

In order to decrease the file size ensure a reliable graceful degrade of some features I have gone back to my initial thought, which was to use a master style sheet that provides a very basic level of formatting/colour, then use "@import" to bring in the page elements I spoke about in my post.

Whether I cascade this function to form a small chain of stylesheets, I'm not sure but I'll have fun trying.

Regardless, I've tested out this approach and it seems to provide a stable solution. I suppose I'll have to keep wishing for some form of selector-based CSS import functionality in a future version of the CSS standard!

Thanks very much for your sanity check,

M