Drupal: CSS compression breaks layout if we use @import url

Recently we faced a unique issue in one of the drupal project. The layout used to break completly in IE. But it used to work well in firefox. Later we figured out that IE is unable to load more than 31 css files. If the css files exceed 31 files it does not load after 31 files.

If we compress the css this number of css files problem does not occur. So we enabled css compression for the performance settings page. Then the layout was completly breaking.

When we compress css, layout breaking means there are some css syntax errors which are causing css to render properly. We started fixing all the W3c css validation errors. One of the error which we are seeing is for one of the selector the background property was causing the issue. The original css is like this


#header div.drigg input-sumbit {
backgroud: transparent url('../img/image1.png');
color: #333;
}


After compress the css became


#header div.drigg input-submit {backgroung: transparent url(css/color:#333)}


The above statement telling that when we compress the url was changed. When I digg further why this is happening only this selector, then I realised that this css was written in a another css file and this was imported in style.css using @import url.

Then removed this @import statements and added these file paths in my theme .info file. Then when I compress css, layout did not break. Now it was working well in IE and other browsers.

Finally I realised that we should not use @import url, instead we can load all css files by placing them in the theme .info file.