IE9 BUG: There are 5940 CSS rules in the stylesheet e0264.css - IE will ignore the last 844 rules!

[cesco69]

W3TC merges all css in one file, but IE 9 handle only 4095 CSS rules per file.

IE 11 console show this error:

There are 4940 CSS rules in the stylesheet e0264.css - IE will ignore the last 844 rules!

Referring the following from Microsoft:

• Stylesheet Limits in Internet Explorer
• KB - A webpage that uses CSS styles does not render correctly in Internet Explorer

The rules for IE9 is: A sheet may contain up to 4095 selectors!

[Volnus]

This isn't an issue with W3TC but it is an issue with IE 9. The recommendation is to have as few http requests as possible. The only way this would work is to combine only a set number of files.

You could try breaking your CSS. so if you are using plugins like WooCommerce only load its styles and scripts on its pages, apply the same logic to something like BuddyPress and bbPress and you will be good.

Or my favorite option ignore IE 9 and leave a message when they visit the page.

<!--[if lt IE 9]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->

[amiga-500]

Hi @cesco69! I was just pondering the possibility of writing some code for w3tc to break up merged css files based on a user-set limit to the # of selectors, but then realized the complexity to do that is no easy feat when i consider things like the media tag and imports have to also be taken into account when splitting these files.

So yea as @Volnus said, your best option to handle IE9's css flaw is to make use of wp's extensive filter/action apis and only remove the unneeded css files for the loading post/page. By doing it that way the amount of css files being merged will hopefully drop dramatically and below the 4095 ie9 selector limit. I can only presume that not all of your pages need all of those css files.

If you do decide to go this route then you could use the _wp_printscripts action within your theme's functions.php file to remove unneeded css files:

add_action('wp_print_styles','my_dequeue_styles',99);
function my_dequeue_styles()
{
    gobal $post;
    if (is_single() && $post->ID == 999)
    {
        wp_dequeue_style("style name");
        wp_deregister_style("style name");
    }
}

You probably will need to use something besides the post id than what i used in my example since you likely have many similar pages with css files that need removing. So using some meta data that is shared across groups of posts/pages may be in order.

Just a thought.

Cheers Kimberly

[cesco69]

thanks @amiga-500 ! my final solution is don't serve minified file for IE <= 9 (option reject user agent)