How to combine CSS files properly

Question

I have around 10 css files. When i link them one after the other using the link tag ie

<link rel="stylesheet" type="text/css" src="..."

everything loads properly in all the browsers .However when i string together all the files into one single file the css breaks in IE .

Works fine in FF ,chrome and safari. I even tried validating the css just a bunch of warnings

Any thoughts ?

Did you combine the CSS files in the same order as they are linked in the page? Also are you using any IE specific CSS files? — kiranvj, Jul 20 '12 at 05:07
@V413HAV Yes i linked each file individually using the link tag one after the other — Neil, Jul 20 '12 at 05:09
@zzzzBov CSS3 selector warnings like border-radius ,opacity etc. Unfortunately i have over 10 css files ,does not make sense posting all that code here — Neil, Jul 20 '12 at 05:10
what do you mean by this? "string together all the files into one single file" and what exactly it breaks? — Random Guy, Jul 20 '12 at 05:11
Create a new css file and copy each css files contents into the new one one after the other to make one css file — Neil, Jul 20 '12 at 05:12
You need to help us help you by posting a longer explanation and/or the CSS files that you were concatenating. — zzzzBov, Jul 20 '12 at 13:17
Actually I did some debugging and found out that IE has a 4096 CSS selector limit per file So when i created my one big css file the count was way over 4096 — Neil, Jul 20 '12 at 14:19
http://stackoverflow.com/questions/3211991/does-ie-8-have-a-limit-on-number-of-stylesheets-per-page — Neil, Jul 20 '12 at 14:27

score 0 · Answer 1 · answered Jul 20 '12 at 05:04

0

You can use the conditional IE tags to handle IE's weird exceptions...

answered Jul 20 '12 at 05:04

Igbanam

5,904
5
44
68

But the weird part here is that the entire css does not apply .It like i never wrote any styles for the elements – Neil Jul 20 '12 at 05:06

score 0 · Answer 2 · answered Jul 20 '12 at 06:47

Have you tried to use import and make one css called global.css with this structure:

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

/* All three CSS files above will be loaded from
   this single document. */

score 0 · Answer 3 · answered Jul 20 '12 at 07:14

It sounds like this depends on the way the CSS files were concatenated. This was not specified, but I tested with files that are UTF-8 encoded with BOM (as produced e.g. by Notepad when saving as UTF-8). If such files are concatenated using a method that simply concatenates the byte sequences, this means that the BOM U+FEFF appears within the result file too, not just at the beginning. This makes it appear between CSS rules, causing a syntax error (which should be reported by the W3C CSS Validator, but maybe the error message was not noticed amongst the warnings). In browsers, this syntax error seems to cause the next CSS rule to be ignored.

So this is conjectural, but if the rules appearing at the start of some of the original CSS files are essential to IE rendering but not on other browsers, then the symptoms would be understandable. The solution then would of course be to concatenate the files without BOM.

How to combine CSS files properly

3 Answers3