Tutorial :Adding @import statement in a dynamic stylesheet for IE7+



Question:

I have a problem with adding a dynamic style element with @import statements for IE. Try this:

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 IE. It seems to recognize style.styleSheets.imports, but it will not apply the imported stylesheet. Is this a bug or limitation?


Solution:1

Many older browsers can't process varying forms of the @import directive, this can be used to hide css from them. Check http://www.w3development.de/css/hide_css_from_browsers/import/ for details.

The @import directives must come first in a style sheet, or else they'll be ignored. however IE doesn't ignore misplaced @import directives.

Edit: See the addImport method for injecting style sheets in IE.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »