Attention a datalist et à la compatibilité avec anciens navigateurs !

Salut à tous

Juste un retour sur l'utilisation de datalist

Dans l'article d'alsacreation on donne cet exemple que j'ai appliqué.

<datalist id="bieres">
  <option value="Meteor">
  <option value="Pils">
  <option value="Kronenbourg">
  <option value="Grimbergen">
</datalist>

Je me suis retrouvé avec des utilisateurs me disaient que ma page ne fonctionnait plus.
Après avoir longuement réfléchi (et le temps que ces utilisateurs répondent au traditionnel questionnement sur version du navigateur et OS), j'ai fini par constater que cette syntaxe faisait foirer Safari sur Snow Leopard (OS 10.6.5 et Safari 5.0.5 pour l'utilisatrice qui m'a répondu). Tout ce qui suit le bloc datalist n'apparait plus sur la page semble-t-il !

La faute en revient aux balises <option> qui ne sont pas fermées. Si on ajoute </option> alors tout rentre dans l'ordre, mon utilisatrice vient de me le confirmer.

J'ai eu un autre utilisateur me signalant un problème, mais il n'a pas donné suite (version OS et navig), donc d'autres navig sont peut être concernés.
Ce problème est surement anecdotique au regard des stats d'utilisation des navigateurs sur le web, mais il y a surement encore pas mal de MacBook blanc en circulation dont les OS n'ont pas été mis à jour , en particulier chez les étudiants (mon public). Je sais que Snow Leopard a par ailleurs ses adeptes. Bref, n'ayant rien trouvé sur le web l à dessus, je laisse un petit message ici et Google fera son job pour les suivants

B.

Oui oui je fais bien la différence entre xhtml et html.
D'ailleurs j'avais écrit dans mon premier jet <option ... /> ce qui ça par contre me retournait une erreur au validateur.

Pour les étudiants, c'est surtout un peu la faute d'Apple. Un vieux MacBook blanc avec son Snow Leopard d'origine reste une très bonne solution pour la bureautique et le web. Ceux et celles qui ne font que ça n'ont pas vraiment de raison de changer. Par contre effectivement, les mises à jour de sécurité on peut s'assoir dessus. Bref, le matos Apple vieilli parfois trop bien

B.

PS : je vais penser au S la prochaine fois

Bonjour,

Après une nuit de sommeil, je suis "un peu" plus réveillé
Shame on me
J'ai bêtement focalisé sur cette histoire de fermeture de balise (parfaitement valide) au lieu de me préoccuper de l'élément datalist, qui n'est purement un simplement pas implémenté dans Safari (ok dans Chrome... Safari le nouveau boulet du web ?)

Je viens de relire plus attentivement l'article de Okko (ce que j'aurai dû faire en premier lieu...) et de vérifier sur Safari (7.1), c'est beaucoup plus clair

Comme beaucoup de nouveauté apporté par HTML5, il convient d'être prudent, et d'attendre un peu plus de maturité ou en tout cas d'implémentation correcte sur tous les navigateurs (comportement parfois étrange sur bon nombre d'entre eux), même si, depuis la parution de l'article, nombre de chose ont évolué.

En attendant, comme le préconise Okko (+ commentaires) sécuriser le tout via un select :

a écrit :
Pour les navigateurs ne supportant pas <datalist>, une alternative simple peut être trouvée en complétant le formulaire par un <select>. Le champ primaire reste libre, tandis que la liste de choix est présentée pour ces navigateurs.

Ou mettre en place une alternative pour les anciens navigateurs (cf fin d'article) via JavaScript.

Je retourne me reposer

La fonctionnalité mise en place n'étant pas indispensable, je misais pour ce qui me concerne sur une simple ignorance de safari (et des autres) pour celle-ci, comme dans la plupart des cas, me semble-t-il.
Mon retour a pour simple but d'indiquer que l'ignorance n'est pas de mise dans cette situation et que les effets indésirables sont réels (et brutaux).

La bonne solution serait elle ce select affublé d'un display none si on n'a pas besoin de fallback ... à voir, mais je n'ai pas trop de temps à perdre avec ça à vrai dire (et surtout aucune possibilité de tester).

B.

Mon second utilisateur a été réanimé et m'indique qu'il avait ce problème sur Chrome (sans précision de version ou d'OS, la réanimation a laissé des traces .... )
Je n'ai pas Chrome par principe ... donc je n'ai pas testé, mais a priori, attention vraiment quand même avec ces <option> qu'on oublierait de refermer dans son datalist ... !

B.

Bonjour,

BertrandB a écrit :
Mon second utilisateur a été réanimé et m'indique qu'il avait ce problème sur Chrome (sans précision de version ou d'OS, la réanimation a laissé des traces .... )
Je n'ai pas Chrome par principe ... donc je n'ai pas testé, mais a priori, attention vraiment quand même avec ces &lt;option&gt; qu'on oublierait de refermer dans son datalist ... !
B.

Pas de souci rencontré sous Chrome avec cette syntaxe HTML5, selon CanIuse datalist est supporté par ce navigateur depuis sa version 20 (Juin 2012 tout de même et nous en sommes à la version 38 si je ne m'abuse...)
Encore une fois, cela reste anecdotique
Encore une fois, il existe des solutions simples pour palier à d'éventuels problème de rétro-compatibilité (utilisation de select, rigueur dans l'écriture du code (donc fermeture des balises), utilisation de polyfill permettant de simuler sur un navigateur ancien des fonctionnalités qui ne sont pas nativement disponibles (moteur de recherche ou liens en fin d'article + commentaires)
Encore une fois, c'est quoi ces gens qui ne mettent pas à jour leurs navigateurs ?
Modifié par 6l20 (16 Oct 2014 - 17:20)