Forum Moderators: not2easy
First I want to let you know that English is not my mother tongue...
I am employed at a comparison site in Holland, since a short time we are actively using CSS. But.. The main css file is getting a bit too big (as the site has a very complex design and a lot of different pages)
At one moment the CSS file got over 67 K!
Now I have a problem, because, that is way too much, and some browser fail loading the stylesheet completely.
Is it a good idea to make different small stylesheets?
I have seen that firefox aswell as IE have problems with that, not loading the stylesheets all the time and so on.
Is there something I can do here?
Reducing the css file is impossible :-( I brought it back to 51 K.
I can use different stylesheets for different pages, but one of the advantages get lost than..
Thnx
xfinx
I have one CSS file included by all the pages where I put only the common styles, used in every single HTML file. It is seldom that I go over 10k in this file...
I put the styles used more than once on each individual page at the beginning, in <style> </style> tags.
And, finally, I put styles used only once, on specific HTML tags in the style attribute.
Cata
Everything goes in external CSS files.
I have been playing with a new site where there is one CSS file for the stuff that is common to all pages, and then four other files where each one is for a different section of the site (there are four sections), and finally there is a separate CSS file for styling the javscript driven pop-out menu bar (the navigation is plain HTML links in a DIV, and that code is "included" as the last item on every page; CSS is used to style the items and the javascript does the slide out {if the css and js did not load then you would still be able to see the menu items!})
I am pretty familiar with CSS, but the site I have built is HUGE! there are about 20-30 totally different layouts, but it is all connected to each other using the standaard.css, and some other stylesheets.
Only that stylesheet is a bit too big which causes an error in some cases, an error means, bad loading..
I was wondering, is there a good way to use multiple stylesheets (the same on every page) without the browser to fail loading. Maybe include a stylesheet in another stylesheet?
My average stylesheet is about 8K, but it is all css than, no tablestuff.
Thnx again :-)
If that were even possible, what leads you to believe that it would make life any easier on a browser? Instead of referencing one file, it would have to reference a file that references another file...
No matter though, since it doesn't work that way. There's really no rocket science behind this... if the people who replied are "mistakently" giving you advice on technique rather than some magical fix for having too much CSS content, then it's because there is no fix. 5 external CSS stylesheets @ 2k a piece is really not different from 1 CSS file @ 10k... it's all about whether or not you need to separate out your CSS, into 5 different sheets, which it sounds like you do.
Please tell us how many different "layouts" you need for your site... a 51k CSS file is huge, and probably unnecessarily so. Your CSS might need some cleaning... but if you really need all that CSS, you might want to just consider creating a different stylesheet altogether for each page, so that no extraneous CSS is getting downloaded.
Though I must opine:
A website with a different layout for each page does not sound like a very enticing website.
You can take a look at the site, it is vergelijk.nl
and see it yourself..
Thnx I just needed your post..
"Maybe include a stylesheet in another stylesheet?"If that were even possible,
Just for the record, you can use @import (mystyle.css); at the top of a stylesheet to reference another sheet.
Same for @print etc
I that was the answer to my question. But I noticed that it is stupid to do it that way (in my case).
Thank you all!
/me is getting back to the sourcecode ;-)
do you know if a browser treats it as a single css file?
No. In fact, the order of imported stylesheets is a big part of applying the cascade. Organizationally, you might find creating one stylesheet for common styles, then a stylesheet for each different layout is best. YOu can then create a stylesheet for each given page (or even do it in the head) that imports the necessary stylesheet sfor that page. If your site is dynamic rather than static, you can code the output @import lines right into the PHP (or whatever) of the site, totally automating the process.
So say you have a members profile section of the site which has some styles common to the whole site, some common to the members section, and some specific to the profile page...
<style type="text/css">
@import(common.css);
@import(members.css);
@import(profile.css);
</style>
If you're passing variables around that identify the section of the site, a server side script could use those variables to write the above code into the head of the page making this process hands-off and highly portable, with each page loading only the styles it needs.
If you just want to section up the stylesheet so it loads as different files and not one big one, you could divide it up into parts ... say one.css, two.css and three.css ... and import them in the same way described above. This won't save you any load time, but it might prevent loading errors from a too large CSS file, if that is indeed the source of those errors.
cEM
