A few weeks ago I wrote a post in which I adapted an idea from a zOompf article to delay the loading of print stylesheets until after a web page has fully rendered. I finished that post with the following point/question:
Another question to ask is whether all this is actually worth the effort – even when reduced through automation. On Big Red Tin, the print.css is 595 bytes, the delay in rendering is negligible.
Chris and Jeff at Digging into WordPress picked up the article and posted it on their site. In turn it was picked up elsewhere and became the surprise hit of the summer at Big Red Tin. Not bad when one is shivering through a bitter Melbourne winter.
As a result of the interest, I decided to convert the code from the original post into a plugin and add it to the WordPress plugin directory.
As I warned in the original article, I’d tested the code in very limited circumstances and found it had worked. Fine for a code sample but not enough for a sub version-1.0-release plugin. Additional testing showed:
- Stylesheets intended for IE, through conditional comments, were loading in all browsers
- When loading multiple stylesheets, the correct order was not maintained in all browsers
Other things I wanted to do included:
- Put the PHP in a class to reduce the risk of clashing function/class names
- Keep the output code as small as possible
To support conditional comments for IE required adding each stylesheet within a separate <script> tag, using this method the output HTML takes the following form:
To maintain the order of stylesheets, I added each event to an array of functions and then used a single event to loop through the array of functions. If jQuery is used, I add multiple events because jQuery runs events on a first in first out basis.
I’ve worked out another way to keep the footprint small. Rather than creating a function to pass the stylesheet’s URL and ID to
brt_print.add(url, id), I wrote out the full function for each style sheet. I’ll fix that in the next release.