IE8 and IE9 CSS issue

[Alexgaw]

My PS has many modules and a very lager CSS file.
 

In IE9 and lower the PS pages are not rendered correctly

 

After long hours of search i found the reason.

IE9 and lower have 3 limitations on CSS:

 

1. Each single css file size must be less than 238kb.
2. Each css file must contain less than 4096 selectors.
3. Each css file must not contain any base64 images larger than 32kb.

 

My PS site comply with 2 of the 3. By using CCC all css files are gathered in one css file. This file has less than 4096 selectors and no base64 image is larger than 32kb BUT the size is over 420kb. Everything over 238kb is ignored by IE9. This is a huge problem since many people still run IE9 and lower.

 

Can you please help make a script that if browser is IE9 or less then the CCC cached file is divided into 2 smaller ones. That will solve all issue with IE9 or less.

[dioniz]

Maybe you can fix your css files by checking if there are any empty style blocks, use shorthanded styles, comment reduction, eliminate line brakes...

[Alexgaw]

Problem fixed by linking my theme css file directly in the header.tpl instead of using addCss function to added to the CCC cached file. This way i have the cached CCC file and my theme css file. both are now under 230kb. Still not optima since my theme file is not compressed (can be done manually).

[HerveRenault]

Problem fixed by linking my theme css file directly in the header.tpl instead of using addCss function to added to the CCC cached file. This way i have the cached CCC file and my theme css file. both are now under 230kb. Still not optima since my theme file is not compressed (can be done manually).

 

To further elaborate your solution, you can override the addCSS function in override/controllers/front/FrontController.php like this:

if ($css_uri == _THEME_CSS_DIR_.'global.css'
        && preg_match('/MSIE [6879]\./', $_SERVER['HTTP_USER_AGENT']))
    return;

parent::addCSS($css_uri, $css_media_type, $offset);

and put your theme CSS file (global in this example) in a conditional comment:

<!--[if lte IE 9]><link rel="stylesheet" href="{$css_dir}global.css" type="text/css" media="all" /><![endif]-->

then only IE9 and lower will get the uncompressed file which is under 238 Ko, hopefully.

 

(Too bad we still have to do that type of hack in 2014 because of those obsolete browsers...)

Edited November 1, 2014 by HerveRenault (see edit history)