How to use custom live CSS on Safari on the Mac?

Question

To use a CSS on Safari, just go to Preferences -> Advanced -> Style Sheet.

But pay attention to the "live" part. I mean, being able to edit the CSS on the fly, without needing to quit Safari and open it again. That link gives a hint from 2006 which doesn't seem to work on Safari 4, even after updating the syntax.

Would you happen to know another fix that works?

Solution 1

As an alternative to NSD's answer, after changing the user stylesheet, from the "Develop" menu, choose "Disable Caches" and refresh the page. This will force the user stylesheet (chosen in "Preferences") to be re-read. You can then re-enable caches.

Or the easiest way, from the Preferences, set the stylesheet to "None Selected" and then back to your CSS file. No need to close the dialog box or even refresh the page!

Solution 2

Develop > Show Web Inspector > Elements

This will bring up the Developer tools for Safari if you have them enabled in advanced preferences:

It will allow you to live-alter the CSS definitions and many other things. Though oddly it doesn't seem to expose the user-set custom style sheet definitions in a distinct way.

Comments

[cregox]

Ok, I admit, I forgot to say that's not exactly the point. But thanks for the hint! You can also access it trough right mouse click and "Inspect Element".

[Josh]

Glad I could help.