<style> element in IE

[Jason Essington]

I have a need to add or remove <style> elements to the head of a
document. These will hold temporary, dynamically created stylesheets.

so, I've got a method that does something like:
Element style = DOM.createElement("style");
DOM.setAttribute(style, "type", "text/css");
DOM.setInnerText(style, "<!-- "+css+" -->");
DOM.appendChild(getHead(), style);

This works exactly as expected in Safari and Firefox, the element is
created, and the new style is applied to the document.

However, in IE, the setInnerText line throws a javascript exception
(unknown runtime error.

the section of generated javascript that seems to be the source of
this is:
function
com_google_gwt_user_client_impl_DOMImplIE6_setInnerText__Lcom_google_gwt
_user_client_Element_2Ljava_lang_String_2(elem, text0){
if (!text0)
text0 = '';
elem.innerText = text0;
}

right at the "elem.innerText = text0;" line.

so it appears that IE is unwilling to allow innerText (or innerHTML
for that matter) to be set on a style element.

Does anyone know if this is actually the case, or am I overlooking
something else?

-jason

[ash]

jason,

u may want to ping mP and take a look at his work at dynamically
injecting and modifying style in an application.

ive had offline discussions with him about the concept, but not really
spent any time with the implementation.

http://rocket-gwt.googlecode.com/svn/trunk/Rocket/src/rocket/client/style/

rgds ash
http://www.gworks.com.au

[mP]

Hi Ash and Jason

Yes i have nearly finished on an abstraction based on Map and LIst
views for StyleSheets, Rules and Style objects.

Basically the browser StyleSheet collection is represented as a List.
Each stylesheet has a list of Rules. Each Rule has a selector(r/w) and
an associated Style which is a map view of all available Style property
values.

I am just working on the Opera implementation. Unfortunately in Opera 9
( 8.x dont expose StyleSheets/rules/Styles) when one inserts a rule
upon a StyleSheet the index is ignored and the Rule is appended in the
last slot. This is unfortunate as one thinks that the rule has been
inserted into the Rule list in a certain slot but the Rule actually
appears in a different location.

I am having debates with my invisible friend on what to do in this
case.

Let me if you wish to test or something. Should release it under the
rocket-gwt library in a few days.

[mP]

Unfortunately Opera appends rules ignoring the insert index. The only
way i can tell to get around this is too recreating the rules that
appear after the insert index so that they too are appended. Eventually
all rules appear in the correct slot.

Original rules.
a/c/d

insert b at 1 becomes
a/c/d/b

delete c and append
a/d/b/c

delete d and append
a/b/c/d

This is a hack i guess it works but it seems a little inefficient...

[Jason Essington]

So, I guess you've already investigated the path that I am attempting
and found it to not be viable?

-jason

[mP]

I believe what you are attempting is a hack. The W3c and browser
vendors have provided a proper interface via the stylesheet/rule/style
objects which is what I am working on. Do a search on quirksmode for
further details if you wnat to know whats available.

EMail me if you want a project that works and includes tests for the
stuff ive mentioned.

[Jason Essington]

O.K. I've found a reasonably easy method for creating a new
stylesheet in IE ...

private native void addStyle(String css)/*-{
var ss = $doc.createStyleSheet();
ss.title = "worksheet";
ss.cssText = css;
}-*/;

which is fine and does exactly the same thing on IE as my previous
code does everywhere else ...

now, the problem is that no one else seems to support the
createStyleSheet() method, but the result becomes exactly the
same ... a new stylesheet being created in $doc.styleSheets

Now, in my previous attempt it is a simple matter to remove the added
style sheet by removing it from the DOM, but IE doesn't appear to
provide any method to remove this newly added sheet.

-jason

[Jason Essington]

O.K. I got it

This works in IE, FireFox, and Safari. dunno about Opera though.

to add a style sheet (presumably generated on the server and supplied
as a string)

CSSUtil.addStyleSheet("someName", myCss);

then when it is no longer needed:
CSSUtil.removeStyleSheet("someName");

not so hard, but mostly annoying to figure out.

public class CSSUtil
{
private static CSSUtilImpl impl = (CSSUtilImpl) GWT.create
(CSSUtilImpl.class);

public static void addStyleSheet(String name, String css)
{
impl.addStyleSheet(name, css);
}
public static void removeStyleSheet(String name)
{
impl.removeStyleSheet(name);
}
}

/* cssutil implementation for everyone except IE */
public class CSSUtilImpl
{
public void addStyleSheet(String name, String css)
{

Element style = DOM.createElement("style");
DOM.setAttribute(style, "type", "text/css");

DOM.setAttribute(style, "title", name);
DOM.setInnerText(style, css);
DOM.appendChild(getHead(), style);
}

public void removeStyleSheet(String name)
{
Element style = getStyleByTitle(name);
if (style != null) DOM.removeChild(getHead(), style);
}

private native Element getStyleByTitle(String name) /*-{
var style = null;
var styles = $doc.getElementsByTagName("style");
if (styles) {
var c = styles.length;
for (i=0; i<c; i++) {
if (styles[i].type = name) {
style = styles[i];
break;
}
}
}
return style;
}-*/;

private native Element getHead() /*-{
var head = $doc.getElementsByTagName("head");
return head ? head[0] : null;
}-*/;

}

/* cssutil implementation for IE */
public class CSSUtilImplIE6 extends CSSUtilImpl
{
public native void addStyleSheet(String name, String css)/*-{
var ss = $doc.createStyleSheet();
ss.title = name;
ss.cssText = css;
}-*/;

public native void removeStyleSheet(String name)/*-{
var i = $doc.styleSheets.length;
for(n=0; n<i; n++){
if ($doc.styleSheets[n].title = name) {
$doc.styleSheets[n].cssText = null;
$doc.styleSheets[n].title = null;
break;
}
}
}-*/;
}

-jason

On Oct 31, 2006, at 2:55 PM, mP wrote: