CSS3新特性概览

CSS3 是层叠样式表语言的最新进展，目的在于扩展 CSS2.1。
它为我们带来了许多期待已久的新特性， 例如圆角，阴影，gradients(渐变)，transitions(过渡) 或 animations(动画) ， 当然还有新的布局如 multi-columns ， flexible box 或 grid layouts。
这些实验性的内容带有 vendor-prefixed(提供商前缀)， 并且尽量不要在生产环境中使用， 即便要用， 也要时刻谨记： 这些内容的语法和语义在未来很有可能会改变。

稳定模块

color

• 新增了opacity属性，以及 hsl()， hsla()， rgba() 和 rgb() 函数来创建 color 值。

选择器

增加：

• 属性选择器：
  
  • E[attribute^=”value”]：属性以value开头
  • E[attribute$=”value”]：属性以value结尾
  • E[attribute*=”value”]：属性中包含子串value
• 伪类
  
  • ：target
  • ：enabled、disabled
  • ：checked
  • ：indeterminate
  • ：root
  • ：nth-child、：nth-last-child、：last-child
  • ：nth-of-type、：nth-lat-type-of、：first-of-type、：last-of-type
  • ：only-child、：only-of-type
  • ：empty
  • ：not
• 伪元素使用两个冒号而不是一个冒号来表示
  
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
• 新的兄弟选择器
  
  • B~E

命名空间

通过定义 CSS 限定名的概念来增加对 XML Namespace的支持， 使用 ’ | ’ 语法并增加 @namespace CSS @ 规则。

媒体查询

将之前的媒体类型 ( print， screen，……) 扩充为完整的语言。
媒体查询并非仅能用于 CSS 文档中，它也被用于 HTML 元素的某些属性中， 例如 <link> 元素的 media 属性。

背景和边框

• background支持各种类型的<image>， 并不局限于之前定义的 url()。
• 支持multiple background images
• background-repeat 属性增加了 space 和 round 值
• background-attachment 增加了local 值。
• 增加了 background-origin， background-size， 和 background-clip 属性。

---

• 增加带弧度的边框：border-radius
• 支持边框使用image：border-image
• 支持对装饰行为的定义， 即当元素的框被打断(在页面， 列或换行) 时， 使用 CSS box-decoration-break 属性对边框，背景色或图片的定义。
  由于缺少足够的浏览器支持，该特性可能会被推迟到模块的下一个迭代中。
• 元素阴影：box-shadow
  由于缺少足够的浏览器支持，该特性可能会被推迟到模块的下一个迭代中。

多列布局

增加简单的多列布局， 使用 CSS columns相关属性

speech 媒体类型

图像值和替换内容

• 定义了<image>数据类型
• 扩充 url() 语法使其支持使用媒体片段来切割图片。

增加：

• 渐变
• object-fit：定义一个可替换元素如何适应它的元素。
• 使用 CSS image-resolution 和 image-orientation 属性来覆盖一个外部图片的分辨率和方向。

值和单位

• 定义了新的相对字体长度单位：rem 和 ch。
• 定义了相对视口长度单位：vw， vh， vmax 和 vmin 。
• calc()， attr()， 和 toggle() 函数符号的定义。

flexbox布局

可以参考CSS学习笔记：flexbox

功能查询

增加了对样式表部分内容进行条件处理的功能， 若浏览器或文档的能力符合条件，则该部分的样式生效。
增加了一个新的 CSS @ 规则@supports, 和一个新的 DOM 方法 CSS.supports()。

文本相关

• text-decoration
• text-emphasis
• 使用 CSS text-shadow 属性来支持文本的阴影。

处于改善阶段的模块

基本用户界面

• 使用 CSS box-sizing 属性来转换盒模型的能力。
• 根据表单内容来设置样式。
  使用 CSS :indeterminate， :default， :valid， :invalid， :in-range， :out-of-range， :required， :optional， :read-only，和 :read-write 伪类与 ::value， ::choices， ::repeat-item， 和 ::repeat-index 伪元素。
• 支持图标，通过 CSS icon 属性定义， 同时在 CSS content 属性中设置新图标的值。
• 支持 CSS outline-offset 属性， 这样可以对 outline 的位置做更多的控制。
• 支持 CSS resize 属性， Web 开发者可以控制元素是否能够以及如何调整大小。
• 支持 CSS text-overflow 属性， 定义文本溢出的行为。

过渡transition

通过增加 CSS transition等属性来支持定义两个属性值间的过渡效果。
可以参考CSS学习笔记：transition、transform、animation

动画animation

允许定义动画效果。
可以参考CSS学习笔记：transition、transform、animation

变形transform

• 支持适用于任何元素的二维变形。
  使用 CSS transform 和 transform-origin 属性。
  支持的变形有： matrix()，translate()，translateX()，translateY(， scale()，scaleX()，scaleY()，rotate()，skewX()，和 skewY()。

• 支持适用于任何元素的三维变形。

文本

扩展：

• 增加 text-transform 属性的值 full-width。
• 增加 text-align 属性的值 start，end，start end，和 match-parent，为包含多个方向文本的文档提供良好支持。
• CSS word-spacing 和 letter-spacing 属性拥有范围限制，来控制两端对齐时的灵活性。

---

增加：

• 使用 CSS text-space-collapse 和 tab-size 属性来控制空白该如何显示。
• 使用 CSS line-break，word-break，hyphens，text-wrap，overflow-wrap，和 text-align-last 属性来控制折行和单词边界。
• 使用 CSS text-justify 属性来控制两端对齐的行为，这是为了对更多语言类型增加支持。
• 使用 CSS text-indent 和 hanging-punctuation 属性来控制 edge effect(边缘影响)

字体

• 通过 CSS @font-face @ 规则来支持可下载字体。

探索阶段的模块

Grid布局

在栅格基础上增加了一个新的布局。

变量

定义了允许在 CSS 中定义变量的机制。