Runtime Optimisation of resources breaks CSS – XPages

Recently, I had a need to specify style sheets for different media types: one for All media types (i.e. media=””) and a one with print specific styles (i.e. media=”print”). By definition style sheets cascade so, for my purposes I needed to place the print style sheet after the all style sheets.

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />
&lt;xp:view<br />
	xmlns:xp=&quot;http://www.ibm.com/xsp/core&quot;&gt;<br />
	&lt;xp:this.resources&gt;<br />
		&lt;xp:styleSheet<br />
			href=&quot;/all.css&quot;&gt;&lt;/xp:styleSheet&gt;<br />
		&lt;xp:styleSheet<br />
			href=&quot;/grid.css&quot;&gt;&lt;/xp:styleSheet&gt;<br />
		&lt;xp:styleSheet<br />
			href=&quot;/quirks.css&quot;&gt;&lt;/xp:styleSheet&gt;<br />
		&lt;xp:styleSheet<br />
			href=&quot;/overrides.css&quot;&gt;&lt;/xp:styleSheet&gt;<br />
		&lt;xp:styleSheet<br />
			media=&quot;print&quot;<br />
			href=&quot;/print-only.css&quot;&gt;&lt;/xp:styleSheet&gt;<br />
	&lt;/xp:this.resources&gt;<br />
&lt;/xp:view&gt;

All I needed to do was to apply the template to the application on the test server, quickly test it and then deploy it – or so I thought.

When I looked at the code in Firebug, I saw that the print-only.css style sheet was listed before the runtime optimised all style sheets, thus breaking the cascade as I had defined it.

<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/print-only.css&quot; media=&quot;print&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/xsp/.ibmmodres/.css/all.css&amp;amp;grid.css&amp;amp;quirks.css&amp;amp;overrides.css&quot;&gt;<br />
&lt;/head&gt;<br />

After a bit of investigation, it seems that the runtime optimisation of style sheets was paying attention to the media value and rightly excluding the print-only style sheet from the aggregated style sheets. This had caused the link for the optimised style sheets to be written after the print-only style sheet.

The Solution.

In my case, only one of the style sheets included in the optimised sheets had styles that were overruled by the print-only style sheet so, for that sheet I specified the media value as “all” and rebuilt the application and all was well.

This xpage snippet

&lt;xp:styleSheet<br />
			href=&quot;/quirks.css&quot;&gt;&lt;/xp:styleSheet&gt;<br />
		&lt;xp:styleSheet<br />
			media=&quot;all&quot;<br />
			href=&quot;/overrides.css&quot;&gt;&lt;/xp:styleSheet&gt;<br />
		&lt;xp:styleSheet<br />
			media=&quot;print&quot;<br />
			href=&quot;/print-only.css&quot;&gt;

gives

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/overrides.css&quot; media=&quot;all&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/print-only.css&quot; media=&quot;print&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/xsp/.ibmmodres/.css/all.css&amp;amp;grid.css&amp;amp;quirks.css&quot;&gt;<br />
&lt;/head&gt;<br />

Whilst this is a solution, it does mean that I now have three http requests for style sheets where fewer would be better. I then went a little further and thought that if I specified media=”all” for all of the other style sheets, the optimisation would aggregate all of the “all” sheets together as one, but this doesn’t seem to be the case. When I did that, I got:

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/all.css&quot; media=&quot;all&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/grid.css&quot; media=&quot;all&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/quirks.css&quot; media=&quot;all&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/overrides.css&quot; media=&quot;all&quot;&gt;<br />
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/RobsWorldDemo.nsf/print-only.css&quot; media=&quot;print&quot;&gt;<br />
&lt;/head&gt;

This effectively means that if a media type is specified, then that style sheet is excluded from runtime optimisation. If anyone can explain more on this, I would be happy to hear from you.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.