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

Bookmarklet: Inject new css rules

May 15th, 2008

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.

Paul Irish front-end development

  1. Kyle
    | #1
    Reply | Quote

    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. Paul Irish
    | #2
    Reply | Quote

    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. heather
    | #3
    Reply | Quote

    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. Paul Irish
    | #4
    Reply | Quote

    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. Buyog
    | #5
    Reply | Quote

    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. SouthWind96
    | #6
    Reply | Quote

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

Comments are closed.