A few days ago, while setting up a print style sheet for a site, we stumbled upon an annoying behaviour in Opera and Safari. A paragraph of text contains an inline image. The screen style sheet for the page specifies img {display: none}. No problems so far, as no browser tested will show the image on screen. But we wanted that image to actually display when the user would print the page. The print style sheet explicitly specifies: img {display:block}. Previewing this in Firefox and IE (both Mac and Win) yielded the expected results: the image displays just fine.
Opera (both version 7.2 and 7.5) and Safari (originally tested with version 1.22, and confirmed using Omniweb 5 for the older WebKit rendering engine) however, did not display the image in print preview; only a place holder for image is shown. Nor would they actually print the image (using print to PDF on OS X, we didn’t damage any tree while testing this). As far as those two rendering engines are concerned, the image is missing. A test file is available.
Because the image is set to not display for screen media, those browsers do not request the image when initialy loading the page. In itself, this is not bad, it saves some bandwidth by avoiding an unnecessary download. But once the print style sheet is called up, neither Opera nor Safari can actually display the image, as it has not been downloaded (no mention of it in the Apache log when testing this on our local development server). This raises an interesting question: avoiding the download of the print stylesheet (and objects that are called by this) at initial load time might be more efficient. But what happens if the user goes off-line, and then wishes to print the document ?
We could solve the problem on our side: instead of setting the image to img {display: none} in the screen style sheet, we moved it out harms way by positioning it off screen (img {position:absolute; left:-5500px}). Alternatively, we could have forced the image to download by attaching it as a background image to another element on the page, and again positioning it out of sight. Bugs have been filed against Safari and Opera.
Commenting is closed for this article. If you have anything to share, feel free to contact us.
More information about these options for style and layout.