is there any limit on css file size?

Question

I am using ASP.NET MVC to develop a site. The CSS file has grown to 88KB and is having a little more 5,000 lines. I noticed recently that styles added at the end are not there in the browser. Is there any size limit on CSS file or on the number of lines?

EDIT: Sorry I forgot to mention that this problem is occurring in Windows 7 both in FireFox and IE8.

Answer 1

Your question is:

Is there any size limit on CSS file or on the number of lines?

The answer, for IE9 and lower, is yes, depending on what you mean by "lines" and "size limit".

1. Size: the max size style sheet that IE9 and less will read is 288kb. Any styles after that mark do NOT get read. Read this article by Joshua Perina for a little more info on this.
2. There is no max on the number of lines in a style sheet that I'm aware of. There is a max on the number of selectors. IE9 and lower stops reading (and may not even load a file, that info seems to be up in the air) at 4095 selectors per style sheet. (see linked article below)
3. If by "lines" you mean how many lines of @import linked style sheets you can add per file, you can have 31 max style sheets imported in. Each stylesheet can have 31 max @imported style sheets. (see linked article below)
4. @import nesting supports up to 4 levels deep.

This article on MSDN talks a little more about the max selector and linked style sheets, and how they came to those numbers when developing IE.

Answer 2

I think that if you are having problems with the size of your css files then it is time to rethink your styling strategy. The C in CSS stands for cascading. Quite often when CSS files get too big it is due to styles not being re-used where appropriate and through poor use of the cascading behaviour.

I don't say this lightly. I have worked on some large, complex retail sites and currently on very complicated financial trading applications. Whenever I have come accross sites with more than a few hundred styles, we have achieved large improvements in design, reductions in complexity and improvement of maintainability by reducing css complexity.

One place to start is doing a Google sesarch on css reset. There are multiple different implementations, but they generally follow the theme of overriding the differences in layout for each of the browsers and removing arbitrary borders, margins and padding etc. Starting with a clean slate, if you will. Then you can go ahead and build up your styles from there, being careful to make the most of cascading and css chaining

Chaining is where you have more than one class on an element. eg:

<div class="box right small"></div>  

box might have some general styles that you might like to apply to many block elements such as div, h1...h6, p, ul, li, table, blockquote, pre, form. small is self explanatory right might simply be aligned to the right, but with a right padding of 4px. Whatever. The point is that you can have multiple classes per element and build up the styling from reusable building blocks - groupings of individual style settings. Otherwise known as classes.

On a very simple level, look for oportunities to combine styles:

so:

h1 {font-family: tahoma, color:#333333; font-size:1.4em;}  
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}  
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}  

becomes

h1, h2, h3 {font-family: tahoma, color: #333}  
h1 {font-size:1.4em;}  
h2 {font-size:1.2em;}  
h3 {font-size:1.0em;}  

Only, slightly smaller, but do this kind of thing lots of times and you can make a difference.

Also, Validate your css. This will help you spot errors in your code.

Answer 3

Have you validated your CSS? Some browsers will include styles up to the point of a syntax error (or certain syntax errors) and then effectively truncate the file for you, leading to just this behavior.

I'd also vote for refactoring your CSS, you can probably get away with a bit less . . .

Answer 4

What does the CSS validator say about your CSS rules?

Cut and paste the last "ineffective" rules of your stylesheet at its beginning: are some of them now working?

Obvious typo errors can be seen with a good text editor like PSPad, Notepad++, Scite: " ; /* */ and so on. They have a pretty limited scope like ; or are easily seen like a comment not closed. The less obvious one I encountered was not closing a parenthesis:

background: green url(img/dummy_gradient.png left top no-repeat;

Nothing worked till the next ) in my CSS rules 50 lines below!

Answer 5

If you're not seeing additions to the bottom of the file reflected, see if you can spot where it breaks and look for stupid errors and mistakes. CSS will fail quite silently, but will still happily work up until it does.

This could be the cause of your worries.

Answer 6

There is no limit for most normal browsers (as pointed out in most answers). Another very important consideration. If you compress your responses, in Apache I would use gzip or deflate, the file size is reduced dramatically. Since CSS is very repetitive, and for example, in your 5000 lines you use the word "color" 800 times, the compression will only send one instance of the word "color" to the browser with 799 references to the word in the compressed dictionary. So your file may be 88K on disk, but 9K over the wire.

Tools like FireFoxes Firebug are useful to see the compressed file size. I am sure IE has a http header viewing tool.

So to make my point, the 88K is the file size on disk, while, if using compression, you need to consider the file size in the response.

Answer 7

There is of course a limit for what browsers can handle, but it's certainly a lot more than 88 kilobyte or 5000 lines. An educated guess would be something like a megabyte or 65535 lines... You are likely to run into performance problems long before you reach the limit.

The reason that you don't see changes appear is probably caching. You can use Ctrl+F5 to clear the cache for the page in your own browser (as Darin mentioned.)

We rename the CSS file when we publish a new version of it, to be sure that all visitors gets the latest version.

Answer 8

Internet Explorer has is said to have a limit of 4096 CSS rules per file. There's a limit on the addRule function that seems to apply to rules applied through a style sheet as well: Reference

Also, it has a limit on the number of style sheets you can embed in a single document. I think it is 20.

Answer 9

Theoretically, there isn't a limit.

Practically, most normal browsers (FF, Chrome, Opera, Safari) can handle whatever you throw at them. Some of the older and/or mobile browsers however (Access NetFront, for one - bundled with many mobile phones) run into problems with largish pages (about 100KB and above) and throw all kinds of errors.

TL;DR: No, unless you're trying to support all kinds of weird browsers.

Answer 10

There might be in some browsers (I’ve not heard of one, but it’s possible), but 88 KB is absolutely fine for a CSS file.

Answer 11

No there isn't a limit. Probably the file is being cached and that's reason you are not seeing modifications. Try clearing the browser cache or Ctrl+F5.