Live print CSS editing with Firebug
April 12th 4 comments
I’ve always found doing print stylesheets a chore. Just so many steps in order to check your work.
Those days are over! I’ve found a very easy way to edit your print CSS live in your browser and get instant visual feedback.
Disclaimer
The method I’m about to describe may not be 100% accurate so I suggest an occasional real live print test.
Step 1
You will need to be running the Firefox browser and have the latest version of Firebug add on. I know you can run Firebug on other browsers but I have only tested this method in Firefox so I cant speak for the rest.
So go to the page you’re wanting to tweak and open the Firebug panel.
Fig 1: Open FIrebug panel
Step 2
Click the HTML tab which will show the HTML elements contained on that page
Fig 2: Select HTML tab
Step 3
Expand the head element and find the link to the non-print CSS element or elements. Now right click on the element and select Delete Element. This will remove all the on-screen style…
Fig 3: Remove media=”screen” CSS links
Step 4
Change the media reference from print to screen on the print CSS link reference.
Fig 4: Change media=”print” to media=”screen”
Step 5
This is were the magic really happens! Now click the CSS tab and make sure that the print css file has been selected. Once you’ve done that all you now need to do is click the edit button and you’re away!
Fig 5: The editing begins…
Step 6 - the final stage
This is the easy one. Once you’re happy with the way it looks select the CSS from the Firebug panel and pasted into the real print CSS file, fire up the site in a new browser tab and do a real print test.
Conclusion
I love you, Firebug.
Excellent post man, Ive hunted for long time for something like this. I love firebug too.
Very nice article, I’ve always wondered the best way to do this.
Thanks for sharing this. it will make my life easier from now on. Firebug rocks!
[…] Check out his excellent article on live updating print CSS! […]