I’m working on a page which is using jQuery to show one block of content at a time from a group of blocks, managed by a navigation. It’s working very nicely, but geting to the later stages I start trying to get print styling working.

Ordinarily, I’d attach a print stylesheet and hide irrelavant things like navigation, and show anything that I want to print that is hidden as per Eric Meyer’s classic article in A List Apart ‘Going to Print‘ - in this case it would be ideal to have all the content blocks printed. But jQuery has rewritten all styling so the print stylesheet which loaded with the initial page rendering can’t help. Or can it?

After much research, herad scratching and good old ’suck it and see’ experimentation, I’ve determined that yes the theory still holds, you just have to apply a bit more brute force.

jQuery manipulates page styling through use of inline styles. Linked stylesheets can still override inline styles if given a ‘!important’ suffix. So for instance: <style media=”print”>.switchable {display: block !important;}</style> should keep content hidden by $(”.switchable”).hide(); visible.