html5 formes avec polyfills - est-ce la peine?

Question

Malgré tout le buzz autour de formulaires html5, il me semble que vous êtes la création de travail supplémentaire, dans la plupart des scénarios, par aller dans cette voie.

Prenez, par exemple, un datepicker champ. Le html5 native de mise en œuvre de ce qui rend différemment dans chaque navigateur. En outre, vos polyfilled solution (jquery UI par exemple), pour un navigateur ne supportant pas cette fonctionnalité, qui sera également s'afficher différemment.

Maintenant, nous avons introduit plusieurs points de la personnalisation et de la maintenance de la même forme, quand nous avons eu un parfait état de fonctionnement et solution unifiée avec jquery!

J'aimerais beaucoup entendre parler de certaines expériences réelles dans ce domaine, parce que je suis fâché avec tout le buzz!

Answer 1

Tout d'abord, je suis le créateur de webshims lib (un de ceux qui polyfills). Pour répondre à votre question:

Vaut-il la création d'une des formes polyfill pour un projet?

Non, il est vraiment difficile de le faire juste pour un seul projet. Eh bien, je l'ai fait, tout simplement parce que je veux utiliser les technologies modernes.

Est-il utile d'utiliser un des formulaires de polyfill comme webshims lib pour un projet?

Oui, absolument! Et voici pourquoi:

1. Nice normalisé de Balisage déclaratif de l'API

Après, y compris webshims et les scripts suivants:

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

Vous pouvez simplement écrire vos widgets et vos contraintes dans votre formulaire:

<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" />

Cela permettra de créer de 3 différents widgets et chaque sont configurés différemment. Pas de supplément de JS besoin standardisé, propre et maigre code.

2. Normalisé DOM-API

En va de même pour l'API DOM. Voici deux exemples: la Combinaison de deux champs de date et de la combinaison d'un champ avec un champ de date.

3. fonctionne sans JS dans les navigateurs modernes

Dégrade gracieusement dans les vieux navigateurs et fonctionne bien dans les modernes.

4. Moins de la taille du fichier dans les navigateurs modernes

Particulièrement bon pour mobile (iOS 5, Blackberry n'a pas de support pour la date par exemple)

5. Mieux UX [pour la plupart mobile]

Meilleur mobile UX (meilleure entrée de l'INTERFACE utilisateur pour le toucher, de meilleures performances, s'adapte au système), si vous l'utilisez: type="email", type="number" et type="date"type="range"

Mais que dire encore de la personnalisation?

Je suis un développeur dans une agence plus grande et vous avez absolument raison, la plupart des clients, et la plupart des concepteurs ne tolère pas beaucoup de différences, mais j'ai encore envie d'utiliser des technologies modernes, ce qui signifie webshims lib peut vous donner le meilleur des deux mondes.

La personnalisation de la contrainte de validation

Les polyfills destinés à la prise de la partie

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

Personnalisation de l'INTERFACE utilisateur de l'erreur-bulle:

//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; 
    });
});

génère le balisage suivant:

<!-- 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>

Personnaliser le style d'un invalide valide champ de formulaire:

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

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

Personnalisation du texte de la validité d'alerte:

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

Et maintenant, quel est le point:

1. fonctionne toujours sans JS
2. les navigateurs modernes charger uniquement le code de personnalisation (3 ko min/format gzip) et les anciens navigateurs ne charger l'API supplémentaire (environ 13kb min/gzip) (formes sont beaucoup plus que juste la contrainte de validation de l'API, par exemple, il y a aussi la mise au point, espace réservé, sortie et ainsi de suite)

Et qu'est-ce que votre spéciale à titre d'exemple, la personnalisation de l'datefield?

Pas de problème:

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

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

Et aussi ici:

1. fonctionne toujours sans JS dans les navigateurs modernes
2. les navigateurs modernes seulement de charger l'INTERFACE utilisateur et l'INTERFACE utilisateur de l'API de la colle, mais pas les DOM-API (valueAsNumber, valueAsDate...)

Et maintenant, voici la meilleure:

//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. moins de la taille du fichier et une meilleure UX pour les navigateurs mobiles (la plupart des clients, et la plupart des concepteurs vont vous aimer pour avoir un autre de l'INTERFACE utilisateur dans le mobile!!!)
2. fonctionne toujours sans JS dans les navigateurs modernes
3. les navigateurs modernes seulement de charger l'INTERFACE utilisateur et l'INTERFACE utilisateur de l'API de la colle, mais pas les DOM-API (valueAsNumber, valueAsDate...)

Answer 2

À l'appui de Alexander webshims réponse que j'ai fait beaucoup de recherches dans la croix le comportement du navigateur de l'HTML5 entrées à partir d'un UX, UI, et avant la fin de la perspective. Ma conclusion est que la seule façon d'avoir préféré le comportement de l'ensemble des périphériques et navigateurs est d'utiliser un polyfill comme webshims. Beaucoup de cela a à voir avec ne pas être en mesure d'utiliser les fonctionnalités en natif sur des appareils comme des rouleaux de canon pour les dates et le pavé numérique pour les numéros sans avoir aussi une façon de soutenir les navigateurs de bureau, qui ne mettent pas en œuvre ces fonctionnalités.

Voici une analyse de la façon dont une date d'entrée se comporte sur les indigènes différentes implémentations vs populaire plugins:
Date de l'analyse input - feuille de calcul Google
(Vous pouvez voir comment webshims a la plus large de toutes les implémentations)

Voici une analyse de la façon dont monde réel d'entrée types de comportement à travers les navigateurs les plus courants en mode natif et avec un webshim de secours:
UX analyse de HTML5 entrées avec webshim de secours - feuille de calcul Google

Voici la page de démonstration utilisée pour analyser ces entrées:
HTML5 entrées de la page de démo - CodePen

Answer 3

J'étais sceptique aussi, s'il valait vraiment la peine d'aller au travers de la couche polyfill au lieu d'utiliser une interface utilisateur simple. Après avoir utilisé webshims lib et HTML5, j'ai immédiatement constaté qu'il y avait beaucoup moins de code javascript. Aucun plugin de validation requis plus. Merci Alexander pour la création et le soutien de ce merveilleux polyfill, webshims lib. Voici un exemple pour effectuer un appel ajax lors du clic de soumission d'un formulaire.

 <!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>