Live stylesheet editing

http://annevankesteren.nl/test/contenteditable-style.htm

by sahillavingia • 16 years ago

31 13 16 years ago

Groxx2• 16 years ago

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

aw3c2• 16 years ago

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.

Groxx2• 16 years ago

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.

marcamillion• 16 years ago

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?

noibl2• 16 years ago

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

harisenbon• 16 years ago

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

noibl2• 16 years ago

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

ursablanco• 16 years ago

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.

ankit_• 16 years ago

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.

poundy• 16 years ago

contenteditable="" is that all?

ck2• 16 years ago

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

barfoomoo• 16 years ago

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

misterbwong• 16 years ago

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

Live stylesheet editing

Related Stories