平稳退化适应低版本浏览器

一、方法说明

常用兼容性解决方案是为写Hack，通过*等标记出不同的浏览器，写不同的样式。然而本篇采取的是利用开源的JavaScript库Modernizr（官网——https://modernizr.com/）编写相应的javascript代码解决。首先利用Modernizr判断浏览器是否支持某属性，如果不支持，采取相应的策略。

利用Modernizr的优点（详见官网）：

（1）以下是不使用Modernizr通常采取的兼容策略，判断当前浏览器是支持当前功能，则执行当前设计，否则采取另外策略。如果浏览器支持属性改变了，那么我们就可能得回去重构代码。而Modernizr是判断当前浏览器是否支持某属性，支持则执行A，否则执行B，就算浏览器对属性控件等的支持性改变了，我们的代码基本不需要修改。

if (browser === "the-one-they-make-you-use-at-work") {

   getTheOldLameExperience();

  } else{

   showOffAwesomeNewFeature();

 }

（2）Modernizr可以根据需要自定义组件，不需要下载整个Modernizr.js，大大缩小了文本大小，能加快文件加载速度。

    Modernizr存在的限制：用户如果禁止使用javascript使用，那么Modernizr就无法工作。

 

二、实例：IE对placeholder属性的支持。

    代码：/website/static/js/global.js(依赖——modernizr-custom.js)

    注意事项：input的type属性在ff中可以被修改，而在IE中是只读属性无法修改，所以利用创建附加的input解决password的type属性问题。