IE7, IE8, IE9 – 32 css files only vs. Prestashop

Compatibility Prestashop with Internet Explorer

A few customers have reported a strange problem. They uploaded their created theme ZIP's into their eshops and...
...it worked!
Well - except for IE7, IE8 and IE9. What kind of problem was this?

It's quite simple. Internet Explorer up to version 9 supports only 32 CSS files. That's true - check out this serious discussion. That seems as quite a big number, but not for Prestashop. The problem is that every frontend module has its own CSS file and if you have installed a lot of plugins you could come across a situation where you didn't  see the colors/layout you have set in the Maker.

Reason of the problems?

The reason is simple. Colors are defined in a custom.css which is loaded as the last CSS document. If the browser has already loaded 32 CSS files, this one would be ignored like it never existed.

Our solution for Internet explorer

Today we upgraded the Maker and this problem is solved by merging small CSS files into global.css. That means small (and always needed) CSS files like:
blockcart.css
blockcms.css
blockcontact.css and many others

Changes in Header.tpl to be IE friendly

This is how we edited header.tpl to remove 15 CSS files and their content has been copied into globals.css. The best part is - we did not change any core function.

{if isset($css_files)}
{assign var=forcount value=1}
{foreach from=$css_files key=css_uri item=media name=css}
{assign var=cssfile value=$css_uri|substr:-30}
{assign var=cssfile2 value=$css_uri|substr:-20}
{if $cssfile != 'actinfos/blockcontactinfos.css' and
$cssfile != '/modules/blockcms/blockcms.css' and
$cssfile != '/blockcontact/blockcontact.css' and
$cssfile != 'facturer/blockmanufacturer.css' and
$cssfile != 'countfooter/blockmyaccount.css' and
$cssfile != 'es/blocksocial/blocksocial.css' and
$cssfile != '/homefeatured/homefeatured.css' and
$cssfile != 'les/blockreinsurance/style.css' and
$cssfile != 'es/blocksearch/blocksearch.css' and
$cssfile != 'lockuserinfo/blockuserinfo.css' and
$cssfile != 'odules/blockcart/blockcart.css' and
$cssfile != 'tlinks/blockpermanentlinks.css' and
$cssfile2 != 'css/product_list.css' and
$cssfile != 'mplete/jquery.autocomplete.css' and
$cssfile != 'odules/blocktags/blocktags.css'
}
{assign var=forcount value=$forcount+1}