Bookmarklet: Inject new css rules
I love doing as much CSS debugging as I can without hitting reload. (see also: my 'refresh css' bookmarklet)
Firebug can get you a far way in playing with styles. You can edit current css rules and add new styles to a given element, but there is no way to add a brand new rule to the page. UNTIL NOW!!!
Drag this bad boy to your bookmark bar:
Update (2009.02.06):
This will work in all browsers (ie6+,ff,saf,chrome). [Source here]
>>> newcssrule <<<
The code is obviously trivial, but it's a helpful button to have around sometimes. Plus you can then edit those rules in firebug immediately.
For full compatibility, understand the landscape at InstallStyles on Google Doctype.
nice nice. I shuddered when I read your post because I was at battle today w/ a bookmarklet that I'm currently working on.
They can be a real pain in the ass.
Indeed. I basically test things out in firebug console.. Make sure it works.. then wrap it in some
Then use packer to minify it. and add
javascript:in the front. Voila!oh that is handy!
to add CSS classes, i usually select an element in the left inspection area- then right click on the white space in the right CSS editing area and click 'Edit Element Style'…
it works but your bookmarklet is much easier.
thanks!
Ah. I do that too many times, but sometimes I want a rule for ALL occurences of a class or something. When its not just limited to a singluar element. :)
Thought this was clever when I first read it, but didn't see the immediate need at the time. This morning I found myself wanting the ability, and I remembered you'd already worked out how… so now I've added your bookmarklet to my little arsenal, thanks. :)
But taking care of your mental health is too important to ignore, even if it embarrasses others close to you. ,