2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

HTML5 和 CSS3 是当前前端开发中比较重要的技术，近年来随着浏览器的迭代更新，HTML5 和 CSS3 的兼容性也得到了很大的提升。本篇攻略将会比较当前市面上五大主流浏览器（Chrome、Firefox、IE、Safari、Opera）在HTMML5 和 CSS3 的兼容性表现，并给出一些典型的示例说明。

Chrome

作为一款被广泛使用的浏览器，Chrome 在 HTML5 和 CSS3 的支持度表现也非常出色。Chrome 对 HTML5 新增加的很多特性都有良好的支持，例如 Web Sockets、Web Workers、localStorage 等。同时，Chrome 的 CSS3 支持也非常全面，支持 box-shadow、border-radius、text-shadow、opacity 等特性。下面为典型的示例：

<script>
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("username", "John");
    document.getElementById("result").innerHTML = "Your username is: " + localStorage.getItem("username");
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
  }
</script>

在上述示例中，我们使用了 HTML5 的 Web Storage 特性来实现本地缓存数据，而这个功能在 Chrome 浏览器中完美支持。

Firefox

Firefox 是一个开源的浏览器，由于其较好地支持 HTML5 和 CSS3，在前端开发圈也有一定的用户群体。相对于 Chrome，Firefox 在 HTML5 和 CSS3 的部分特性上可能有一些不足，但是大部分情况下都有良好的支持。

.button {
  background: -webkit-linear-gradient(#2e4361, #0086df);
  background: -moz-linear-gradient(#2e4361, #0086df);
  background: -ms-linear-gradient(#2e4361, #0086df);
  background: linear-gradient(#2e4361, #0086df);
}

在上述示例中，我们使用了 CSS3 的渐变特性，并使用上述的代码来兼容多个浏览器，包括 Chrome、Firefox、IE9+、Safari、Opera 等浏览器。

IE

作为市场份额最大的浏览器厂商，微软的 IE 浏览器一直被广大前端开发人员诟病其兼容性问题。但在最新的版本 IE 11 中，IE 虽然仍然存在一些不兼容 HTML5 和 CSS3 的特性，但已经较之前有了较大的改善。

<div class="box">
  <p>这是一段边框会圆角的文本</p>
</div>

在上述示例中，我们使用 CSS3 的 border-radius 特性来实现圆角效果，在IE中需要使用以下代码来兼容：

.box {
  border-radius: 10px;
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari 和 Chrome */
}

Safari

Safari 是苹果公司所开发的浏览器，在 Mac OS 系统中得到广泛使用。在 HTML5 和 CSS3 的兼容性方面，Safari 的表现也较为优异，支持大部分的 HTML5 标签和 CSS3 特性。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在上述示例中，我们使用了 HTML5 的 video 标签来实现视频播放，并使用多个 source 标签来实现不同类型的视频文件播放，在 Safari 中完美支持。

Opera

Opera 是一款曾经颇具市场影响力的浏览器，后来逐渐被 Chrome 和 Firefox 所替代。在 HTML5 和 CSS3 的兼容性方面，Opera 的表现较为出色，支持大部分的 HTML5 新特性和 CSS3 特性。

.text {
  text-shadow: 2px 2px #888;
  -webkit-text-shadow: 2px 2px #888; /* Safari */
  -moz-text-shadow: 2px 2px #888; /* Firefox */
  -o-text-shadow: 2px 2px #888; /* Opera */
}

在上述示例中，我们使用了 CSS3 的 text-shadow 特性，在不同浏览器中兼容时需要使用类似上述示例中类似的方式来实现兼容。