editCSS for Internet Explorer - concept
I have been thinking about writing some sort of extension for IE to edit CSS in real-time for quite some time now. Until now all my attempts actually died in vain because none of the methods I tried to get some document to apply my manipulated CSS-rules actually worked.
Basically there are two approaches to this problem; the first is to go the DOM-route (or at least MS's propriety-version of it) and walk down the stylesheets and it's rules, list them and upon changes manipulate the original rules. Downside to this is that it is not only fairly cumbersome to match a load of changes to the original version, but it is also impossible to retrieve the original literal CSS representation from IE's style-model.
The second approach is to fetch the stylesheets by other means to be able to present the raw literal representation and try to apply a changed version to the document - this is actually how editCSS in Chris Pederick's webdeveloper toolbar works (unlike Firebug which seems to take the first route with the downside that properties unknown to Firefox will be excluded in the listing).
I do like the second approach and thought it to be the most feasible option for such a feature in IE. The only problem was how to apply changes to a set of rules onto the document. It looked like a brick wall I was walking into since a lot of things I tried simply did not work. The editCSS feature in the webdeveloper toolbar simply disables the link-element and inserts a style-element with the changed stylerules, but no matter what I tried I couldn't append a new style-element with contents into a head-section and get IE to render/apply it. Sure, createElement('style') worked, but after that it was just impossible to set the element's content. After that I tried using insertAdjacentHTML which worked without errors but still IE did not seem to render and thus apply the rules in my new style-element.
But then came the eureka-moment: when the style-element had some other kind of content before or after it suddenly it woke up IE's parser:
var head = document.getElementsByTagName('head'); head.insertAdjacentHTML('beforeend', '.<style type="text/css">' + styleText + '<\\/style>');
note the dot before the style-opentag
Now I was finally in business and so I present to you a simple concept of an editCSS feature in Internet Explorer (this link will only work in IE ofcourse...)
Not to mention that this is only a concept and has a lot of limitations: it doesn't work for stylesheets on another domain (since it uses XMLHttpRequest and thus is origin-bound), it doesn't really take into account media-types, the rules for alternate stylesheets are not really respected, it doesn't allow you to modify inline style-elements, it doesn't take into account @import or @media rules, it's a popup instead of a sidebar etcetera etcetera.
An implementation in the form of a toolbar most likely will solve a lot of these problems, and the rest is a matter of finetuning the code and GUI. Problem is that toolbars in IE require some form of Shell-programming and that is not exactly my kind of thing. In fact, the lack of some simple (JScript-based) interface to get a hold onto the current opened window or tab is most likely the reason why there are so few add-ons for IE. That together with the fact that add-ons for IE require registry additions and that there is no simple distribution and deployment-format for them...
I hope that someone could help me out making this into a real IE add-on, meanwhile you can take the sourcecode, put it somewhere where you can access it and create a scriptlet bookmark in this form (without the enters):
1 2 3 4
Please do not link directly to the version on my server else I'm compelled to take it down an provide it otherwise...
Comments are closed