InjectCSS+
Posted by deathburger in the "other" pile 14 years ago
This is for Mozilla or Firefox or Flock or any other browser that uses Gecko and it's Javascript engine. Maybe Opera too, maybe Konq, they're pretty well behaved. Not IE because it would need to be written special for it and I won't support it's use anyway.  
 
Style Injector  
 
Some of you probably saw my InjectCSS bookmarklet in my bookmarklets journal. This is a modification of it, to inject the style tags with numbered IDs. The style injector page above is the modified bookmarklet and a demo of how it works. Feel free to inject some CSS (or some random key bashing, won't matter) to check it out.  
 
There is now a second bookmarklet, GetCSS, which will present all the injected CSS for you in a "popup" div.  
 
If you're wondering why I added IDs to the style tags, it's so that the second bookmarklet to pull the CSS out knows what to look for, and by design ignores the built-in style tags on the page you're working with.  
 
Why is this thing useful? If you're designing or modifying a skin on some site, it's easier to do it live than to hit reload every few seconds. You can get a bookmarklet to nuke all the CSS on a page from Squarefree, and from there this InjectCSS+ bookmarklet is a damn handy tool because the CSS you inject to test can be pulled back out for you (provided you don't hit reload or something) as soon as you get it looking right. No wondering, "Did I give it 2px padding or 3px?" because it's right there exactly as you entered it.  
 
There's also a thread at TEM.
8 Comments
...
deathburger: AB, the second bookmarklet is up..  
 
For anyone working with CSS (except IE users, you're outta luck), this is a pair of tools to make your life easier.
deathburger: Updated GetCSS, I had used an em in a place that needed to be specified in pixels. That should take care of the text looking too small on some pages.
AB: Now that I can actually see the CSS window, I'm able to say that it looks great! Good job, db.
deathburger: If you notice something odd like that, you gotta tell me. ;p
AB: Also, the CSS popup window is not draggable. NoScript is currently disabled. Popups are enabled
deathburger: I never made it draggable, it would bloat the bookmarklet. Is that a big requirement?
AB: It's just that, because of the current layout of my sidebar and tabs, it makes it difficult to see the bottom half of the popup. I can re-adjust the layout, though. It's no problem.
deathburger: You could always change the size of the GetCSS "window". Edit the bookmarklet and change:  
width:40em; height:40em;  
and  
width:100%;height:37.5em;  
to whatever sizes you prefer.