CSS Object Model 介绍及浏览器差异化分析（2）CSS Module

look_w

CSS Module        这个模块包含了 CSSStyleSheet，CSSRuleList，CSSRule，CSSStyleRule，CSSStyleDeclaration 等 21 个接口，这些接口主要是为了让 web 程序开发者可以直接操作样式表中的样式，动态添加或移除某些样式。
        这个模块和前面介绍的一个模块的区别在于，前面一个模块中包含的接口主要是通过 Document 接口来访问样式表 StyleSheet 实例，而对于实例内部所包含的用户定义样式则通过这个模块的接口来控制。
        对每一个<link>或<style>嵌入文档的样式表，都有一个 CSSStyleSheet 的实例与之对应，这个接口是 StyleSheet 的子接口。这个接口允许访问样式表中的用户定义样式规则的集合 CSSRuleList，并且可以进行增删改的操作。
        对 CSSRuleList 中的每一条样式，CSSStyleRule 接口提供了对选择器 Selector 和 Declaration block 的访问。
        下面详细说明每个接口中常用的属性和方法。
        CSSStyleSheet 继承自 StyleSheet，
        ownerRule         当这个样式表是<link>或者<style>嵌入文档中时该属性为 null，当这个样式表是@import 进文档时，该属性返回一个 CSSImportRule 的实例，
        cssRules                返回样式表对应的样式规则列表 CSSRuleList 实例，
        insertRule(rule,index)        在指定位置插入一条样式规则，
        deleteRule(index)        删除指定位置的样式规则。
        CSSRuleList 是样式表中样式规则的集合，每个样式都是一个 CSSRule 的实例，可以通过位置信息被访问，
        length        样式表中包含的规则数量，
        item(index)        通过位置信息访问对应的某条规则。
        CSSRule 是任意类型的样式规则（包含普通的规则和@规则）的一个抽象接口，，有一系列的实际类型的规则接口继承自这个上层接口，
        这个接口有 7 个常量，分别来描述不同类型的规则：

1 2 3 4 5 6 7

UNKNOWN_RULE           = 0; STYLE_RULE             = 1; CHARSET_RULE           = 2; IMPORT_RULE            = 3; MEDIA_RULE             = 4; FONT_FACE_RULE         = 5; PAGE_RULE              = 6;

type        返回该条规则的数字类型值，
cssText        返回规则的内容，注意这个属性得到的是当前的值（可能被修改过）而不是初始化的值，
        parentRule        如果这个规则是被包含在另外一条规则中（如@media 中包含的规则），那么返回包含它的规则，否则返回 null，
        parentStyleSheet        返回包含规则的 StyleSheet。
        继承自 CSSRule 的接口有以下一些，用一个表格来对比，
表 2.继承自 CSSRule 的接口介绍接口定义属性与方法CSSStyleRule代表一条普通的规则selectorText 返回 selector 文本，可能包含逗号分隔
style 返回 block 中描述的信息，是一个 CSSStyleDeclarationCSSMediaRule代表 at 规则中的@media 规则，用来指定具体 media 时不同的样式media 返回 MediaList
cssRules 返回@media 内部的 CSSRuleList
insertRule(rule,index)
deleteRule(index)CSSFontFaceRule代表 at 规则中的@font-face 规则，用来指定字体的信息styleCSSPageRule代表 at 规则中的@page 规则，用来指定页面的尺寸，方向，margin 等信息styleCSSImportRule代表 at 规则中的@import 规则，用来在规则中导入其他规则href
media
styleSheetCSSCharsetRule代表 at 规则中的@charset 规则，用来指定 CSS 文档的字符集属性，如果 CSS 是嵌入到 HTML 文档中的，那么 charset 将使用 HTML 的设定encodingCSSUnknownRule代表不识别的 at 规则

        针对各种 CSSStyleRule，CSSFontFaceRule 和 CSSPageRule，其中的样式 Declaration block 对应一个 CSSStyleDeclaration 实例，可以通过 style 属性访问到。除此之外，CSS2Properties 接口还提供了直接访问 CSSStyleDeclaration 实例的各个属性值的机制，关于这个接口我们在后面会讲到。
测试结果如下，
表 3.CSS Module 中主要的接口测试结果
      IE          FireFox          Chrome    CSSStyleSheetownerRule从 IE9 开始支持，IE9 之前的版本提供了替代的 rules/addRule()/removeRule()支持支持cssRulesinsertRule()deleteRule()CSSRuleListlength从 IE9 开始支持支持支持Item()支持，IE9 之前返回的不是 CSSRule 实例CSSRuletype从 IE9 开始支持支持支持cssTextparentRuleparentStyleSheetCSSStyleRuleselectorText支持支持支持styleCSSMediaRule/ CSSFontFaceRule/ CSSPageRule/ CSSImportRule
从 IE9 开始支持支持支持CSSCharsetRule
不支持支持支持CSSStyleDeclarationcssText支持支持支持getPropertyCSSValue()不支持错误的结果 null支持length从 IE9 开始支持
支持支持parentRulegetPropertyValue()removeProperty()getPropertyPriority()setProperty()Item()        对 CSSStyleRule 而言，在 IE9 之前的版本是不支持 cssRules 属性的，其替代属性 rules 会忽略 at-rules 并且拆分多选择器，如下面的例子，
清单 1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

@charset "UTF-8"; .testClass {     font-size: 14pt; } @media print {     .noprint     {         display: none;     } } .h1 {     font-size: 14pt;     font-weight: bold;     display: block; } .list, .crosstab {     color: #000000; }

        这个 CSS 片段在 IE9 之前的 rules 属性得到.testClass，.noprint，.h1，.list，.crosstab 共 5 个样式规则。从 IE9 开始支持了 cssRules，上面 css 片段返回的是 3 条 CSSStyleRule 和 1 条 CSSMediaRule，这与 FF 和 Chrome 仍然有点差别，因为 IE 忽略了第一条 CSSCharsetRule。需要注意的是从 IE9 开始 rules 属性虽然没有废除，但是推荐不要使用，因为结果中忽略了 at-rules 并且在拆分多选择器的时候有些错误的结果。