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.

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.

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: