Live stylesheet editing

annevankesteren.nl

31 points·sahillavingia··13 comments

As a side note, the web developer toolbar in FF (and maybe chrome, I haven't checked) is able to do this.

Interesting find. I could use this idea in Stylebot (http://stylebot.me). It's a Chrome extension that allows you to live edit a custom stylesheet for any page on the web.

In Firefox https://addons.mozilla.org/en-US/firefox/addon/179/

Does this have any functionality over what web developer and firebug provide?

Funny...I can't see the source code. But I can edit the stylesheet.

This is pretty cool.

1) How is it done?

2) How are you hiding how it's done?

Edit: Is it done through a Chrome extension?

The STYLE element has the attribute 'contenteditable' and the CSS style 'display: block'.

It looks like he just uses the "contenteditable" property ( http://valums.com/edit-in-place/ ) to make it editable, and then displays it as a word-wrap: pre element.

While I can't think of any immediate applications, I had never realized that contenteditable was so widely supported. I'm going to have to try using it in my next project...

There's no such thing as a 'word-wrap: pre element'.

It would have been more interesting if the first thing I did wasn't to change em's to px's. Apparently I can't read 2px text.

Doesn't much like Adblock. It displays all the code, but doesn't allow editing it.

I doubt that is a problem with Adblock itself. I guess you mean you are using Adblock Plus with a filter subscription? Check what things are filtered on that page based on your filters.

Oh, sorry, just realized that may have been interpreted incorrectly. The page works, but only with the example CSS - the Adblock code on the page is uneditable.

contenteditable="" is that all?

Reply on news.ycombinator.com