Hacker News new | past | comments | ask | show | jobs | submit login
Live stylesheet editing (annevankesteren.nl)
31 points by sahillavingia on Sept 30, 2010 | hide | past | favorite | 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.


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.


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?


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


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


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.



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


contenteditable="" is that all?




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: