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

21 03 2010

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.


Interesting css3 selectors nth-child, :target

5 11 2009

When I am reading the css documentation in W3c site. I met with some of the interesting selectors like nth-child and :target.

With the nth-child selector we can add different css for the even and odd elements. For example in a table we want to display different background color for the alternate rows. This we can do simply with the css. I used to write in the code to add odd class for the odd row, even class for even row using if conditions. This is really cool. We can see example at http://www.w3.org/Style/Examples/007/evenodd.

With the :target selector we can create a tabs view without using any javascript code. We can see an example at http://www.w3.org/Style/Examples/007/target

Unfortunately these selectors does not work with IE.  I was very happy by seeing these selectors but it IE disappointed me a lot.  Just because of IE  I need to write code to add different classes for the even and odd rows.  I tested with IE8 also but no luck, might need to wait till next release of IE. Just because of IE I can’t use these selectors.