Adding an @import statement to a dynamic stylesheet for IE7 +

Question

I am having a problem adding a dynamic style element with @import statements for IE. Try the following:

var string = '@import url(test.css)';
var style = document.createElement('style');

if (style.styleSheet) { // IE
    style.styleSheet.cssText = string;
} else {
    var cssText = document.createTextNode(string);
    style.appendChild(cssText);
}

document.getElementsByTagName('head')[0].appendChild(style);

This works for FF / Chrome, but not for IE. It seems to recognize style.styleSheets.importsbut will not apply the imported stylesheet. Is this a mistake or limitation?

Answer 1

Many older browsers cannot handle various forms of the @import directive, this can be used to hide css from them. See http://www.w3development.de/css/hide_css_from_browsers/import/ for more details .

@import , . IE @import.

. . addImport IE.