Home > front-end development > Bookmarklet: Inject new css rules

Bookmarklet: Inject new css rules

I love doing as much CSS debugging as I can without hitting reload. (see also: my 'refresh css' bookmarklet)

newcssrule.PNGFirebug 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.

front-end development

  1. May 15th, 2008 at 21:32 #1

    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.

  2. May 15th, 2008 at 22:49 #2

    Indeed. I basically test things out in firebug console.. Make sure it works.. then wrap it in some

    (function(){
      // happy self executing anonymous function
      // to keep everything out of the global scope.
    })();

    Then use packer to minify it. and add javascript: in the front. Voila!

  3. May 20th, 2008 at 11:14 #3

    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!

  4. May 20th, 2008 at 11:17 #4

    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. :)

  5. September 1st, 2009 at 08:23 #5

    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. :)

  6. October 23rd, 2009 at 06:06 #6

    But taking care of your mental health is too important to ignore, even if it embarrasses others close to you. ,

  1. April 1st, 2009 at 13:29 | #1
  2. April 1st, 2009 at 13:49 | #2

For code blocks, use <pre lang="javascript">. css and html4strict are also accepted.