logo标签列表

HTML5和CSS3有什么好的备选方案吗？

htmlcssfallback
15

我正在寻找一个既适用于HTML5又适用于CSS3的好的回退方案，这样我就可以使用它，并且在其他浏览器中仍然能够看起来不错。

这是一个相当普遍的问题：HTML5和CSS3都具有许多功能（并且仍在不断发展）。您是否需要替代某些特定功能？ - Paul D. Waite
2个回答
10
8

看看 Google Chrome Frame 是否可以通过完整功能的网站版本来触达更多用户。还需要针对特定功能进行功能检查。

什么是Modernizr？

Modernizr 是一个小巧简单的JavaScript库，帮助您利用新兴的Web技术（CSS3、HTML5），同时仍然能够对尚未支持这些新技术的旧浏览器保持精细的控制。

Modernizr使用特性检测来测试当前浏览器是否支持即将推出的特性，如rgba()、border-radius、CSS转换等。这些特性目前正在各个浏览器中实现，通过Modernizr，您可以立即开始使用它们，并轻松地控制不支持它们的浏览器的回退方案。

此外，Modernizr创建了一个自命名的全局JavaScript对象，其中包含每个特性的属性；如果浏览器支持它，则该属性将评估为true，否则将为false。

最后，Modernizr还添加了对HTML5元素的样式支持。这使您可以使用更具语义化、前瞻性的元素，如<section>、<header>和<dialog>，而不必担心它们在Internet Explorer中无法工作。

Modernizr不能做什么

Modernizr不会向浏览器添加缺失的功能；相反，它检测特性的本机可用性，并为您提供一种方式，以便在任何浏览器能力下都能维护对您的站点的精细控制。

我在Dive Into HTML5上阅读了关于它的内容。

一些样例：

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

if (Modernizr.video) {
  // let's play some video!
} else {
  // no native video support available :(
  // maybe check for QuickTime® or Flash® instead
}

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {
  // no native support for local storage :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.webworkers) {
  // window.Worker is available!
} else {
  // no native support for web workers :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.applicationcache) {
  // window.applicationCache is available!
} else {
  // no native support for offline :(
  // maybe try Gears or another third-party solution
}

if (Modernizr.geolocation) {
  // let's find out where you are!
} else {
  // no native geolocation support available :(
  // maybe try Gears or another third-party solution
}
...

有时网站会建议使用回退技术，例如对于IE浏览器可以使用Explorercanvas (excanvas.js)，对于地理定位可以使用geo.js。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接