CODEWITHSUNDEEP
asp.net-mvc-4bundling-and-minification
NikolaiDante
NikolaiDante

Reputation: 18639

CSS Bundling and Internet Explorer's Limit

When I add jquery ui to the bundle I end up with:

bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"

Internet explorer has a limit of 31 style sheets it will load, of which jquery has taken 12. Add in yui reset, base and fonts I'm at 15 style sheets already, with none of the sites styles or plugin style sheets loaded in.

Obviously, everything works fine when it is bundled as there is only one stylesheet generated. My first instinct was to use the ones that use @Import but that causes bundling to fall over or not minify.

What is the best workaround for this, other than fewer style sheets? My current solution is a #if DEBUG construct but is there a better way?

#if DEBUG
     bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/themes/base/jquery.ui.all.css"));
#else
     bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));
#endif

Upvotes: 2

Views: 1110

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

If you really need all the themes simply include the jquery.ui.all.css in DEBUG and RELEASE modes.

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/themes/base/jquery.ui.all.css"));

This way in DEBUG mode you get a single CSS file and in RELEASE mode you get a single, compressed CSS file served with cache headers.

Upvotes: 1

Related Questions