editCSS for Internet Explorer - concept

By crisp on Tuesday 6 February 2007 01:37 - Comments (1)
Categories: Browsers, CSS, Javascript, Views: 7.598

Us, non-IE users, really are spoiled; especially when it comes to the extensibility of our browsers. Who doesn't experiency the ease of webdevelopment using extensions such as Chris Pederick's webdeveloper toolbar or Firebug in Firefox on a daily basis? Ofcourse there is no job without some downside which in the case of webdevelopment is the necessary support for not-so-developer-friendly browsers such as Internet Explorer. Sure enough there is a developer add-on for IE, but in the apartment where we need the extra help the most it is still lacking an important feature: the ability to edit style-rules in real-time.

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')[0];
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.

Most important thing to note is that it also doesn't seem to work when a document has an explicit document.domain set using javascript. This must be a bug in IE but there doesn't seem to be a way around it.

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):

javascript:(function(){var w=window.open('');
w.document.write('<body><script src=\\'http://localhost/editcss.js\\'><\\/script><\\/body>');

Please do not link directly to the version on my server else I'm compelled to take it down an provide it otherwise...

Volgende: IE and 2-letter domain-names 02-'07 IE and 2-letter domain-names
Volgende: Broken parsers; the importance of BASE 01-'07 Broken parsers; the importance of BASE


By Pete, Friday 17 October 2008 22:33

The IE Developer's Toolbar doesn't allow you to directly edit CSS classes but it does allow you to edit the individual CSS properties of an element, they represented as Attributes. Obviously this is less than ideal.

Comments are closed