What is the IE6 CSS Remove Rule?

Web Design

In Web development, cascading style sheets, or CSS, can be used to define the look and feel, or style, of HTML elements within a Web page. These individual style definitions within CSS are known as "rules." You can use JavaScript's HTML Document Object Model, or DOM, to remove rules from a specific style sheet used by the document. Microsoft Internet Explorer version 6, and all versions prior to IE9, interpret the DOM differently than most modern browsers, and therefore require a now-outmoded method for removing rules.

Syntax

If you are coding for Internet Explorer releases older than version 9, you must use the removeRule() method of the styleSheets object. So, inserting the line of code

document.styleSheets[0].removeRule(0)

into your script will remove the first rule of the first style sheet in your HTML document. This will also work in Internet Explorer 9, Safari and Chrome.

Compatibility

Web browsers interpret code differently from one another, making website browser compatibility a constant issue for coders. If your target audience is using IE6 or any other pre-9 version of IE, you will need to use the removeRule() method for this task. However, this will not work for Firefox and Opera. Since the release of IE 9, removing CSS rules can be handled in the newest version of every major browser by instead using the deleteRule() method with the exact same syntax.

Result

Removing a style from an element will remove any "personalized look" your CSS was imposing on that element. The element style will then reflect the next most specific CSS rule that would affect it. If no other rule exists, the element's style will default to what the Web browser sees fit to implement.

References

• W3C DOM Compatibility - CSS
• ECMAScript Language Binding