Internet Explorer doesn't allow more than 32 imports or large css file

[Pritesh Shah, modificado hace 10 años.]

Hello All,

I am developing theme where I am importing different css files in custom.css. I have more than 50 imports in custom.css

Its working fine in all browsers (Firefox, Chrome, Safari). But in IE it doesn't load css styles. It breaks after certain limit.
I google about css limit in IE9 and I found its limits upto 32 imports max or 4095 selectors max or 288kb max

my main.css file in .sass-cache having all the css style combined into is very huge exceeding above mentioned IE limit.

Also I found one JIRA issue in liferay for the same
http://issues.liferay.com/browse/LPS-23390

But I am not getting it work
I am not able to figure what steps should I perform to overcome this issue

Can anybody or LIFERAY STAFF can help to resolve this issue?
Any help is appreciated!!!!

Thanks in Advance!!!

[David H Nebinger, modificado hace 10 años.]

I'm sure Liferay staff are currently downloading the source for IE 9 with plans to modify the code and extend support for at least 50 imports, etc., since that's what you need.

Seeing as it's an older version, I predict they're going to have problems working with Microsoft to get the changes integrated and deployed via Windows Update.

Perhaps you could help them out by opening a bug in Microsoft's IE JIRA to let them know the code is being worked on and will be checked into the MS GitHub repository any day now and they could start letting channels know of the coming availability...

Seriously, though, IE limits are what they are, and you're left with two basic choices - trim the fat off of your code or suggest to your users they upgrade their browsers to chrome, firefox, or whatever.

[Pritesh Shah, modificado hace 10 años.]

Hello Bradley,

Thanks for the response.
Yes, 50 imports are lot but we have very rich UX.
Currently I resolved issue by dividing CSS into two and loading another CSS file in portal_normal.vm
We are re-analyzing if any redundant code/style to reduce size.

Each import wont make request, because while build WAR or deployment Liferay includes all styles from import url into one css called main.css. So it will not request for each import. But yes size of main.css will increase too much and so we faced issue.

Thanks,
Pritesh

[Nicolas Grué, modificado hace 10 años.]

Hi all,

Well, even though IE limits are what they are, the fact is that manys Companies still struggle with their IT deployments. And making people install modern browsers on their own is often completely forbidden.
Being faced with these IE issues is still a concern for many users.

It looks like others have found workarounds, for example :

• Rails
• Drupal

So yes, may be something can be done to get around these legacy-IE limits ? Maybe by optionnaly splitting the big / optimized css files into 4095 nodes and 31 items fragments...

[Nate Cavanaugh, modificado hace 10 años.]

Hi Nicolas (and Pritesh),
We have actually run into this limit within Liferay, and the way we work around it is similar to how Pritesh has done it, which is to split up the files.

You'll notice here: https://github.com/liferay/liferay-portal/tree/master/portal-web/docroot/html/css that we have portal_1.css and portal_2.css as well as taglib_1.css and taglib_2.css.
They are just files with imports.

However, we've been doing something in Liferay for years now (since I believe 4.4), which is to automatically combine all imports into one file.
We even automatically recurse into the imported files and handle infinite levels of imports, but also update the relative image paths to point to the right place.

This is all automatically handled by the minifier filter, so as long as
theme.css.fast.load=true
is set (it is by default) then you shouldn't have to worry about it.

However, for development, it's often useful to disable it, and in which case, testing in IE will still give you grief which is why we just recommend splitting it up.

We've thought about having something that automatically split it up for you, but we decided that 1. when you're developing, having too much "magic" can cause it's own set of issues, and 2. it's not a super common case, and 3. the work around is not too hard to implement.

I hope that helps, but feel free to ask any questions you may have.

Thanks!

[Pritesh Shah, modificado hace 10 años.]

Agree to all.
Now in current scenario, we are receiving requirements for very rich UX as well mobile compatibility and so are the reason, our stylesheets are growing incrementally. With these growth of stylesheet IE is creating issues. To overcome this IE issue, I have made divided CSS into two files currently keeping file size and rules in mind, I will keep on dividing further if requried.

Below is the way how I have imported another CSS file,

Add below line in init_custom.vm,

#set ($second_custom_css_file = $portalUtil.getStaticResourceURL($request, "$css_folder/second-custom.css"))

Add below line in portal_normal.vm,

#css ($second_custom_css_file)

In above code,

$portalUtil.getStaticResourceURL($request, "$css_folder/second-custom.css") 

will return minifier version of second-custom.css and its imported in portal_normal.vm similarly our main.css is got imported.

Refer my blog for refering IE issue,
http://shahpritesh.wordpress.com/2013/08/08/liferay-theme-css-limits-in-ie/

[David H Nebinger, modificado hace 10 años.]

Um, normally your mobile theme will be separate from your desktop theme, specifically due to the differences in the platform. Are you trying to keep them together for some reason?