CSS3 是级联样式表 / 层叠样式表(Cascading Style Sheets)语言的最新进化,旨在扩展CSS2.1。
它带来了许多期待已久的新奇, 例如圆角,阴影,gradients(渐变),transitions(过渡) 或 animations(动画) , 以及新的布局, 如 multi-columns , flexible box 或 grid layouts。实验部分是以供应商为前缀 (vendor-prefixed)的,应该在生产环境中避免使用,或者极其谨慎地使用,因为它们的语法和语义都可以在将来更改。
模块和标准化进程
CSS Level 2 经历了 9 年的时间(从 2002 年 8 月到 2011 年 6 月)才达到 Recommendation(推荐) 状态。主要的原因是被一些 secondary features(次要特性) 拖了后腿。 为了加快那些已经确认为没有问题的特性的标准化速度, W3C 的 CSS Working Group(CSS 工作组) 作出了一项被称为 Beijing doctrine 的决定, 将 CSS 划分为许多小组件, 称之为 模块 。 这些模块彼此独立, 按照各自的进度来进行标准化。其中一些已经是 W3C Recommendation 状态, 也有一些还仅仅是 early Working Drafts(早期工作草案)。 当新需求被确认后, 新的模块也同样被添加进来。
从形式上来说,已经不存在 CSS3 标准自身。 每个模块都被独立的标准化,标准 CSS 包括修订后的 CSS2.1 以及完整模块对它的扩充,模块的 level(级别) 数并不一致。 在每个时间点上, 可以为 CSS 标准定义一个 snapshots(快照), 列出 CSS 2.1 和成熟的模块。
W3C 会定期的发布这些 snapshots,例如 2007, 2010, 2015 或 2017。
目前为止,还没有 level 超过 3 的模块被标准化, 未来应该会有所改变。 一些模块, 像 Selectors(选择器) 4 或 CSS Borders and Backgrounds(边框和背景) Level 4 早已拥有了 Editor's Draft(编辑草案), 即使它们还没有达到 First Published Working Draft(初次发布工作草案)状态。
CSS 模块状态
稳定模块(Stable modules)
有些 CSS 模块已经十分稳定并满足了 CSSWG 规定的三个推荐级别之一:Candidate Recommendation(候选推荐), Proposed Recommendation(建议推荐) 或 Recommendation(推荐)。 这表明这些模块已经十分稳定,使用时也不必添加前缀, 但是一些特性还是有可能在 Candidate Recommendation 阶段被放弃。
这些模块扩展并修改了 CSS2.1 规范(核心规范)。 以下就是 CSS 规范的当前 snapshot。
Colors (Level 3)
CSS Color Module Level 3 |
Recommendation 自 2011 年 6 月 7 日 |
增加 opacity 属性,还有 hsl (), hsla() , rgba() 和 rgb() 函数来创建 <color> 值。 它还将 currentColor 关键字定义为合法的颜色值。
transparent 颜色目前是真彩色 (多亏了支持 alpha 通道) 并且是 rgba(0,0,0,0.0) 的别名。
它废弃了 system-color keywords(系统颜色关键字), 它们已经不能在生产环境中使用。
|
Selectors
下一个迭代的选择器规范早已开始运作,它还没有达到 First Public Working Draft 阶段。
Namespaces
CSS Namespaces Module |
Recommendation 自 2011 年 9 月 29 日 |
通过定义 CSS qualified name(CSS 限定名) 的概念来增加对 XML Namespace(名空间) 的支持, 使用 ' | ' 语法并增加 @namespace CSS @ 规则。
|
Media Queries |
Recommendation 自 2012 年 6 月 19 日 |
将之前的媒体类型 ( print, screen,…… ) 扩充为完整的语言, 允许使用类似 only screen 和 (color) 来实现 设备媒体能力查询功能。
媒体查询并非仅能用于 CSS 文档中,它也被用于 HTML 元素的某些属性中, 例如 <link> 元素的 media 属性。
|
该规范的下一个迭代也在进行中,借助新的媒体特征例如 hover
或 pointer,可以在 User Agent(用户代理) 上对 Web 站点的输入方法进行定制。
对 ECMAScript 的检测, 使用 script
媒体特征也已经被提出。
Style attribute
Backgrounds and Borders
背景和边框规范的 CSS4 迭代早已进行,即便它还没有达到 First Public Working Draft 阶段,它计划增加对边框的裁剪功能 (借助 CSS border-clip
,border-clip-top
,border-clip-right
,border-clip-bottom
和 border-clip-left
属性) 或边框一角的形状 (使用 CSS border-corner-shape
属性)。
Multi-column layout
Speech
CSS Speech Module |
Candidate Recommendation |
定义 speech 媒体类型,一个 aural formatting model(听觉格式化模型) 和多个用于 speech-rendering(语音呈现) 用户代理的属性。 |
Image Values and Replaced Content
用于取代 CSS Image Level 3 的 CSS Image Values and Replaced Content Level 4 正在发展中,目前为 Working Draft。
Values and Units
CSS Values and Units Module Level 3 |
Candidate Recommendation |
使 initial 和 inherit 关键字能够被用于任意 CSS 属性中。
正式定义了 CSS 2.1 中的 CSS 数据类型,之前是隐晦的由它们的语法记号和文本来定义。
增加:
有风险: 由于缺少足够的浏览器支持,calc(), attr(), 和 toggle() 函数符号的标准化可能会被推迟到该模块的下一个迭代中。
|
像 <ident>
和 <custom-ident>
这样的类型定义在 CSS Values and Units Module Level 4 中被推迟。
Flexible box layout
Conditional Rules
Text decorations
CSS Cascading and Inheritance Level 3 |
Candidate Recommendation |
Adds:
- The
initial , unset values for properties.
- The CSS
all property.
- The scoping mechanism.
Clarifies:
- Interaction of media-dependent @import statements and style sheet loading requirements.
|
CSS Shapes Module Level 1 |
Candidate Recommendation |
Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box. |
CSS Masking Module Level 1 |
Candidate Recommendation |
Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask. |
处于改善阶段的模块(Modules in the refining phase)
被认为处于 refining phase(改善阶段) 的规范早已是稳定的。虽然还会有修改,但这不会和当前的实现产生冲突;他们主要是定义边界情况的行为。
Basic User Interface
Transitions
Animations
CSS Transforms Level 1 |
Working Draft |
增加:
注意: 该规范是 CSS 2D-Transforms, CSS 3D-Transforms 和 SVG transforms 合并的结果。
|
Fragmentation
CSS Fragmentation Module Level 3 |
Candidate Recommendation |
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
Adds:
- Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS
box-decoration-break property.
|
Text
一部分出现在早期 CSS Text Level 3 草案中的特性被推迟到了该规范的下个迭代中。
Fonts
处于修正阶段的模块(Modules in the revising phase)
处于修正阶段的模块没有处于改善阶段的模块稳定。通常它们的语法还需要详细审查,说不定还会有很大的变化,而且不保证和之前的兼容。替代的语法通常经过测试并已经实现。
CSS Basic User Interface Module Level 3 |
Candidate Recommendation |
增加:
- 使用 CSS
box-sizing 属性来转换盒模型的能力。
处于风险中: 由于缺少足够的浏览器支持 , padding -box 值的标准化可能会被推迟到该模块的下一个迭代中。
- 根据表单内容来设置样式, 使用 CSS
:indeterminate , :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only ,和 :read-write 伪类与 ::value , ::choices , ::repeat-item , 和 ::repeat-index 伪元素。
处于风险中: 由于缺少足够的浏览器支持 ,伪元素 ::value , ::choices , ::repeat-item , 和 ::repeat-index 的标准化可能会被推迟到该模块的下一个迭代中。
- 支持图标,通过 CSS
icon 属性定义, 同时在 CSS content 属性中设置新图标的值。
处于风险中: 由于缺少足够的浏览器支持 ,icon 属性和 icon 值的标准化可能会被推迟到 CSS 4 中。
- 支持 CSS
outline-offset 属性, 这样可以对 outline 的位置做更多的控制。
- 支持 CSS
resize 属性, Web 开发者可以控制元素是否能够以及如何调整大小。
- 支持 CSS
text-overflow 属性, 定义文本溢出的行为。
处于风险中: 由于缺少足够的浏览器支持 ,该属性的双值语法也和 <string> 值一样, 它们的标准化可能会被推迟到该模块的下一个迭代中。
- 定义鼠标 hotspot(热点) 的功能, 扩展了
cursor 属性, 增加了新值: none , context-menu , cell , vertical-text , alias , copy , no-drop , not-allowed , nesw- resize , nwse- resize , col-resize , row-resize , all-scroll , zoom-in , zoom-out。
- 指定 sequential navigation order(连续导航顺序, 即 tabbing order(移动顺序)) 的功能, 使用 CSS
nav-index , nav-up , nav-right , nav-left , nav-down 属性。
处于风险中: 由于缺少足够的浏览器支持,导航属性的标准化可能会被推迟到该模块的下一个迭代中。
- 控制 IME editor(输入法编辑器) 使用的功能, 使用 CSS
ime-mode 属性。
处于风险中: 由于缺少足够的浏览器支持,ime-mode 属性的标准化可能会被推迟到该模块的下一个迭代中。
|
这里提供了会出现在下次 CSS Basic User Interface Module 迭代中的功能列表。
CSS Grid Layout |
Candidate Recommendation |
添加了 grid 布局给 CSS display 属性,以及一些新的属性来控制它:grid ,grid-area ,grid-auto-columns ,grid-auto-flow ,grid-auto-position , grid-auto-rows , grid-column , grid-column-start , grid-column-end , grid-row , grid-row-start , grid-row-end , grid-template , grid-template-areas , grid-template-rows , and grid-template-columns . |
Writing modes
Modules in the exploring phase
Images (Level 4)
CSS Image Values and Replaced Content Module Level 4 |
Working Draft |
扩展:
image() 函数标记来描述图片 (rtl 或 ltr ) 的方向性,允许 bidi-sensitive(双向敏感) 的图片。
- 为
image-orientation 属性增加关键字 from-image,允许使用存储在图片中的 EXIF 数据。
增加:
image-set() 函数标记,allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images。
element() 函数标记, 允许将页面的部分当作图片来使用。
cross-fade() 函数标记, 允许在两张图片之间过渡时使用中间图片,并定义了两张图片间的 interpolation(插值)。
conic-gradient() 和 repeating-conic-gradient() 函数标记,描述了一种新的渐变类型。
image-rendering 属性允许定义如何处理改变图片大小的行为。
|
Device Adaptation
Grid Layout
GCPM
Exclusions and Shapes
Unknown |
Unknown |
扩展浮动机制,在任何定位方案中生成一个 exclusion regions(排斥区域)。增加形状标记,其中的内容必须流动。 |
Lists
Regions
CSS Regions Module Level 1 |
Working Draft |
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions. |
Variables
{ SpecName("CSS3 Inline", "", "") }} |
Working Draft |
|
在重写的模块
因为模块已经过时,所以需要重写。其语法仍然在审查,可能会以不兼容的方式发展出很多。替代语法会经过测试和不断执行。