CSS Object Model 介绍及浏览器差异化分析（1）简介
|
- UID
- 1066743
|
CSS Object Model 介绍及浏览器差异化分析（1）简介
CSS 基础背景CSS, Cascading Style Sheets，中文称层叠样式表，它是一种描述性语言也是一种规范，它用来描述用标记语言写成的文档(如 HTML, XML, SVG)的外观和样式。CSS 规范由 W3C 组织来维护。
CSS 最初被设计用来分离文档的内容和显示样式如颜色字体排版。这种内容和显示的分离可以使得文档的内容可读性增强，并且显示的样式易于管理。除此之外，CSS 还可以用于文档在不同的设备或不同的渲染方式下灵活的展现。
CSS 为什么要叫做层叠样式表呢？这个层叠主要是指样式的覆盖，当一个元素被应用上多种同类型的样式时，浏览器必须选择一个最终的样式，这个过程就叫做层叠。具体如何选择涉及到样式的优先级判定，我们会在下文中详细介绍。
语法 CSS 的语法非常简单明了，一个 CSS 样式表文件包含了一系列的样式规则(rules or rule-sets)，每个样式规则都由一个选择器(selector)或分组选择器和一个样式描述块(declaration block)组成。
选择器 Selector
选择器主要是在 CSS 用来声明一个文档中的哪些部分需要被添加上该选择器对应的 Declaration block 中描述的 CSS 样式。
选择器的类型主要有常用的元素选择器，ID 选择器，类选择器以及属性选择器和伪类等。
Declaration block
每一个选择器或分组选择器后都对应一个花括号包围的样式声明块 Declaration block，在这个块中可以包含多条不同类型的样式，每条样式之间用逗号隔开。
使用
CSS 的使用主要有以下三种方式，
- 内联样式，直接添加到 HTML 元素上的样式
1
| <div style="width:400px">
|
- 外部样式，用<link>标签添加任意个对外部 CSS 的引用，需要注意的是<link>只能出现在<head>块内。
1
| <link rel="stylesheet" href="path/file.css"/>
|
- 内部样式，<style>中直接添加 CSS 样式，同样地，<style>也只能出现在<head>块内。
1
| <style tyle="text/css">
|
CSS 历史 CSS 第一版规范也就是我们常说的 CSS1 是由 W3C 在 1996 年公布的，规范中主要提出了对 font，color，spacing，alignment，margin，padding 等方面的规定。但是从规范发布一直到 1999 年的这三年间，当时市面上的浏览器 IE3，IE4，NetScape4.x 对 CSS1 的支持都不是很好，很多实现不符合规范要求并且 bug 很多。三年之后，市面主流的各大浏览器才开始完整地支持 CSS1 规范，2000 年发布的 IE5 是第一个完整支持 CSS1 的浏览器。
CSS2 与 1998 年发布，CSS2 在 CSS1 的基础上增加了对元素位置方面的规定如 absolute/relative/fixed 和 z-index。
CSS3 最初于 1999 年发布 Draft 版本的时候采用了一个新的理念，它把整个规范拆分为若干个文档，每个文档称为一个模块（module），每个模块针对不同的方面增加或扩展新的属性。截止 2013 年末，已经拥有 W3C 正式的推荐规范（Recommendation Specification）的 Level3 模块有如下 4 个：Media Queries，Namespaces，Color，Selectors。此外还有 Backgrounds and Borders，Syntax，Display 等几十个模块拥有候选推荐规范（Candidate Recommendation Specification）或草拟规范（Working Draft）等一些还没有完成的规范状态。
目前 W3C 组织只对 CSS2 和 CSS3 进行维护更新，所以现在 W3C 都是独立发布某个模块的规范。
CSS OM 接口介绍及浏览器支持分析 通过上一章的介绍我们对 CSS 的语法结构，发展历史以及如何使用有了一个大概的了解。我们知道 CSS 可以通过外部引用，内部定义以及元素内联这三种静态的方式引入页面从而影响 HTML 页面的展示。那么 CSS 可以动态变化吗？答案是肯定的。
当前 JavaScript 等脚本语言广泛地应用在各种 HTML 页面中，脚本使得页面可以根据用户的交互而动态展示。这种效果很多就是通过脚本去操作 CSS 来实现的，所以本文研究的就是用户通过脚本语言去操作页面中的 CSS 时不同的浏览器对这些操作的支持程度。
要研究脚本语言如何操作 CSS，首先就要清楚一个概念，那就是 CSS Object Model。CSS Object Model 指的是 CSS 的对象模型，CSS 的整个内容会转化为相应的对象，如样式表对象 StyleSheet，选择器对象 Selector，规则对象 Rule 等等，而这些对象都是定义在 W3C 规范<Document Object Model (DOM) Level 2 Style Specification> (http://www.w3.org/TR/DOM-Level-2-Style/)中的接口。该规范包含两章，第一章主要围绕 Style Sheets 模块展开，对应的是对整个样式表的操作；第二章主要包含两个模块，CSS Module 和 CSS2 Module，对应的是样式表中的选择器和规则的操作。下面我们分别详细介绍这三个模块中的接口以及浏览器的支持程度分析。
Style Sheets Module 这个模块包含了共 5 个接口。
第一个是 StyleSheet，这个接口是一个抽象的基础接口，主要描述了文档(HTML/XML)中的一个单独的样式表。当文档是 HTML 时，这个接口描述的可能是<link>标签添加的外部 CSS 文件，也可能是<style>标签添加的一些内部样式。当文档是 XML 时，这个接口描述的是通过<?xml-stylesheet>添加的外部 CSS 文件。
StyleSheet 接口中声明了如下几个样式表的属性：
- type 表示该样式表的描述语言，一般值为 text/css，
- disabled 表示该样式表是否为 disabled 状态，
- ownerNode 表示该样式表所属的节点，对 HTML 来言可能是<link>或<style>，
- parentStyleSheet 表示了该样式表的父样式表，如果不支持样式表包含那么值为 null，
- href 表示了该样式表的源文件，当 ownerNode 为<style>时 href 为 null，
- title 表示了该样式表的 title 信息，
- media 表示了该样式在什么的显示媒体下生效，media 属性返回的是一个 MediaList 实例。
- StyleSheetList 是一个包含了 StyleSheet 的有序集合。我们可以通过 document.styleSheets 来得到这个集合，然后直接通过下标访问每个 StyleSheet，如 document.styleSheets[0]。StyleSheetList 有一个属性 length 和一个方法 item(index)。Length 表示集合的长度，方法可以通过索引来取得对应的 StyleSheet。
- MediaList 包含了 StyleSheet 中的 media 信息集合，该接口中声明了如下几个属性和方法：
- mediaText 表示 media 属性的字符串值，可能有多个值，用逗号隔开，如"screen,print,projection"等，
- length 表示含有几个 media 字符串，
- item(index) 通过 index 访问对应位置的 media 字符串，
- deleteMedium(oldMedium) 删除一个 media 字符串，
- appendMedium(newMedium) 添加一个 media 字符串。
以上三个接口主要是针对 StyleSheet 定义的新接口，而下面的两个接口实际上是针对 Document 扩展的子接口。
LinkStyle 接口主要是提供一种从<link>，<style>节点获取样式表的方式。LinkStyle 的实例可以从 HTMLLinkElement，HTMLStyleElement(或 ProcessingInstruction)中获得。LinkStyle 接口只有一个属性就是 sheet，这个属性存储从节点获得的 StyleSheet 实例。
DocumentStyle 接口提供一种从嵌入文档的样式中获得样式表的方式。DocumentStyle 的实例可以从 Document 的实例中获得。DocumentStyle 只有一个属性就是 styleSheets，这个属性存储的是嵌入文档中的所有样式列表 StyleSheetList。
对这 5 个接口的测试结果如下表所示，
表 1.Style Sheets Module 中五个接口测试结果
IE FireFox Chrome StyleSheettype/disabled /title支持支持支持href支持，从 IE8 开始显示完整 URLmedia错误的字符串值ownerNode从 IE9 开始支持parentStyleSheetStyleSheetListlength支持支持支持item()MediaListmediaList从 IE9 开始支持支持支持lengthitem()deleteMedium()appendMedium()LinkStylesheet从 IE9 开始支持支持支持DocumentStylestyleSheets支持支持支持 通过测试可以看出来，FF，Chrome 对这三个接口的实现都是比较好的。
IE 对这个模块的支持非常差，仅仅实现了简单了 type/disabled/title/href 属性。需要注意的是，IE 对 StyleSheet 的 media 属性没有根据 W3C 标准返回 MediaList 实例而是返回 media 属性的字符串。
另外，在 IE9 之前用户如果想通过 HTMLLinkElement 和 HTMLStyleElement 元素来取得对应的 StyleSheet 时，由于 IE 不支持 sheet 属性，它有一个替代的方法 styleSheets(id)，这个方法可以通过 ID 取到对应的 StyleSheet 实例。从 IE9 开始，它遵守了 W3C 规范，可以通过 HTMLLinkElement 和 HTMLStyleElement 实例的 sheet 属性来访问到对应的 StyleSheet 实例。 |
|
|
|
|
|
