que - read more html5
html5 se forma con polyfills-¿Vale la pena? (3)
A pesar de todos los rumores acerca de los formularios html5, me parece que estás creando trabajo extra, en la mayoría de los escenarios, yendo por esta ruta.
Tome, por ejemplo, un campo datepicker. La implementación html5 nativa de esto rinde de manera diferente en cada navegador. Además, su solución poliedrada (jquery UI por ejemplo), para un navegador que no admita esta función, también se procesará de manera diferente.
Ahora, hemos introducido múltiples puntos de personalización y mantenimiento para la misma forma, cuando teníamos una solución perfecta y unificada con jquery!
Me encantaría conocer algunas experiencias del mundo real en esta área, ¡porque me molesta todo el rumor!
En apoyo de la respuesta webshims de Alexander, he realizado una investigación considerable sobre el comportamiento del navegador cruzado de las entradas de HTML5 desde una perspectiva UX, UI y front-end. Mi conclusión es que la única forma de tener un comportamiento preferido en todos los dispositivos y navegadores es usar un relleno como webshims. Gran parte de esto tiene que ver con no poder utilizar la funcionalidad nativa en dispositivos como rodillos de barril para fechas y teclados numéricos para números sin también tener una manera de admitir navegadores de escritorio que no implementan esas características.
Aquí hay un análisis de cómo se comporta una entrada de fecha en diferentes implementaciones nativas frente a plugins populares:
Análisis de entrada de fecha: hoja de cálculo de Google
(Puedes ver cómo webshims saca lo mejor de todas las implementaciones)
Aquí hay un análisis de cómo se comportan los tipos de entrada del mundo real en los navegadores comunes de forma nativa y con un respaldo de webshim:
Análisis UX de entradas HTML5 con respaldo de webshim - Hoja de cálculo de Google
Aquí está la página de demostración utilizada para analizar estas entradas:
Demostración de página de entradas HTML5 - CodePen
En primer lugar, soy el creador de webshims lib (uno de esos polyfills, que ya no se mantiene). Para responder tu pregunta:
¿Vale la pena crear un relleno de formularios para un proyecto?
No, es realmente difícil hacer esto solo para un proyecto. Bueno, lo he hecho, simplemente porque quiero usar tecnologías modernas.
¿Vale la pena utilizar un formulario polyfill como webshims lib para un proyecto?
¡Si, absolutamente! Y aquí está el porqué:
1. Bonita API de marcado declarativa estandarizada
Después de incluir webshims y scripting lo siguiente:
//polyfill forms (constraint validation) and forms-ext (date, range etc.)
$.webshims.polyfill(''forms forms-ext'');
Simplemente puede escribir sus widgets y sus restricciones en su forma:
<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" />
Esto creará 3 widgets diferentes y cada uno se configura de manera diferente. Ningún JS adicional necesitaba solo código estandarizado, limpio y delgado.
2. DOM-API estandarizada
Lo mismo vale para la API DOM. Aquí hay solo dos ejemplos: Combinar dos campos de fecha y combinar un campo de rango con un campo de fecha .
3. funciona sin JS en navegadores modernos
Se degrada graciosamente en navegadores antiguos y funciona bien en los modernos.
4. Menor tamaño de archivo en navegadores modernos
Especialmente bueno para dispositivos móviles (iOS 5, Blackberry tiene soporte para la fecha, por ejemplo)
5. Mejor UX [principalmente móvil]
Mejor UX móvil (mejor interfaz de usuario de entrada para tocar, mejor rendimiento, se adapta al sistema), si lo está usando: type="email" , type="number" y type="date"/type="range"
Pero aún así, ¿qué pasa con la personalización?
Soy un desarrollador en una agencia más grande y usted es absolutamente correcto y la mayoría de los diseñadores no tolerarán muchas diferencias, pero todavía quiero usar tecnologías modernas, lo que significa que WebSims lib puede darle lo mejor de ambos mundos.
Personalizar la validación de restricciones
La parte polifilling
//polyfill constraint validation
$.webshims.polyfill(''forms'');
Personalizar la interfaz de usuario para la burbuja de error:
//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;
});
});
genera el siguiente marcado:
<!-- 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>
Personalizar el estilo de un campo de formulario inválido / válido:
.form-ui-invalid {
border-color: red;
}
.form-ui-valid {
border-color: green;
}
Personalizar el texto de la alerta de validez:
<input required data-errormessage="Hey this is required!!!" />
Y ahora, ¿cuál es el punto?
- todavía funciona sin JS
- los navegadores modernos solo cargan el código de personalización (3kb min / gzip) y los navegadores viejos cargan la API adicional (alrededor de 13kb min / gzip) (los formularios incluyen mucho más que la API de validación de restricciones, por ejemplo, también hay autofocus, marcador de posición, salida y así)
¿Y qué pasa con su ejemplo especial, personalizando el campo de fecha?
No hay problema:
//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions(''forms-ext'', {
replaceUI: true
});
$.webshims.polyfill(''forms forms-ext'');
Y también aquí:
- todavía funciona sin JS en navegadores modernos
- los navegadores modernos solo cargan la interfaz de usuario y el pegamento UI-API, pero no el DOM-API (valueAsNumber, valueAsDate ...)
Y ahora, aquí viene lo mejor:
//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'');
- ¡menos tamaño de archivo y mejor UX para navegadores móviles (la mayoría de los clientes y la mayoría de los diseñadores te adorarán por tener una interfaz de usuario diferente en el dispositivo móvil!)
- todavía funciona sin JS en navegadores modernos
- los navegadores modernos solo cargan la interfaz de usuario y el pegamento UI-API, pero no el DOM-API (valueAsNumber, valueAsDate ...)
Yo también era escéptico, si realmente vale la pena pasar por la capa de polyfill en lugar de usar la IU de jquery directa. Después de usar webshims lib y HTML5, pude ver de inmediato que hay mucho menos código de JavaScript. Ya no se requiere un complemento de validación. Gracias Alexander por crear y apoyar este maravilloso polyfill, webshims lib. Aquí hay un ejemplo para hacer una llamada ajax en el clic de envío de un formulario.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script>
// set options for html5shiv
if(!window.html5){
window.html5 = {};
}
window.html5.shivMethods = false;
</script>
<script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="webshims/js-webshim/minified/polyfiller.js"></script>
<script class="example">
$.webshims.setOptions({
//we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc
waitReady: false
});
//load all polyfill features
$.webshims.polyfill(''forms forms-ext'');
</script>
<script type="text/javascript">
$(function(){
var frm = $(''#tstForm'');
frm.submit(function () {
var someDate=$(''#someDate'').val();
alert(''someDate:''+someDate);
// you can make your ajax call here.
return false;
});
});
</script>
</head>
<body>
<form id="tstForm">
Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input>
Full Name:<input id="fullName" name="fullName" type="text" required></input>
Age:<input id="age" name="age" type="number" required min="18" max="120"></input>
<input type="submit" value="Submit"/>
</form>
</body>
</html>