主要CSS3，HTML5特性兼容性调查

发表于 | 更新于 | 阅读次数：

CSS3 HTML5 部分特性

特性组 特性 IE8 IE9 IE10 IE11 Edge CH FF SF 参考
values
calc × √ √ √ √ √ √ √ caniuse
rem × √ √ √ √ √ √ √ caniuse
vw,vh × √ √ √ √ √ √ √ caniuse
color
currentColor × √ √ √ √ √ √ √
hsl hsla rgba × √ √ √ √ √ √ √
background
border-radius × √ √ √ √ √ √ √
border-images × × × √ √ √ √ √
images
linear-gradient × × √ √ √ √ √ √
radial-gradient × × √ √ √ √ √ √
repeating-linear-gradient × × √ √ √ √ √ √
repeating-radial-gradient × × √ √ √ √ √ √
animation
keyframes × × √ √ √ √ √ √
requestAnimationFrame × × √ √ √ √ √ √
transform
2d × √ √ √ √ √ √ √
3d × × √ √ √ √ √ √
postion
position:sticky × - - - - - √ √ caniuse, polyfill
selector
querySelector querySelectorAll √ √ √ √ √ √ √ √
webfonts
@font-face √ √ √ √ √ √ √ √ 小米案例
ui
sizing-box √ √ √ √ √ √ √ √
dom
mutation-observers × - - √ √ √ √ √ caniuse, polyfill
HTML5
audio × √ √ √ √ √ √ √
video × √ √ √ √ √ √ √
ECMA5
Promises - - - - √ √ √ √

CSS 选择器

- CSS 选择器 IE8+ IE9 IE10+
CSS2.1
* 通配符 √ √ √
#foo ID 选择器 √ √ √
.foo 类选择器 √ √ √
foo 节点选择器 √ √ √
> 子选择器 √ √ √
+ 后一个兄弟节点 √ √ √
[attr] 带有 attr 属性的元素 √ √ √
[attr=”val”] <div attr=”val”/> √ √ √
[attr~=”val”] <div attr=”val val1”/> √ √ √
[attr|=”val”] <div attr=”val-val1”/> √ √ √
:first-child 第一个子元素 √ √ √
:link, :visited 伪类，仅适用于 a 标签 √ √ √
:active, :hover 伪类，适用于所有元素 √ √ √
:focus 伪类，获取焦点的元素 √ √ √
:lang() 伪类，<div lang=”en”/> √ √ √
CSS3
[attr^=”val”] 带有 attr 属性并且值以 val 打头 √ √ √
[attr$=”val”] 带有 attr 属性并且值以 val 结束 √ √ √
[attr*=”val”] 带有 attr 属性并且值中带有 val 字眼 √ √ √
~ 后面兄弟选择器 √ √ √
:last-child 最后一个子元素 × √ √
:root 根元素 × √ √
:only-child 唯一的子节点 × √ √
:nth-child() 选择一个或多个子元素，参数 n 代表 0-+∞ × √ √
:nth-last-child() 选择一个或多个子元素，参数 n 代表 0-+∞，从后往前选择 × √ √
tag:only-of-type 唯一 tag 元素 × √ √
tag:nth-of-type 选择一个或多个子 tag 元素，参数 n 代表 0-+∞ × √ √
tag:nth-last-of-type() 选择一个或多个子 tag 元素，参数 n 代表 0-+∞，从后往前选择 × √ √
tag:first-of-type 选择第一个 tag 元素 × √ √
tag:last-of-type 选择最后一个 tag 元素 × √ √
:empty 匹配空节点 × √ √
:target 匹配 hash 相应的元素 × √ √
:enabled, :disabled 匹配表单中启用或禁用的元素 × √ √
:checked 匹配表单中选中的元素 × √ √
:not() 否定选择器 × √ √

备注：没有添加伪元素。

CSS2.1 之前的一些不为人知的特性

特性 可选值以及含义
empty-cells hide：当 td 的子元素都是隐藏的时候，自动隐藏该 td 的边框和背景
show：永远显示
不过该属性只有在 border-collapse:separate;时才有效。

参考：

  1. CSS Current Work 这里记载着 CSS 规范子集的进度（稳定级别）：工作草案，最后通告，候选标准，推荐标准和标准。
  2. W3C Technical Report Development Process W3C 技术报告开发过程
  3. 《W3C 技术报告开发过程》 只翻译一部分
  4. Mozilla CSS support chart 火狐浏览器 CSS 特性支持
  5. Safari CSS Reference
  6. Comparison of layout engines (Cascading Style Sheets)>) 中文版浏览器引擎 CSS 支持比较
  7. http://t337.org-w3c-region-chinese-html5.w3ctalk.info/w3c-t337.html