html5表格与polyfills - 是否值得？

Question

尽管围绕html5形式的所有嗡嗡声,在我看来,在大多数情况下,通过这条路线,你正在创造额外的工作.

举一个例如,一个datepicker字段.本机html5实现在每个浏览器中呈现不同.此外,对于不支持此功能的浏览器,您的polyfilled解决方案(例如jquery UI)也将以不同方式呈现.

现在,当我们使用jquery完美地工作和统一解决方案时,我们已经为同一个表单引入了多个定制和维护点!

我很想听听这个领域的一些真实世界的经历,因为我对所有的嗡嗡声感到恼火!

Answer 1

首先,我是webshims lib的创建者(其中一个polyfill,不再维护).回答你的问题:

是否值得为项目创建表单polyfill？

不,这对于一个项目来说真的很难.好吧,我已经做到了,仅仅是因为我想使用现代技术.

是否值得为项目使用像webshims lib这样的表单polyfill？

是的,一点没错!这就是为什么:

1.很好的标准化声明性标记API

包含webshims并编写以下脚本:

//polyfill forms (constraint validation) and forms-ext (date, range etc.)    
$.webshims.polyfill('forms forms-ext');

您只需将窗口小部件和约束写入表单即可:

<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />

这将创建3个不同的小部件,每个小部件配置不同.没有额外的JS只需要标准化,清洁和精益的代码.

2.标准化DOM-API

DOM API也是如此.以下是两个示例:组合两个日期字段并将范围字段与日期字段组合.

3.在现代浏览器中没有JS工作

在旧版浏览器中优雅地降级,在现代浏览器中运行良好.

4.现代浏览器中的文件较小

特别适合移动设备(iOS 5,Blackberry支持日期)

5.更好的用户体验[主要是移动

如果您使用它,更好的移动用户体验(更好的触摸输入UI,更好的性能,适合系统):type ="email",type ="number"和type ="date"/ type ="range"

但是,可定制性呢？

我在一个更大的机构开发者,你是绝对正确的大多数客户端和大多数设计师不会容忍多大差异,但我还是想用现代技术,这意味着webshims LIB可以给你两全其美.

自定义约束验证

填充部分

//polyfill constraint validation
$.webshims.polyfill('forms');

自定义错误气泡的UI:

//on DOM-ready
$(function(){
    $('form').bind('firstinvalid', function(e){ 
        //show the invalid alert for first invalid element 
        $.webshims.validityAlert.showFor( e.target ); 
        //prevent browser from showing native validation message 
        return false; 
    });
});

生成以下标记:

<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert"> 
    <span class="validity-alert"> 
        <span class="va-arrow"><span class="va-arrow-box"></span></span> 
        <span class="va-box">Error message of the current field</span> 
    </span> 
</span>

自定义无效/有效表单字段的样式:

.form-ui-invalid {
    border-color: red;
}

.form-ui-valid {
    border-color: green;
}

自定义有效性警报的文本:

<input required data-errormessage="Hey this is required!!!" />

现在,重点是什么:

1. 仍然没有JS
2. 现代浏览器只加载自定义代码(3kb min/gzip),旧浏览器加载额外的API(约13kb min/gzip)(表单不仅包括约束验证API,例如还有自动对焦,占位符,输出等等)

你的特殊例子是什么,定制日期字段？

没问题:

//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', { 
    replaceUI: true
});

$.webshims.polyfill('forms forms-ext');

还在这里:

1. 在现代浏览器中仍然可以不使用JS
2. 现代浏览器只加载UI和UI-API粘合剂,但不加载DOM-API(valueAsNumber,valueAsDate ...)

而现在,这里是最好的:

//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', { 
    //oh, I know this is bad browser sniffing :-(
    replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});

$.webshims.polyfill('forms forms-ext');

1. 更少的文件大小和更好的移动浏览器用户体验(大多数客户和大多数设计师都会喜欢你在移动设备上使用不同的UI!)
2. 在现代浏览器中仍然可以不使用JS
3. 现代浏览器只加载UI和UI-API粘合剂,但不加载DOM-API(valueAsNumber,valueAsDate ...)

Answer 2

为了支持Alexander的webshims答案,我已经从UX,UI和前端角度对HTML5输入的跨浏览器行为进行了大量研究.我的结论是,跨设备和浏览器首选行为的唯一方法是使用像webshims这样的polyfill.其中很大一部分原因在于无法在日期和数字键盘等设备上使用本机功能,而无法支持不实现这些功能的桌面浏览器.

下面分析日期输入在不同的原生实现与流行插件之间的行为:
日期输入分析 - Google电子表格
(您可以看到webshims如何在所有实现中获得最佳效果)

下面分析现实世界输入类型如何在本地浏览常见浏览器以及使用webshim回退:
使用webshim回退对HTML5输入进行UX分析 - Google电子表格

以下是用于分析这些输入的演示页面:
HTML5输入页面演示 - CodePen