CSS-API(CSS编程接口),CSSOM(css对象模型)

1.CSS API及其实现关系

相关术语
1. API:API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
2. CSSOM:CSS Object Model ,CSS对象模型.有关的文献:https://www.w3.org/TR/cssom-1/.主要内容是媒体查询和各种CSS API(例如:CSSStyleDeclaration,CSSStyleRule,CSSRule等).
3. 键值对(key-value pair):类似”color:red;10px;”的一对,冒号前面是”键”,冒号后面是该”键”的”值”.
4. 声明块(declaration block):由左花括号和右花括号以及其中的声明内容组成.注:声明块并不包含选择器.
5. 规则(rule,又称statement):分为rule-set和at-rule两种类型.

• rule-set(常规的声明规则):由选择器和跟在后面的声明块构成.例如:

  p {color:red; 10px;}
  

• at-rule(@规则):由符号”@”打头,其后紧跟相应关键字以及后面的语句构成.

API实现关系
1.CSSStyleDeclaration

• 接口含义:代表一个CSS属性键值对的集合(不包括花括号”{}”和选择器)
• IDL接口定义:
  
• 重要属性方法简介:
  
  • cssText:声明块中的文本(不包含花括号,仅文本)
  • length:属性数目
  • cssRule:如果CSSStyleDeclaration对象是在CSSRule对象的包含之中,而非独立出现,该属性为包含它的CSSRule对象;如果CSSStyleDeclaration对象是独立出现,该属性值为null.

2.CSSRule

• 接口含义:任何类型的rule/statement的基本抽象接口(包含rule-set和at-rule).
• IDL接口定义:
  
• 重要属性方法:
  
  • type:规则类型
  • cssText:当前规则的可解析的文本
  • parentStyleSheet:当前规则所属的样式表
  • parentRule:如果当前规则是包含在另一条规则中,那么该属性为其父规则;否则为null.

3.CSSStyleRule

• 接口含义:该接口代表位于样式表中的一条普通的规则声明(rule-set)(不包括at-rule规则).

• IDL接口定义
  
  [注意:该接口实现了CSSRule接口,拥有其属性和方法]

• 重要属性方法:

  • selectorText:该样式声明的选择器
  • style:该rule-set的花括号内的部分(是一个CSSStyleDeclaration)
  • parentStyleSheet,parentRule(实现CSSRule所获得的属性)

4.StyleSheet

• 接口含义:StyleSheet是所有样式表的基础抽象接口.它代表的是一个与文档相关联的单一样式表.它既可以是link标签关联的外部样式表,也可以是style标签包含的内部样式表.在xml中,本接口代表一个外部样式表.
• IDL接口定义:
  
• 重要属性方法:
  
  • type:该属性定义了样式表所用的样式表语言,样式表语言是一种内容类型(content type),例如:”text/css”.内容类型通常在样式表的”父节点/引入节点”中定义(例如:link标签的type属性或者xml中的type pseudo-attribute).
  • disable:布尔值.如果样式表没有应用于当前文档,值为true,否则值为true.修改这个属性会改变文档的一套样式属性.一个样式表要被应用,要有合适的定义和disable属性为false这两个条件.
  • ownerNode:将该样式表关联到文档的那个元素节点.HTML中为link与style标签;xml中时链接处理指令;如果样式表是被其他样式表引入的(@import),该值为null.
  • parentStyleSheet:当前样式表的父级样式表,如果存在的话.(当前样式表是被上一级样式表引入的,例:@import)

5.CSSStyleSheet

• 接口含义:代表一个CSS样式表的,完全实现了的接口(内容类型为”text/css”).
• IDL接口定义:
  
• 重要属性方法:
  
  • ownerRule:如果样式表是由@import引入的,值为该at-rule 的CSSImportRule对象.
  • cssRules:当前样式表包含的所有规则的列表(包括rule-set和at-rule)
  • 实现StyleSheet接口而拥有的属性
  • unsigned long insertRule(rule,index):向样式表固定位置插入新规则
  • void deleteRule(index):删除样式表指定位置的规则

各API的实现关系

• CSSStyleDeclaration:不实现其他接口
• CSSRule:不实现其他接口
• CSSStyleRule:以type=STYLE-RULE实现CSSRule
• StyleSheet:不实现其他接口
• CSSStyleSheet:实现StyleSheet

2.各种情况下,各接口的关键属性值情况

1.CSSStyleDeclaration接口

引入方法	parentRule值
内嵌	null
link标签	对应CSSRule对象
style标签	对应CSSRule对象
@import	对应CSSRule对象

2.CSSRule/CSSStyleRule接口

引入方法	parentRule值	parentStyleSheet值
link标签	null	包含它的样式表
style标签	null	包含它的样式表
@import	CSSImportRule对象	包含它的样式表

3.StyleSheet接口

引入方法	ownerNode值	parentStyleSheet值
link标签	link元素	null
style标签	style元素	null
@import	null	对应父样式表

4.CSSStyleSheet接口

引入方法	ownerNode值	parentStyleSheet值	ownerRule值
link标签	link元素	null	null
style标签	style元素	null	null
@import	null	对应父样式表	CSSImportRule对象

3.为方便记忆,我们用逻辑推导一下各个接口中应该有哪些数据类型的属性

说明:为了实现这一点,我们必须找到最普遍情况下的各个接口的模型

1.CSSStyleDeclaration
我们选择上述模型的p {color:red;}中的color:red;进行分析:

• 必须有包含它的CSSRule的信息–>必有一个CSSRule类型的属性–>CSSRule parentRule
  

2.CSSRule/CSSStyleRule
我们选择p {color:red;}作为我们的CSSRule:

• 必须有包含它的父级rule的信息–>必有一个CSSRule类型的属性–>parentRule
• 必须有包含它的样式表的信息–>必有一个CSSStyleSheet类型的属性–>parentStyleSheet

3.CSSStyleSheet接口
我们选择模型图中的”某一样式表”作为我们的接口对象:

• 必须有引入它的元素节点的信息–>必有一个ElementNode类型的属性–>ownerNode
• 必须有导入它的规则的信息–>必有一个CSSImportRule类型的属性–>ownerRule
• 必须有导入它的父级样式表的信息–>必有一个CSSStyleSheet类型的属性–>parentStyleSheet

4.获取某一接口对象的方法/手段

说明:获取某一个接口对象的方法手段一般有如下四种

• 从子结构的属性返回
• 从父结构的属性返回
• 从关联的文档元素/引入它的元素(link,style)的属性返回
  
  • 关联的文档元素(应用这些CSS属性的元素)
  • 引入它的元素(LinkStyle.sheet,link和style变迁都实现了LinkStye接口)
• 从CSSOM提供的同类型接口对象集合中得到
  [注1:上述四个方面要分情况灵活运用,例如:内嵌的CSSStyleDeclaration对象就没有父结构,也没有子结构,只能通过关联的文档元素返回,即:HTMLElement.style返回]

[注2:CSSOM提供的各接口的类型集合

1. CSSStyleDeclaration:无
2. CSSStyleRule/CSSRule:CSSStyleSheet的CSSRules属性–当前样式表内的所有规则(rule-set + at-rule)
3. CSSStyleSheet/StyleSheet:document.styleSheets
   ]

5.修改接口对象内样式属性的方法和手段

• CSSOM手段

  • CSSStyleDeclaration接口:通过cssText属性及setProperty和removeProperty方法
  • CSSRule接口:CSSRule.cssText
  • CSSStyleSheet接口:insertRule和deleteRule方法

• 其他手段:

  • 元素节点的get/set/removeAttribute系列方法
  • 用DOM生成和添加新的style或link元素节点,引入新的样式表

6.常见CSSOM的兼容性问题(待补充)

• CSSStyleSheet.CSSRules:

  • 由link元素链接的外部样式表,chrome不支持通过cssRules及rules(老版IE)获取样式列表,返回null
  • 由style元素定义在文档内部的样式表,主流浏览器均支持通过CSSStyleSheet.cssRules获取样式列表

• IE与非IE获取计算样式:

  • 非IE:window.getComputedStyle(ele，null/伪类)
  • IE:Element.currentStyle