Wicket
  1. Wicket
  2. WICKET-4254

IE allows only 31 stylesheet objects on a page

    Details

    • Type: Improvement Improvement
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Won't Fix
    • Affects Version/s: 1.4.19, 1.5.3
    • Fix Version/s: 6.0.0
    • Component/s: None
    • Labels:

      Description

      We ran into a limitation of IE where it only allows 31 stylesheet objects on a page [1]. This includes objects declared using a <link ..> tag as well as objects declared using <style ..> tags.

      Because we have a pluggable architecture for our CMS, and each plugin is loaded into the page when it is first used, whereby js and css resources are loaded using ajax, we run into this issue quite quickly when the user clicks around for a while.

      We have found a work around by adding the stysheets as @import statements to a dedicated <style> element, instead of adding them to the head as a link.

      I've created a patch for wicket that implements this approach. However, I am not sure if the patch is entirely to the community's satisfaction because the way one can programmatically add imports to a stylesheet doesn't allow setting the type attribute (ref attributes are not possible at all in css @import statements). Which consequently gets lost with this approach.

      On the other hand, I imagine others will sooner or later run into this limitation and want this workaround to be available to them.

      [1] http://support.microsoft.com/kb/262161

        Activity

        Hide
        Emond Papegaaij added a comment -

        In Wicket 6, it is possible to configure bundled resources, which allows you to automatically concatenate your stylesheets into one. This allows you to stay under the 31 stylesheet limit.

        Show
        Emond Papegaaij added a comment - In Wicket 6, it is possible to configure bundled resources, which allows you to automatically concatenate your stylesheets into one. This allows you to stay under the 31 stylesheet limit.
        Hide
        Emond Papegaaij added a comment -

        Isn't it possible to reduce the number of stylesheets by creating bundles? Wicket 6 supports bundles out of the box. To me, it seems a far better solution than converting the stylesheets to a stylesheet with many imports, as it also reduces the number of requests the server needs to handle and it works with AJAX.

        Show
        Emond Papegaaij added a comment - Isn't it possible to reduce the number of stylesheets by creating bundles? Wicket 6 supports bundles out of the box. To me, it seems a far better solution than converting the stylesheets to a stylesheet with many imports, as it also reduces the number of requests the server needs to handle and it works with AJAX.
        Hide
        Martin Grigorov added a comment -

        What is this <script> tag with @import ?
        Can you give an example ?
        Maybe you mean <style> ?

        Show
        Martin Grigorov added a comment - What is this <script> tag with @import ? Can you give an example ? Maybe you mean <style> ?
        Hide
        Unico Hommes added a comment -

        Yeah, I did look at that. And apart from the ajax trick in the patch I also implemented a HeaderResponse that aggregates the css references and writes them out into <script> tags as @import statements. And we use that HeaderResponse on requests that are not ajax requests. (I did not use AbstractResourceAggregatingHeaderResponse as there were still some issues with it that were not backported to 1.4.x branch which we are on.) Together these two approaches seem to work out very nice for us as we have now upped the limit on the number of stylesheets we can use on a document from 31 to 31*31. Which is more than enough.

        Yes, I think providing an extension to AbstractResourceAggregatingHeaderResponse that writes out <scrip> tags with @import statements instead of separate <link> tags is definitely something that Wicket could provide out of the box for people running into this problem.

        Show
        Unico Hommes added a comment - Yeah, I did look at that. And apart from the ajax trick in the patch I also implemented a HeaderResponse that aggregates the css references and writes them out into <script> tags as @import statements. And we use that HeaderResponse on requests that are not ajax requests. (I did not use AbstractResourceAggregatingHeaderResponse as there were still some issues with it that were not backported to 1.4.x branch which we are on.) Together these two approaches seem to work out very nice for us as we have now upped the limit on the number of stylesheets we can use on a document from 31 to 31*31. Which is more than enough. Yes, I think providing an extension to AbstractResourceAggregatingHeaderResponse that writes out <scrip> tags with @import statements instead of separate <link> tags is definitely something that Wicket could provide out of the box for people running into this problem.
        Hide
        Bertrand Guay-Paquet added a comment -

        Have you taken a look at AbstractResourceAggregatingHeaderResponse? It allows aggregating resources so perhaps it could solve your problem. Have a look at its javadoc and the GroupingHeaderResponse in wicket-examples.

        Show
        Bertrand Guay-Paquet added a comment - Have you taken a look at AbstractResourceAggregatingHeaderResponse? It allows aggregating resources so perhaps it could solve your problem. Have a look at its javadoc and the GroupingHeaderResponse in wicket-examples.
        Hide
        Unico Hommes added a comment -

        patch verified to work with IE 7, 8 and 9, for other browsers there is no impact.

        Show
        Unico Hommes added a comment - patch verified to work with IE 7, 8 and 9, for other browsers there is no impact.
        Hide
        Unico Hommes added a comment -

        The patch. Verified with IE8 & IE9. Will report wether also works with IE7.

        Show
        Unico Hommes added a comment - The patch. Verified with IE8 & IE9. Will report wether also works with IE7.

          People

          • Assignee:
            Emond Papegaaij
            Reporter:
            Unico Hommes
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development