HTML5格式与polyfills - 它值得吗？ [英] html5 forms with polyfills - is it worth it?
问题描述
例如，取一个datepicker字段。本机的html5实现在每个浏览器中都呈现不同的效果。另外你的polyfilled解决方案（例如jQuery UI），对于不支持这个功能的浏览器，也将呈现不同的结果。
现在，我们引入了多个定制和当我们使用jquery有一个完美的工作和统一的解决方案时，同样的形式的维护！
我很想听听这个领域的一些真实世界的经历，因为我我对所有的嗡嗡声感到恼火！
首先我是 webshims lib （其中一个polyfills，不再被维护）。回答你的问题：是否值得为一个项目创建表单填充？
不，它是真的很难为一个项目做到这一点。好吧，我已经做到了，仅仅是因为我想使用现代技术。
是否值得为项目使用像webshims lib这样的表格填充？
绝对是！这是为什么：
1。 Nice标准化声明性标记API
包含webshims并编写以下脚本：
// polyfill表单（约束验证）和form-ext（日期，范围等）
$ .webshims.polyfill（'forms forms-ext'）;
您只需将小部件和约束写入表单即可：
< input type =date/>
< input type =datemin =2012-10-11max =2111-01-01/>
< input type =rangedisabled />
< input type =emailrequired placeholder =你可以使用占位符/>
这将创建3个不同的小部件，每个小部件的配置不同。没有额外的JS需要标准化，干净和精益的代码。
2。标准化的DOM-API
同样适用于DOM API。以下是两个示例：结合两个日期字段和将范围字段与日期字段组合。在现代浏览器中无需使用JS
在旧浏览器中优雅地降级，并且在现代浏览器中运行良好。
4。在现代浏览器中减少文件大小
特别适合移动设备（例如iOS 5，Blackberry支持日期）
< H2> 5。更好的用户体验（主要是移动设备）
如果您使用的是更好的移动用户体验（更好的输入UI，更好的性能，适合系统）： type =email， type =number and type =date/ type =range
但是，可定制性又如何？
我是一家大型机构的开发人员，绝对是绝大多数客户，大多数设计师不会容忍差异，但我仍然希望使用现代技术，这意味着webshims lib可以为您提供两全其美的解决方案。
自定义约束验证
填充部分
// polyfill约束验证
$ .webshims.polyfill（形式）;
自定义错误泡泡的UI：
//在DOM准备就绪
$（function（）{
$（'form'）。bind（'firstinvalid '，function（e）{
//显示第一个无效元素的无效警报
$ .webshims.validityAlert.showFor（e.target）;
//防止浏览器显示本地验证消息
返回false;
}）;
}）;
生成以下标记：
<！ - 上面的JS代码将为验证警报生成以下自定义样式HTML标记 - >
< span class =validity-alert-wrapperrole =alert>
< span class =validity-alert>
< span class =va-arrow>< span class =va-arrow-box>< / span>< / span>
< span class =va-box>目前栏位的错误讯息< / span>
< / span>
< / span>
自定义无效/有效表单字段的样式：
.form-ui-invalid {
border-color：red;
}
.form-ui-valid {
border-color：green;
}
自定义有效提醒的文本：
< input required data-errormessage =嘿这是必需的!!! />
现在有什么意义：
- 仍然可以在没有JS的情况下工作
- 现代浏览器仅加载定制代码（3kb min / gzipped），旧浏览器会加载额外的API（大约13kb min / gzip ）（表单中不仅包含约束验证API，还包括自动对焦，占位符，输出等）
您的特殊示例是如何定制日期栏？
没问题：
//配置webshims以在所有浏览器中使用可自定义的小部件UI
$ .webshims.setOptions（'forms-ext'，{
replaceUI：true
}）;
$ .webshims.polyfill（'forms forms-ext'）;
此外：
- $ b现代浏览器中没有JS的$ b
- 仍然可以使用
- 现代浏览器只加载UI和UI-API粘合剂，但不加载DOM-API（valueAsNumber，valueAsDate ...）
现在，这里最好：
//将webshims配置为在所有非移动浏览器中使用可定制的小部件UI，但是在所有桌面和所有不支持的移动浏览器中都可自定义小部件UI
$ .webshims.setOptions（'forms-ext'， {
//哦，我知道这是糟糕的浏览器嗅探:-(
replaceUI：！（/ mobile | ipad | iphone | fennec | android / i.test（navigator.userAgent））
'）;
$ .webshims.polyfill（'forms forms-ext'）;
- 减少移动浏览器的文件大小和更好的用户体验（大多数客户和大多数设计人员会因为在移动设备上拥有不同的用户界面而喜欢你）
- 现代浏览器中没有JS仍然可以使用
- 现代浏览器只加载用户界面和UI-API粘合剂，但不加载DOM-API（valueAsNumber，valueAsDate ...）
Despite all of the buzz around html5 forms, it seems to me like you are creating extra work, in most scenarios, by going this route.
Take, for example, a datepicker field. The native html5 implementation of this renders differently in every browser. In addition your polyfilled solution (jquery UI for instance), for a browser not supporting this feature, will also render differently.
Now, we have introduced multiple points of customization and maintenance for the same form, when we had a perfectly working and unified solution with jquery!
I'd love to hear about some real world experiences in this area, because I'm getting annoyed with all of the buzz!
解决方案First of all I'm the creator of webshims lib (one of those polyfills, which isn't maintained anymore). To answer your question:
Is it worth creating a forms polyfill for a project?
No, it is really hard to do this just for one project. Well, I have done it, simply because I want to use modern technologies.
Is it worth using a forms polyfill like webshims lib for a project?
Yes absolutely! And here is why:
1. Nice standardized declarative Markup API
After including webshims and scripting the following:
//polyfill forms (constraint validation) and forms-ext (date, range etc.) $.webshims.polyfill('forms forms-ext');You can simply write your widgets and your constraints into your form:
<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" />This will create 3 different widgets and each are configured differently. No extra JS needed just standardized, clean and lean code.
2. Standardized DOM-API
Same goes to the DOM API. Here are just two examples: Combining two date fields and combining a range field with a date field.
3. works without JS in modern browsers
Degrades gracefully in old browsers and works well in modern ones.
4. Less file size in modern browsers
Especially good for mobile (iOS 5, Blackberry have support for date for example)
5. Better UX [mostly mobile]
Better mobile UX (better input UI for touch, better performance, fits to the system), if you are using it: type="email", type="number" and type="date"/type="range"
But still, what about customizability?
I'm a developer in a bigger agency and you are absolutely right most clients and most designers won't tolerate much differences, but I still want to use modern technologies, which means webshims lib can give you the best of both worlds.
Customizing the constraint validation
The polyfilling part
//polyfill constraint validation $.webshims.polyfill('forms');Customizing the UI for the error-bubble:
//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; }); });generates the following markup:
<!-- 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>Customizing the style of an invalid/valid form field:
.form-ui-invalid { border-color: red; } .form-ui-valid { border-color: green; }Customizing the text of the validity alert:
<input required data-errormessage="Hey this is required!!!" />And now, what's the point:
- still works without JS
- modern browsers load only the customization code (3kb min/gzipped) and old browsers do load the additional API (about 13kb min/gzip) (forms include a lot more than just constraint validation API, for example there is also autofocus, placeholder, output and so on)
And what is with your special example, customizing the datefield?
No problem:
//configure webshims to use customizable widget UI in all browsers $.webshims.setOptions('forms-ext', { replaceUI: true }); $.webshims.polyfill('forms forms-ext');And also here:
- still works without JS in modern browsers
- modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate...)
And now, here comes the best:
//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');- less file size and a better UX for mobile browsers (most clients and most designers will love you for having a different UI in mobile!!!)
- still works without JS in modern browsers
- modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate...)
这篇关于HTML5格式与polyfills - 它值得吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
