风中的纸屑——阅读MDN中的HTML、CSS谈兼容（PC）

HTML标准，是随着时代发展的不断变化的，在不同的时期它们有了新的目标与意义。
——ZackBee
兼容问题是历史遗留问题（有一种谈历史的感觉），主要谈的是对HTML5标准的支持。HTML4.01标准的思想是将将结构与表现进行分离，而HTML5标准的思想是什么呢？是将标签语义化、内容丰富化、接口多样化（个人观点）。在PC端考虑兼容性，主要就是对于IE家族低版本浏览器的兼容了。对于HTML4.01标准的内容，从IE6开始就支持的比较不错（只能说比较不错，还是有bug的），到了HTML5，是从IE9开始支持部分，IE9完成的基本支持是语义化的标签（比如section，artical等这样用来表示语义的），以及媒体资源（audio，video）这样的，对于CSS3的支持也比较有限。IE9对于交互方面的标签以及属性支持不足，到了IE10，一切都变的好了起来（对于web开发者真是泪流满面）。了解了HTML4.01以及HTML5的革命任务，以及IE9到IE11之间的变化，对于浏览器兼容性的理解与记忆就会容易许多。下面列出我对浏览器支持的分类。

HTML

HTML标签

语义化标签(以下是IE9开始支持的标签，还有些原本就支持，HTML5标准添加了语义的标签没有列出来)

、

、

、

、

(已从HTML5标准里删除，但仍在WHATWG的HTML里)、

、

、

、

、、（各浏览器支持情况都不好）

资源类标签(从IE9开始支持)

资源类标签（从IE10开始支持）

特别样式类标签（从IE10开始支持）

交互类标签（从IE10开始支持）

HTML属性

概述：大多数涉及到样式如align、背景颜色的属性都被删除了。（表现与结构分离的思想）绝大多数标签只有全局属性。

全局属性（从IE10开始支持）

spellcheck（caniuse.com上面说从10开始，mdn上面写的一直支持）

全局属性（从IE11开始支持）

data-*（完全支持，从6开始部分支持）

audio、video的属性（从IE9开始支持）

autoplay、controls、loop、preload、src、poster（video）

外部资源属性

sizes、srcset（ms系浏览器均未实现，适用于Retina高清屏幕技术）

表单相关的属性（我定义为交互性属性，IE10+支持）

【autofocus、form、formaction、formmethod、formenctype、formnovalidate、 formtarget】（适用于一般表单元素）
【input的各种属性值】
参见MDN中关于input的文档

CSS

选择器

基本选择器

元素选择器 elementname(元素名称) 类选择器 .classname(类名)
ID选择器 #idname(标志名)
以上三种选择器支持良好 。

通配选择器 * ns|* | 属性选择器 [属性=值]
以上两种从IE7开始基本支持，IE9开始支持良好。

组合选择器

相邻兄弟选择器 A + B
普通兄弟选择器 A ~ B
子选择器 A > B
后代选择器 A B
以上选择器从IE7开始支持良好，后代选择器一直支持。

伪元素

概述：早期的伪元素与伪类并没有区分开（CSS3之前的——对应IE9），IE浏览器均使用单分号表示伪元素。下述伪元素默认IE9以后实现：：支持

::after、::before在IE8实现单冒号：支持。
::first-letter、::first-line从IE5.5开始单冒号支持。
::selection从IE9开始支持。
也可以看出，在早期主要需求是文本内容样式的基本实现，所以::first-letter、::first-line支持得比较早。

伪类

IE8-：

：active（IE4支持a，8支持所有）、：first-child、：focus、：hover、：lang、：last-child
：link、：right、：visited（IE8良好支持，3.5基本支持）

IE9：

：checked、：disabled、：empty、：enabled、：first-of-type、
：indeterminate（仅checkbox）、：last-type、：not（）（支持一般用法）、：nth-child(an
+b)、：nth-last-child、：nth-last-of-type、：nth-of-type、：only-child、：:only-of-
type 、：root、：target

IE10:

：indeterminate(实现progress)、：invalid、：:optional：required、：valid
IE11：

：fullscreen

总结就是IE8及之前的版本，对伪类的实现并不多，基本上都是关于链接的（：hover、：visited、：

link）扩展成对所有元素可以选择，以及子元素最基本的第一个、最后一个的选择。

到了IE9，伪类的类型多了起来，多数是对于一般表单元素的描述的伪类，以及形形色色的子元素的选

择器。

而IE10，从HTML的标签就能看出来，多了很多与交互有关的标签与属性，所以伪类的选择器也是相关

方面的,比如验证表单是否有效等。（它支持的：indeterminate(实现progress)、

：　invalid、：:optional：#### required、：valid，这几个伪元素都是表单相关的）

属性（格式为：属性【值、特性】得到支持）

IE9：

background-attachment的local属性、background-clip、background-image【多背景、SVG背景】
background-clip、background-origin、background-position【多背景、四个方向的偏移】、
background-repeat【多背景、双值语法、round（chrome未实现）】、background-size、
border-bottom-left-radius等、box-shadow、cursor【none】，font-stretch,opacity(IE4~8支
持用不标准的filterhack)、pointer-events（只能SVG）、transform（+ms，基础支持）、
writing-mode（+ms）
IE10：

flexbox相关属性（但不标准）、animation（标准支持，其他浏览器的低版本需要加前缀）
、backface-visibility 、breaker-xxxx（其他浏览器均未实现）、column相关属性、hyphens（-
ms）@viewport相关属性(+ms)、gradient相关属性、scroll-snap-type（+ms，但
是chrome到62都不支持）text-shadow（原以为和box-shadow一样会是IE9开始支持，没想到是
IE10）、touch-action（基础支持，+ms）、transform相关（3d支持，+ms（但是很奇怪transform-
origin却不用+ms））、transition相关、writing-mode(+ms部分支持)
IE11：

flexbox相关属性（标准）、all、border-image相关属性（border-image-repeat未实现）
、caret-color、display【flex相关】、pointer-events（任意元素）、text-combine-upright
（+ms）、touch-action（基础支持）、transform-style

总结：IE9主要多了对于多背景方面的支持，对变换（transform的基础支持），但是并没有对CSS动画

有任何支持。IE10增加了对布局相关的支持（column，flex），对动画、过度（我习惯把过度归类为

动画）的支持较良好（transition、animation）（对视觉效果的实现更好），以及与交互相关的属

性。IE11将支持的属性标准化（去掉了一些ms前缀），以及让文字的表现更国际化（让HTML5成为世界

的标准）

属性的数据类型

IE9：

（Opera完全未实现，Safari不支持turn）、【ch、rem、vh、vw、vmin（IE
实现为vm）】、【hsl、rgba（）、hsla（）、currentColor、transparent（IE7、8只
支持background、border为transparent）】、、、
<transform-function（-ms基本支持）

IE10：

【-ms】、transform-function（3d支持）

IE11：

【rebeccapurple】

函数

IE9：
attr（）、calc（）

IE10：

linear-gradient（）【background-image（之前实现了在border-radius以及上的实
现）】

规则

IE9:

@meadia[Media features],@namespace

IE10：

@viewport（+ms）

/函数与规则未整理完/

总结：总的来说，IE9开始对的标准开始支持，能够初步使用一些媒体资源（audio，video，canvas，

svg等），支持了WOFF格式。IE9比起IE8是巨大的进步，而IE10对标准的支持更加良好，可交互性，标准

性完成的不错，在动画方面开始支持。IE11逐步实现标准的其他一些方面。每一代的浏览器在历史的进程

中对标准的支持越来越好。互联网的各种标准是满足需求而制定的，希望各种标准能够规范化地被支持。

作为web开发者，希望规范能够被很好地实行，人们能够及时更新浏览器（只能希望了。。。）