You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tapestry.apache.org by "Michael Wyraz (JIRA)" <ji...@apache.org> on 2011/03/07 17:17:59 UTC
[jira] Created: (TAP5-1470) Group CSS together to avoid IE's
restriction of 31 external css files
Group CSS together to avoid IE's restriction of 31 external css files
---------------------------------------------------------------------
Key: TAP5-1470
URL: https://issues.apache.org/jira/browse/TAP5-1470
Project: Tapestry 5
Issue Type: Improvement
Components: tapestry-core
Affects Versions: 5.2, 5.1
Reporter: Michael Wyraz
IE is restricted to load 31 external CSS per page. All other are ignored.
Also the number of @import declarations are restricted to 30 per css declaration.
The following change to DocumentLinkerImpl beraks the imported css into blocks. A new block starts when more than 30 @import occured of when the "media" attribute changes.
protected void addStylesheetsToHead(Element root, List<IncludedStylesheet> stylesheets)
{
int count = stylesheets.size();
if (count == 0) return;
// This only applies when the document is an HTML document. This may need to change in the
// future, perhaps configurable, to allow for html and xhtml and perhaps others. Does SVG
// use stylesheets?
String rootElementName = root.getName();
// Not an html document, don't add anything.
if (!rootElementName.equals("html")) return;
Element head = findOrCreateElement(root, "head", true);
Element existing = findExistingElement(head, "link");
// Create a temporary container element.
Element tempContainer = head.element("temp-container");
for (int i = 0; i < count; i++)
stylesheets.get(i).add(tempContainer);
tempContainer.remove();
Element container = head.element("css-container");
// Fix für IE: Immer wenn der "media" Typ wechselt oder 30 CSS erreicht sind, wird ein neues CSS-Tag aufgemacht
Element style=null;
int cssCount=Integer.MAX_VALUE;
String lastMedia="all";
for (Node _css: tempContainer.getChildren())
{
if (!(_css instanceof Element)) continue;
Element css=(Element) _css;
String href=css.getAttribute("href");
String media=css.getAttribute("media");
if (media==null) media="all";
if (cssCount>30 || !media.equalsIgnoreCase(lastMedia))
{
style=container.element("style", "type","text/css", "media",media);
lastMedia=media;
cssCount=0;
}
style.text("@import url("+href+");");
cssCount++;
}
if (existing != null)
container.moveBefore(existing);
container.pop();
}
--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira
[jira] Commented: (TAP5-1470) Group CSS together to avoid IE's
restriction of 31 external css files
Posted by "Howard M. Lewis Ship (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1470?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13003474#comment-13003474 ]
Howard M. Lewis Ship commented on TAP5-1470:
--------------------------------------------
I'm curious as to why you have so many CSS files in play on a single page? That being said, we're hoping to have CSS aggregation (much like JavaScript aggregation) for 5.3 or 5.4.
> Group CSS together to avoid IE's restriction of 31 external css files
> ---------------------------------------------------------------------
>
> Key: TAP5-1470
> URL: https://issues.apache.org/jira/browse/TAP5-1470
> Project: Tapestry 5
> Issue Type: Improvement
> Components: tapestry-core
> Affects Versions: 5.2, 5.1
> Reporter: Michael Wyraz
>
> IE is restricted to load 31 external CSS per page. All other are ignored.
> Also the number of @import declarations are restricted to 30 per css declaration.
> The following change to DocumentLinkerImpl beraks the imported css into blocks. A new block starts when more than 30 @import occured of when the "media" attribute changes.
> protected void addStylesheetsToHead(Element root, List<IncludedStylesheet> stylesheets)
> {
> int count = stylesheets.size();
> if (count == 0) return;
> // This only applies when the document is an HTML document. This may need to change in the
> // future, perhaps configurable, to allow for html and xhtml and perhaps others. Does SVG
> // use stylesheets?
> String rootElementName = root.getName();
> // Not an html document, don't add anything.
> if (!rootElementName.equals("html")) return;
> Element head = findOrCreateElement(root, "head", true);
> Element existing = findExistingElement(head, "link");
> // Create a temporary container element.
> Element tempContainer = head.element("temp-container");
> for (int i = 0; i < count; i++)
> stylesheets.get(i).add(tempContainer);
> tempContainer.remove();
>
> Element container = head.element("css-container");
> // Fix für IE: Immer wenn der "media" Typ wechselt oder 30 CSS erreicht sind, wird ein neues CSS-Tag aufgemacht
> Element style=null;
> int cssCount=Integer.MAX_VALUE;
> String lastMedia="all";
>
> for (Node _css: tempContainer.getChildren())
> {
> if (!(_css instanceof Element)) continue;
> Element css=(Element) _css;
> String href=css.getAttribute("href");
> String media=css.getAttribute("media");
> if (media==null) media="all";
>
> if (cssCount>30 || !media.equalsIgnoreCase(lastMedia))
> {
> style=container.element("style", "type","text/css", "media",media);
> lastMedia=media;
> cssCount=0;
> }
> style.text("@import url("+href+");");
> cssCount++;
> }
> if (existing != null)
> container.moveBefore(existing);
> container.pop();
> }
--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira
[jira] [Commented] (TAP5-1470) Group CSS together to avoid IE's
restriction of 31 external css files
Posted by "Michael Wyraz (Commented) (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1470?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13130423#comment-13130423 ]
Michael Wyraz commented on TAP5-1470:
-------------------------------------
The code still works almost unchanged in Tapestry 5.3. PLease consider to add it to the codebase (maybe by making it optional via settings).
> Group CSS together to avoid IE's restriction of 31 external css files
> ---------------------------------------------------------------------
>
> Key: TAP5-1470
> URL: https://issues.apache.org/jira/browse/TAP5-1470
> Project: Tapestry 5
> Issue Type: Improvement
> Components: tapestry-core
> Affects Versions: 5.2, 5.1
> Reporter: Michael Wyraz
>
> IE is restricted to load 31 external CSS per page. All other are ignored.
> Also the number of @import declarations are restricted to 30 per css declaration.
> The following change to DocumentLinkerImpl beraks the imported css into blocks. A new block starts when more than 30 @import occured of when the "media" attribute changes.
> protected void addStylesheetsToHead(Element root, List<IncludedStylesheet> stylesheets)
> {
> int count = stylesheets.size();
> if (count == 0) return;
> // This only applies when the document is an HTML document. This may need to change in the
> // future, perhaps configurable, to allow for html and xhtml and perhaps others. Does SVG
> // use stylesheets?
> String rootElementName = root.getName();
> // Not an html document, don't add anything.
> if (!rootElementName.equals("html")) return;
> Element head = findOrCreateElement(root, "head", true);
> Element existing = findExistingElement(head, "link");
> // Create a temporary container element.
> Element tempContainer = head.element("temp-container");
> for (int i = 0; i < count; i++)
> stylesheets.get(i).add(tempContainer);
> tempContainer.remove();
>
> Element container = head.element("css-container");
> // Fix für IE: Immer wenn der "media" Typ wechselt oder 30 CSS erreicht sind, wird ein neues CSS-Tag aufgemacht
> Element style=null;
> int cssCount=Integer.MAX_VALUE;
> String lastMedia="all";
>
> for (Node _css: tempContainer.getChildren())
> {
> if (!(_css instanceof Element)) continue;
> Element css=(Element) _css;
> String href=css.getAttribute("href");
> String media=css.getAttribute("media");
> if (media==null) media="all";
>
> if (cssCount>30 || !media.equalsIgnoreCase(lastMedia))
> {
> style=container.element("style", "type","text/css", "media",media);
> lastMedia=media;
> cssCount=0;
> }
> style.text("@import url("+href+");");
> cssCount++;
> }
> if (existing != null)
> container.moveBefore(existing);
> container.pop();
> }
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira
[jira] Commented: (TAP5-1470) Group CSS together to avoid IE's
restriction of 31 external css files
Posted by "Howard M. Lewis Ship (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1470?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13003474#comment-13003474 ]
Howard M. Lewis Ship commented on TAP5-1470:
--------------------------------------------
I'm curious as to why you have so many CSS files in play on a single page? That being said, we're hoping to have CSS aggregation (much like JavaScript aggregation) for 5.3 or 5.4.
> Group CSS together to avoid IE's restriction of 31 external css files
> ---------------------------------------------------------------------
>
> Key: TAP5-1470
> URL: https://issues.apache.org/jira/browse/TAP5-1470
> Project: Tapestry 5
> Issue Type: Improvement
> Components: tapestry-core
> Affects Versions: 5.2, 5.1
> Reporter: Michael Wyraz
>
> IE is restricted to load 31 external CSS per page. All other are ignored.
> Also the number of @import declarations are restricted to 30 per css declaration.
> The following change to DocumentLinkerImpl beraks the imported css into blocks. A new block starts when more than 30 @import occured of when the "media" attribute changes.
> protected void addStylesheetsToHead(Element root, List<IncludedStylesheet> stylesheets)
> {
> int count = stylesheets.size();
> if (count == 0) return;
> // This only applies when the document is an HTML document. This may need to change in the
> // future, perhaps configurable, to allow for html and xhtml and perhaps others. Does SVG
> // use stylesheets?
> String rootElementName = root.getName();
> // Not an html document, don't add anything.
> if (!rootElementName.equals("html")) return;
> Element head = findOrCreateElement(root, "head", true);
> Element existing = findExistingElement(head, "link");
> // Create a temporary container element.
> Element tempContainer = head.element("temp-container");
> for (int i = 0; i < count; i++)
> stylesheets.get(i).add(tempContainer);
> tempContainer.remove();
>
> Element container = head.element("css-container");
> // Fix für IE: Immer wenn der "media" Typ wechselt oder 30 CSS erreicht sind, wird ein neues CSS-Tag aufgemacht
> Element style=null;
> int cssCount=Integer.MAX_VALUE;
> String lastMedia="all";
>
> for (Node _css: tempContainer.getChildren())
> {
> if (!(_css instanceof Element)) continue;
> Element css=(Element) _css;
> String href=css.getAttribute("href");
> String media=css.getAttribute("media");
> if (media==null) media="all";
>
> if (cssCount>30 || !media.equalsIgnoreCase(lastMedia))
> {
> style=container.element("style", "type","text/css", "media",media);
> lastMedia=media;
> cssCount=0;
> }
> style.text("@import url("+href+");");
> cssCount++;
> }
> if (existing != null)
> container.moveBefore(existing);
> container.pop();
> }
--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira
[jira] [Commented] (TAP5-1470) Group CSS together to avoid IE's
restriction of 31 external css files
Posted by "Michael Wyraz (Commented) (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1470?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13130423#comment-13130423 ]
Michael Wyraz commented on TAP5-1470:
-------------------------------------
The code still works almost unchanged in Tapestry 5.3. PLease consider to add it to the codebase (maybe by making it optional via settings).
> Group CSS together to avoid IE's restriction of 31 external css files
> ---------------------------------------------------------------------
>
> Key: TAP5-1470
> URL: https://issues.apache.org/jira/browse/TAP5-1470
> Project: Tapestry 5
> Issue Type: Improvement
> Components: tapestry-core
> Affects Versions: 5.2, 5.1
> Reporter: Michael Wyraz
>
> IE is restricted to load 31 external CSS per page. All other are ignored.
> Also the number of @import declarations are restricted to 30 per css declaration.
> The following change to DocumentLinkerImpl beraks the imported css into blocks. A new block starts when more than 30 @import occured of when the "media" attribute changes.
> protected void addStylesheetsToHead(Element root, List<IncludedStylesheet> stylesheets)
> {
> int count = stylesheets.size();
> if (count == 0) return;
> // This only applies when the document is an HTML document. This may need to change in the
> // future, perhaps configurable, to allow for html and xhtml and perhaps others. Does SVG
> // use stylesheets?
> String rootElementName = root.getName();
> // Not an html document, don't add anything.
> if (!rootElementName.equals("html")) return;
> Element head = findOrCreateElement(root, "head", true);
> Element existing = findExistingElement(head, "link");
> // Create a temporary container element.
> Element tempContainer = head.element("temp-container");
> for (int i = 0; i < count; i++)
> stylesheets.get(i).add(tempContainer);
> tempContainer.remove();
>
> Element container = head.element("css-container");
> // Fix für IE: Immer wenn der "media" Typ wechselt oder 30 CSS erreicht sind, wird ein neues CSS-Tag aufgemacht
> Element style=null;
> int cssCount=Integer.MAX_VALUE;
> String lastMedia="all";
>
> for (Node _css: tempContainer.getChildren())
> {
> if (!(_css instanceof Element)) continue;
> Element css=(Element) _css;
> String href=css.getAttribute("href");
> String media=css.getAttribute("media");
> if (media==null) media="all";
>
> if (cssCount>30 || !media.equalsIgnoreCase(lastMedia))
> {
> style=container.element("style", "type","text/css", "media",media);
> lastMedia=media;
> cssCount=0;
> }
> style.text("@import url("+href+");");
> cssCount++;
> }
> if (existing != null)
> container.moveBefore(existing);
> container.pop();
> }
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira
[jira] Commented: (TAP5-1470) Group CSS together to avoid IE's
restriction of 31 external css files
Posted by "Michael Wyraz (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1470?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13003886#comment-13003886 ]
Michael Wyraz commented on TAP5-1470:
-------------------------------------
In the case where the problem occured it's a very modular application where most components or modules bring their own css. E.g. a tree component brings script and css for the tree, a buttonbar brings it's css and so on. That plays good together with tapestry's component model but has the disadvantage that it shows another internet explorer bug...
If you implement css aggrregation, keep the limits in mind: http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit
Also, if you aggregate css, you have to do it in a way that media type is supported in all browsers without changing the css file order. So basically the same simple algorithm shown above has to be used for css aggregation (aggregate all css together until either the media type changes or the css size limit is reached). So you will still result in multiple css and you have to deal with the problem above again.
> Group CSS together to avoid IE's restriction of 31 external css files
> ---------------------------------------------------------------------
>
> Key: TAP5-1470
> URL: https://issues.apache.org/jira/browse/TAP5-1470
> Project: Tapestry 5
> Issue Type: Improvement
> Components: tapestry-core
> Affects Versions: 5.2, 5.1
> Reporter: Michael Wyraz
>
> IE is restricted to load 31 external CSS per page. All other are ignored.
> Also the number of @import declarations are restricted to 30 per css declaration.
> The following change to DocumentLinkerImpl beraks the imported css into blocks. A new block starts when more than 30 @import occured of when the "media" attribute changes.
> protected void addStylesheetsToHead(Element root, List<IncludedStylesheet> stylesheets)
> {
> int count = stylesheets.size();
> if (count == 0) return;
> // This only applies when the document is an HTML document. This may need to change in the
> // future, perhaps configurable, to allow for html and xhtml and perhaps others. Does SVG
> // use stylesheets?
> String rootElementName = root.getName();
> // Not an html document, don't add anything.
> if (!rootElementName.equals("html")) return;
> Element head = findOrCreateElement(root, "head", true);
> Element existing = findExistingElement(head, "link");
> // Create a temporary container element.
> Element tempContainer = head.element("temp-container");
> for (int i = 0; i < count; i++)
> stylesheets.get(i).add(tempContainer);
> tempContainer.remove();
>
> Element container = head.element("css-container");
> // Fix für IE: Immer wenn der "media" Typ wechselt oder 30 CSS erreicht sind, wird ein neues CSS-Tag aufgemacht
> Element style=null;
> int cssCount=Integer.MAX_VALUE;
> String lastMedia="all";
>
> for (Node _css: tempContainer.getChildren())
> {
> if (!(_css instanceof Element)) continue;
> Element css=(Element) _css;
> String href=css.getAttribute("href");
> String media=css.getAttribute("media");
> if (media==null) media="all";
>
> if (cssCount>30 || !media.equalsIgnoreCase(lastMedia))
> {
> style=container.element("style", "type","text/css", "media",media);
> lastMedia=media;
> cssCount=0;
> }
> style.text("@import url("+href+");");
> cssCount++;
> }
> if (existing != null)
> container.moveBefore(existing);
> container.pop();
> }
--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira
[jira] Commented: (TAP5-1470) Group CSS together to avoid IE's
restriction of 31 external css files
Posted by "Michael Wyraz (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-1470?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13003886#comment-13003886 ]
Michael Wyraz commented on TAP5-1470:
-------------------------------------
In the case where the problem occured it's a very modular application where most components or modules bring their own css. E.g. a tree component brings script and css for the tree, a buttonbar brings it's css and so on. That plays good together with tapestry's component model but has the disadvantage that it shows another internet explorer bug...
If you implement css aggrregation, keep the limits in mind: http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit
Also, if you aggregate css, you have to do it in a way that media type is supported in all browsers without changing the css file order. So basically the same simple algorithm shown above has to be used for css aggregation (aggregate all css together until either the media type changes or the css size limit is reached). So you will still result in multiple css and you have to deal with the problem above again.
> Group CSS together to avoid IE's restriction of 31 external css files
> ---------------------------------------------------------------------
>
> Key: TAP5-1470
> URL: https://issues.apache.org/jira/browse/TAP5-1470
> Project: Tapestry 5
> Issue Type: Improvement
> Components: tapestry-core
> Affects Versions: 5.2, 5.1
> Reporter: Michael Wyraz
>
> IE is restricted to load 31 external CSS per page. All other are ignored.
> Also the number of @import declarations are restricted to 30 per css declaration.
> The following change to DocumentLinkerImpl beraks the imported css into blocks. A new block starts when more than 30 @import occured of when the "media" attribute changes.
> protected void addStylesheetsToHead(Element root, List<IncludedStylesheet> stylesheets)
> {
> int count = stylesheets.size();
> if (count == 0) return;
> // This only applies when the document is an HTML document. This may need to change in the
> // future, perhaps configurable, to allow for html and xhtml and perhaps others. Does SVG
> // use stylesheets?
> String rootElementName = root.getName();
> // Not an html document, don't add anything.
> if (!rootElementName.equals("html")) return;
> Element head = findOrCreateElement(root, "head", true);
> Element existing = findExistingElement(head, "link");
> // Create a temporary container element.
> Element tempContainer = head.element("temp-container");
> for (int i = 0; i < count; i++)
> stylesheets.get(i).add(tempContainer);
> tempContainer.remove();
>
> Element container = head.element("css-container");
> // Fix für IE: Immer wenn der "media" Typ wechselt oder 30 CSS erreicht sind, wird ein neues CSS-Tag aufgemacht
> Element style=null;
> int cssCount=Integer.MAX_VALUE;
> String lastMedia="all";
>
> for (Node _css: tempContainer.getChildren())
> {
> if (!(_css instanceof Element)) continue;
> Element css=(Element) _css;
> String href=css.getAttribute("href");
> String media=css.getAttribute("media");
> if (media==null) media="all";
>
> if (cssCount>30 || !media.equalsIgnoreCase(lastMedia))
> {
> style=container.element("style", "type","text/css", "media",media);
> lastMedia=media;
> cssCount=0;
> }
> style.text("@import url("+href+");");
> cssCount++;
> }
> if (existing != null)
> container.moveBefore(existing);
> container.pop();
> }
--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira