Ie Question: How Many CSS Includes Can It Handle

IE Question: How many CSS includes can it handle?

Internet Explorer has a maximum limit of 32 CSS file links. Definitely a browser issue. You'll need to think about consolidating your css requests.

Generally you can do this by concatenating them if they're static files, but if you're generating them programatically, you might have to look at a solution to manipulate the response before it gets passed to the browser.

We had to get around this issue for our enterprise ASP.Net project and ended up writing a "Css Multiplexor" that examined the response, found the requested CSS links, generated a web resource for one big css file, and output a link to that instead.

Internet Explorer's CSS rules limits

Referring the following from Microsoft:

• Stylesheet Limits in Internet Explorer
• KB - A webpage that uses CSS styles does not render correctly in Internet Explorer

The rules for IE9 are:

• A sheet may contain up to 4095 selectors (Demo)
• A sheet may @import up to 31 sheets
• @import nesting supports up to 4 levels deep

The rules for IE10 are:

• A sheet may contain up to 65534 selectors
• A sheet may @import up to 4095 sheets
• @import nesting supports up to 4095 levels deep

Testing the 4095 rule by sheet limit

By way of confirmation, I've created a gist with 3 files. One HTML, and two CSS files.

• The first file contains 4096 selectors and means that its final selector doesn't get read in.
• The second file (4095.css) has one less selector, and gets read in, and works perfectly in IE (even though its already read another 4095 selectors from the previous file.

is there any limit on css file size?

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.

How to fix CSS3 column-count for IE?

Multi-column layout is not supported by Internet Explorer, even version 9. However, current versions of Chrome, Firefox, Safari and Opera all handle CSS3 multi-column layout without a problem.

If you need to support browsers that don't have multi-column support, then you should have a fallback option for those browsers. Here is how you can do it with the Modernizr script

Place the following SCRIPT tag in your HEAD after any other style sheets:

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

Add another SCRIPT below the above line that reads:

<script>
Modernizr.load({
  test: Modernizr.csscolumns,
  yep: 'columns.css',
  nope: 'no-columns.css'
});
</script>

Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.

Create a CSS style sheet that contains your fallback CSS (such as columns with float) and save it as no-columns.css in the same directory.

I found a article on this: Read this

and here already a answer available for that : Question

Does IE 8 have a limit on number of stylesheets per page?

Yes, IE8 (and even IE9 apparently) limit the number of style sheets to 31 per page.

Telerik has an article and test page which demonstrate the issue. According to comments in the same article, the 4096 rules per file limitation has been marked as Won't Fix in Microsoft Connect but I've been unable to verify that.

Single huge .css file vs. multiple smaller specific .css files?

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

http://lesscss.org

http://sass-lang.com

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

http://incident57.com/less/

Or you could use CodeKit (by the same guys):

http://incident57.com/codekit/

WinLess is a Windows GUI for comipiling LESS

http://winless.org/

How do you deal with Internet Explorer?

Do you specify a valid doctype? You can get Internet Explorer to be a bit more compliant by switching it into standards mode. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

Do you use a browser reset CSS file? That can help bring the versions together. http://meyerweb.com/eric/tools/css/reset/

Be aware of IE's CSS bugs: http://www.positioniseverything.net/explorer.html

For the skeleton of your layout, consider using markup that is known to work, such as http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts or http://960.gs/ for liquid or fixed layouts, respectively.

Keep up with JavaScript differences between browsers. jQuery handles some of them, but not all of them. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

Yeah, IE is a pain. If you want it to work in IE, you really want to test in IE every couple days. You don't want to save the pain for the end--you want to handle the nightmares one at a time.

---

By the way, if you think IE is a pain, try looking at your page with a mobile phone. The other day I went to REI.com with an iPhone and the middle fifth or more of the screen was taken up by a bunch of garbled markup that rendered as text.

Best way to include CSS? Why use @import?

From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:

@import url("stylesheetB.css");

then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link> elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

---

Related Topics