- EDIT 9 Janvier
- Le comportement de MSIE 6 et 7 est beaucoup catastrophique que prévu. Je révise ma conclusion dans mon commentaire.
Bon. Là, je suis un peu vénèr.
Je me suis forcé à me lever tôt pour entamer une batterie de test sur mes fonctions toutes neuves. Et j'ai eu droit à une belle plaisanterie de MSIE (pas uniquement de MSIE6, MAIS AUSSI dans MSIE7). J'ai passé 3 jours à développer des systèmes de formulaire, pour me retrouver avec tout le système incompatible avec le navigateur le plus pourri donc le plus répandu du marché.
Ooooh, MSIE se targue d'être parfaitement “compatible” avec des règles css comme :
(CSS)
* html {
mso-random-crap : true;
mso-more-unnecessary-wankery : 15;
mso-non-standard-selector : naturally;
}
Mais dans un formulaire, c'est autre chose.
Disons que vous avez un balisage du genre :
(HTML)
<form action="post">
<button name="LogBox" value="login" type="submit"><img src="interface/profileicon.png" alt="" /> Log in</button>
</form>
Vous vous attendez à avoir en retour :
(requête HTTP)
LogBox=login
ben non, sur MSIE j'ai :
(requête HTTP)
LogBox=<IMG alt="" src="interface/profileicon.png"> Log in
Farpaitement normal...
Chez Microsoft, on trouve tout à fait normal que tous les éléments d'un formulaire doivent renvoyer leur .value
, sauf un qui doit renvoyer son .innerHTML
. Vous pouvez tester vous même sur cette page
Pourquoi lui et pas un autre de ses petits camarades, mystère...
On rigole dans le fond, mais ce matin, ça m'a mis dans une rage folle.
Et encore, je viens de m'apercevoir (12h53) qu'en fait, il ne renvoie pas EXACTEMENT le code HTML, mais une version interprétée à sa manière : au lieu d'avoir <img src="" alt"" />
, j'ai <IMG alt="" src="">
...
Le plus surprenant... euh pardon, plus rien ne me surprend de Microsoft (Jusqu'où iront-ils ?) Ahem... Donc ce comportement a en plus la plaisanterie d'être incohérent. Car si dans votre formulaire vous n'avez qu'un élément <button></>
, et pour peu que la lune soit rousse, votre serveur recevra :
(requête HTTP)
LogBox=login
Ne pas craquer... ne pas... craquer.
Pourquoi un <button> est mieux qu'un <input>
Styliser les éléments d'un <form></>
est déjà assez pénible...
Faut quand même pas charrier, mais la balise <button></>
apporte un indéniable plus sur <input type="submit"/>
: on peut styliser à loisir, avoir un texte différent de celui envoyé au serveur (donc variant suivant les langues), y incorporer des images, faire de très chouettes boutons et .
En fait, les possibilités de stylisation sont largement supérieures, et tout webdesigner préfère largement utiliser une balise aussi malléable (qui d'ailleurs sur Mac OSX ne sont pas des boutons du GUI ce qui est plus simple à gérer, comparez avec l'autre) plutôt que l'austère <input type="submit"/>
. Car cette dernière affiche dans son corps uniquement le contenu de l'attribut value=
qui d'ailleurs est renvoyé dans la requête en cas d'appui.
Et un pti' coup de JScript te va m'arranger ça ma bonn' dame !
Heureusement, il existe un workaround pour que <button></>
réagisse normalement dans MSIE. Mais en passant par un javascript : « Using Multiple "buttons" Elements in IE6 »
(Javascript)
function buttonfix() {
var buttons = document.getElementsByTagName('button');
for (var i=0; i<buttons.length; i++) {
if (buttons[i].onclick) continue;
buttons[i].onclick = function () {
for(j=0; j<this.form.elements.length; j++)
if ( this.form.elements[j].tagName == 'BUTTON' )
this.form.elements[j].disabled = true;
this.disabled=false;
this.value = this.attributes.getNamedItem("value").nodeValue ;
}
}
}
window.attachEvent("onload", buttonfix);
ça fait lourd dans la balance, ça :
- un Javascript pour faire tourner directement les Flash (contourner le procès Eolas)
- un Javascript pour virer les toolbar d'images
- un Javascript pour fixer le comportement de
<button></>
En espérant que votre code ne fasse pas partir en sucette MSIE et surtout que Javascript ne plante pas. En plus, tout dépend de là où vous le lancez. Si un <button></>
génère un évènement Javascript (genre un système qui empêche une double validation, ou qui vérifie côté client que tous les champs obligatoires du formulaire sont bien remplis) ben forcément... ça marche pas.
Et dire que certains se plaignent de la disparition de Mozilla Netscape 0.93. On va quand même pas être obligé d'utiliser <input type="submit"/>
Hem...
Heureusement, il existe une autre voie : Pallier à ce souci côté serveur.
Server side : Solution inside ?
Cette méthode a l'avantage de marcher à tous les coups, sans renoncer à la balise <button></>
, ni utiliser de méthodes particulièrement ésotériques qui va bloquer les gens normaux. Pour cela nous utilisons une étude comportementale du nEunEu dans son environnement scatologique.
Voici mon code en PHP, on arrête de rire derrière, c'est agaçant. Je tiens à signaler aux fanatiques de la boîte à cons MS-MVP qu'il leur sera aisé de traduire ça en Visual Basic :
PHP
function IEbugButtonValid($name,$value,$innerHTML)
{
// comment palier aux bugs de MSIE sur le comportement de l'élément <BUTTON></BUTTON> par de l'accessibilité côté serveur
// par défaut, on est pas bon
$ok = false;
// bonus : je fais en sorte que cette fonction marche dans les deux méthodes formulaires
$retour = !empty($_POST) ? $_POST[$name] : $_GET[$name];
if ($retour==$value) $ok=true; // le comportement NORMAL de la balise <BUTTON></BUTTON>
// et maintenant, on déploie la rampe pour handicapés mentaux
// d'abord, on vérifie qu'on a pas déjà eu une validation par le comportement NORMAL (rappelons que nEunEu est aléatoire)
if ((!$ok) && (strstr($_SERVER['HTTP_USER_AGENT'],'MSIE')!=false))
// c'est bien, nEunEu sait épeler son nom. On va pas lui en demander plus.
// J'aurais pu tester Mozilla/4 , mais certains téléphones s'en servent encore sans s'appeler nEunEu
{
// on prépare la soupe dans le goût de nEunEu : on vire les balises HTML
// parce que sinon, on va pas en sortir avec les inversions de paramètres et le changement de casse des balises
//je vire aussi les espaces pour ne pas me faire avoir par ma propre indentation de code
$innerHTML=ereg_replace('<[^>]*>','',str_replace(array("
","
","\t",' '),'',$innerHTML));
// kiii couïc kiii couïc kiii couïc
$retour=ereg_replace('<[^>]*>','',str_replace(array("
","
","\t",' '),'',$retour));
// et une comparaison
$ok = strstr($retour,$innerHTML)!==false;
// kiii couïc kiii couïc kiii couïc
}
return $ok;
}
Oui, je sais, c'est parfaitement gruiiiiik comme méthode, mais moi, j'assume complètement. Et apparemment, ce code est parfaitement fonctionnel.
Moralité de cette fonction, au lieu d'avoir un joli code genre :
(PHP)
if ($_POST['LogBox']=='login')
je suis contraint d'avoir à la place :
(PHP)
if (IEbugButtonValid('LogBox','login','<img /> Log in'))
D'après vous, avec un “héritage” pareil, comment voulez-vous que Microsoft attire des développeurs vers ses nouvelles technologies web (C#, .NET, XALM, OpenXML, silverlight) s'ils les font enrager de cette manière-là ? Ça me semble évident que de moins en moins de gens s'intéresse à toutes ces merveilles quand on voit un fonctionnement fondamental aussi mal branlé passez-moi l'expression.
Et maintenant, exercice pratique :
Soit la déclaration suivante dans le blog officiel de l'équipe de développement de MSIE8 :
Nous avons la responsabilité de respecter le travail que les sites ont déjà fourni pour être utilisable avec MSIE. Nous devons améliorer notre support des standards et garder la compatibilité avec les anciennes versions de manière que (1) MSIE8 continue de marcher avec les milliards de pages du web qui marchent déjà avec MSIE6 et MSIE7 et (2) rendre le développement des prochaines milliards de page de manière interopérable encore plus aisé.
(Dean Hachamovitch, General Manager du IETeam)
D'après vous, après une telle déclaration, est-ce que ce bug fondamental[NB] va être corrigé ? Moi, je parie que Microsoft va le laisser tel quel pendant des décennies.
[NB] : À mon sens, ce bug est fondamental, car il intervient au niveau de l'interprétation des balises HTML et de la réponse HTTP. Ce qui veut dire que ni les spécifications ECMAscript ou CSS n'ont de prise sur lui, et que donc Microsoft peut clamer haut et fort qu'ils valident le test Acid2 et tout ce que vous voulez alors qu'ils sont complètement foireux sur la couche de base du web.
23 réactions
1 De Da Scritch - 03/01/2008, 17:37
Un petit tour et puis reviens et ben non, c'est pas ça.... si on veut récupérer la valeur (parce que par exemple, on a mis plusieurs boutons donc plusieurs actions possibles) , on ne peut qu'utiliser sereinement <input type="submit" />
La haine
2 De giz404 - 04/01/2008, 09:22
J'avais déjà rencontré le problème, mais n'étais pas allé aussi loin que toi dans sa résolution, faute de temps. J'avais simplement fait l'impasse sur le <button> et l'avais remplacé par un submit, certes moins sexy, mais fonctionnel sans trop de prise de tête.
Ce qui est grandiose, c'est quand tu tentes d'expliquer à ton client pourquoi tu factures 4 heures de plus sur son projet alors que c'était supposé être simple. (en même temps, tu sais qu'il ne jure que par IE, donc il n'a qu'à payer.)
3 De Da Scritch - 04/01/2008, 09:49
Ne rigole pas, mais...
C'est une boîte à outil que je ne facture pas, puisque je la développe d'abord pour mes sites personnels.
Oui, je sais, certains trouvent ça stupide, mais d'un autre côté, j'aurais même pas pris le temps de faire ces recherches et d'écrire un billet, or cette information est peu connue.
4 De Mitch 74 - 06/01/2008, 13:24
Perso, j'ai fait l'impasse sur <button>; j'utilise <input type="submit">, avec une bonne dose de CSS pour lui donner le contenu que j'ai envie. Déjà, je trouve 'button' redondant: j'ai même du mal à comprendre comment il a pu être conservé en HTML 4.0.
Perso, pour moi il tombe direct dans la catégorie 'Quirks' - et même si je suis 100% d'accord avec toi pour dire qu'IE est une merdaille sans nom, je trouve inutile de pester sur une cagaille pareille - il serait plus efficace de donner une méthode CSS pour styler un input, comme 'border', border-radius, background-attachment, input[type="submit"]:before {url="icone.png"}, etc.
Ben oui - ça marche comme ça. Et si ça marche pas, au moins tu n'as pas un affichage imbitable sur le navigateur cible.
5 De ouf - 06/01/2008, 19:11
Ouf ... Cette fois mon système n'est pas mis a mal. Microsoft a la facheuse habitude de décider que telle ou telle autre fonction javascript devait être ... L'équipe IE (attend toujours un exemple concret du au code) a décidé que le codage de mes exemples (suis pas webmaster donc fais juste pour fonctionner) provoquait des erreurs ... Pas une d'erreurs sur le navigateur IE8 et Autres mais une bonne vitesse de rendu. Il est vrais que ... pour contourner les verouillages ie il existe un assembleur de script dans la version FX. Sinon marche bien dans le format dévelope pour netscape ... Pour un navigateuir qui marche .. optez pour netscape.
Le tout PHP est la meilleure solutions pour controler internet via des bases de donnés .. Petit a petit .... Renoncer a html pur et Javascript peut avoir des conséquence nuisible pour le net en général.
Allez ... J'est l'habitude des expertises ...
Juste entre nous ... Faut pas aller dans l'exé .. malgrés le côté un peut snob de microsoft .. ceux-ci bossent bien.
6 De Hadrien - 07/01/2008, 10:57
@ giz404 : Ce qui est grandiose, c'est de facturer au client du temps passé à rechercher quelquechose que tu ne sais pas faire et qui va te resservir plus tard mais dont le client n'a que foutre.
Il avait pas signé un devis avec un nombre prédéfini d'heure ton client ?
7 De Da Scritch - 07/01/2008, 11:07
@ouf : eeeh ! réveille-toi : Netscape est mort. Mort et enterré. ( http://blog.netscape.com/2007/12/28... ) Quant à Javascript selon Microsoft, le langage n'est pas réglé par une recommandation (comme le W3C pour le HTML), mais par une normalisation (par l'ECMA, d'où le nom ECMAscript), et il te suffit de chercher dans mes billets sur javascript pour te rendre compte de l'incohérence de Microsoft.
Par exemple, une chaîne vide renvoie forcément "". Sauf pour MSIE : "null"
Super vide ta chaîne de caractère, non?
Microsoft a beau avoir des gens talentueux (ils peuvent se les payer, ou les laisser s'échapper comme Window Snyder), ils ont des managers qui n'y connaissent rien et qui refusent de remettre en cause leurs opinions foireuses.
8 De xylpho - 07/01/2008, 11:41
J'ai jamais dit que c'était stupide :)
C'est juste que c'est contre-productif sur ta facture finale.
Et c'est toi qui m'a traité d'idiot mon cher Xavier
Salutations
9 De Da Scritch - 08/01/2008, 13:56
Typiquement le problème qui me bloque : plusieurs boutons de validations (pour plusieurs actions possibles sur le même formulaire) et avec plusieurs versions linguistiques du même site.
Si <button>texte</> marchait bien, j'aurais aucune difficulté.
Là, je suis en train de ruser entre soit plomber mon code par x valeurs possibles retournée par <input type=submit value="texte" />, doubler le nombre de réponses possibles avec <button>, ou ruser en css en effaçant le texte affiché par <input /> et en ayant plusieurs fonds stylisés.
Proprement débile. Impossible d'obtenir un code propre et internationalisable sans effort.
@ xylpho
désolé. j'aurais dû hurler "gros béta"
10 De Hadrien - 08/01/2008, 16:15
"Impossible d'obtenir un code propre et internationalisable sans effort." Si le web dev se faisait sans effort, on serait au chômage ;)
11 De Mitch 74 - 08/01/2008, 20:35
en relisant de plus près, je dirais que, mine de rien, IE est assez consistant dans ses réactions à ce niveau-là; pour être précis, les <INPUT> sont des balises autofermées - donc sans contenu. Il est donc normal qu'elles ne puissent renvoyer leur innerHTML. Les 'seuls' autres éléments d'un formulaire (de tête) non autofermés sont les <SELECT> (renvoient la valeur de l'option sélectionnée) et les <TEXTAREA> - dont la 'value' serait de toute façon égale à l' .innerHTML, puisqu'il s'agit d'une zone définie du document pour contenir des enfants définis par l'utilisateur (à l'inverse d'un input type texte dont la valeur est modifiée par l'utillisateur - nuance subtile au niveau du DOM).
Ce qui doit te faire pester, c'est que IE te renvoie un extrait du DOM tel qu'il le constitue, et non la valeur exacte présente dans le noeud - ça, c'est plus gênant.
Parce que sinon, en ce qui concerne les valeurs différentes selon le bouton 'submit' pressé, il serait plus sûr au niveau de l'interface et des infos transmises d'utiliser des boutons radio, lesquels déclencheraient l'event 'submit' afin de t'assurer que 2 boutons 'submit' ne sont pas pressés en même temps (si c'est possib' et ça arrive) et à ce moment, ton internationalisation pourrait se faire au niveau des LABELs associés à ces boutons radio (dont tu dissimulerais la valeur affichée, laquelle pourrait alors rester la même. Tu transmettrais le langage actif via un inut 'hidden', dont la valeur peut aussi te servir à savoir si JS était actif, fini basta).
Tu laisses le bouton 'submit' apparaître uniquement dans les cas où Javascript n'est pas actif, et hop problème réglé...
L'avantage des boutons radio, c'est que tu peux aussi les mettre où tu veux (pas forcé de les grouper).
12 De Da Scritch - 08/01/2008, 23:09
@Mitch64 Ton analyse est erronée :
<Select></>
ne renvoie pas leur contenu mais la valeur de la balise<option></>/
choisie (et non pas le texte affiché) et j'ai bien précisé VALEUR<textarea></>
renvoie sont innerHTML, mais il n'est pas ré-interprété. D'ailleurs, il s'agit en fait de la VALEUR qui est renvoyé. Et heureusement.Alors que
<button></>
... bon, déjà la recommandation HTML4 est floue mais surtout que dans le modèle DOM, MSIE voit bien une VALEUR (c'est ce qui est exploité par le javascript) mais ne renvoie pas cette VALEUR mais totalement autre chose. Qui plus est, il le renvoie systématiquement, même si<button></>
n'a pas été enfoncé. Réessaie avec MSIE mon exemple et regarde le source. C'est franchement édifiant. Exemples encore ici : http://www.thescripts.com/forum/thr...Nick Cowie note dans sa présentation pour le Perth WSG des petits “ajouts” de positionnement avec MSIE
On a un élément qui est cohérent sur tous les navigateurs sauf un, qui est reconnu bourré d'erreurs. Je veux bien croire que le W3 n'est pas très précis, mais vue l'ampleur de la catastrophe, je parie pour la grosse couffe qui ne sera jamais corrigé, pour contenter des sites qui sont totalement incompatibles avec les navigateurs actuels (Opera, Firefox, Safari,...).
Pour des raisons de style, je ne vais pas faire des boutons radio quand cela ne m'est pas demandé, et surtout, quand cela impose un clic supplémentaire. Qui plus est, dans ton commentaire plus haut, tu proposes d'utiliser un
:before
qui n'est pas compris par MSIE6. Si encore j'avais le moyen en css de faire une substitution par background d'un élément<input />
en n'affichant pas sa value (et si possible sans hack css disgracieux genre “-9999px”), je serais heureux... sauf que le rendu sur les Mac serait complètement foireux, puisque sur cette plateforme, un<input />
est rendu comme un élément Aqua, à la différence d'un<button></>
.Donc j'en suis venu à la conclusion que pour un formulaire avec un seul élément de validation, un seul
<button></>
fonctionne (avec mon code php plus haut) et est l'idéal quand le texte affiché n'est pas forcément celui du value.Pour tous les autres éléments publics, on retombe dans
<input />
.Désormais, je n'utiliserais le
<button></>
que quand je fais/ferais une interface complexe (au moins deux<button></>
validant avecvalue
) pour moi, pour un/e ami/e qui va s'en servir en direct et qui utilise déjà intensément un vrai navigateur (certains ne veulent pas ou ne peuvent pas et c'est exclu pour mes clients, mais d'autres en ont fait la demande, j'ai même une proposition pour une interface en xul).C'est uniquement si son utilisateur utilise quotidiennement autre chose que MSIE.
Il faut continuer de faire du bruit autour, pour démontrer que l'époque des comportement propriétaires et incomplets des normes (HTTP, Javascript, PNG, SVG) et recommandations (XHTML, CSS, APNG) est révolue. Si on veut que MSIE aille dans la bonne voie, il faut secouer violemment Microsoft pour qu'ils corrigent leur navigateur s'ils veulent vraiment paraître modernes et performants, au lieu d'être exclus du web.
La TeamIE est sûrement de bonne volonté et a besoin d'être encouragée
Au fouet.
13 De Da Scritch - 09/01/2008, 09:03
J'avais écrit à Nick Cowie sur les difficultés que j'ai rencontré, sa réponse est encore plus édifiante :
«
I found out about MSIE bad behaviour with buttons at the end of researching that presentation, so I never added it to the presentation. But it does make a very difficult case to use the button element in any project and you work just reinforced that for me.
However, what really put me off ever using the button element, was mobile web browsers. The XHTML-MP 1.0 specifications do not include the button element. It includes all other form elements and marquee and blink tags, but not the button element. So mobile browsers which conform to the XHTML-MP 1.0 specs like Internet Explorer for Windows Mobile 5, just ignore the button element and make the form useless.
»
14 De Hadrien.eu - 09/01/2008, 09:08
Chez Microsoft, il préfèrent faire des vidéos pas drôles de leurs chefs…
15 De Da Scritch - 10/01/2008, 09:02
@Hadrien : méchant, c'est la seule chose qu'ils savent faire sans bugs.
Nick Cowie vient de me donner plus d'éléments historiques :
«
The problem with MS is they don't want to break anything that worked before - backward compatibility. When MS released IE4 they badly implemented the button element. So to make sure any web page that used the button element that worked in IE4 kept working in IE5, IE5.5 IE6 & IE7 they retained the bad implementation.
It did not help that Netscape 4 did not implement the button element at all, even though it was in the HTML4 specs. So with no competition MS just kept making the browsers backward compatible, so the button element never gained any traction.
With mobile browsers, the people writing the XHTML-MP 1.0 specs excluded the button element, probably because no one used (It is now in the proposed XHTML-MP 1.2 specs, but that is still some time away). So people building browsers to the XHTML-MP 1.0 standards rightly did not included the button element. So button does not function in IE for WM5, Blazer for Palm OS, I believe and some other other browsers.
Opera Mobile and Mini as well as Safari for iPhone and probably the S60 Nokia browser (seeing it is based on webkit) and some other mobile browsers follow HTML4.01 / XHTML1 standards and button does work.
»
16 De Da Scritch - 15/01/2008, 15:41
Une autre page de tests, plus explicites : http://krijnhoetmer.nl/stuff/html/b...
17 De Mitch 74 - 29/03/2008, 10:38
Ouééé! IE 8 va corriger <button> en mode Uber Super Top Mega Standard (qui ne réussit pas Acid2, mais c'est une autre affaire).
18 De Da Scritch - 22/04/2008, 22:50
1- Je demande à voir (tu as la source de l'info ?)
2- Faudrait déjà que les parts de marché d'IE7 rendent ceux d'IE6 négligeable pour qu'on aie une bonne estimation de quand IE8 va remplacer IE7...
Ou alors, faire le forcing auprès des utilisateurs.
19 De Mitch 74 - 04/05/2008, 10:14
Ah, la source de l'info est le blog de l'équipe IE, mais aussi (et surtout) que je l'ai testé dans IE8 beta 1 - et ça a l'air de marcher (en tout cas, dans ma VM).
Quant à dire quand il supplantera IE 7 (ou même 6, qui est toujours le navigateur par défaut d'XP, et la version maxi supportée par 2k), y'a pas moyen.
20 De da scritch net works - 10/06/2008, 12:19
Regardez : transparent... comme avant !
Afin d'être totalement transparent (et pas que dans les PNG), ce texte comporte du Microsoft-bashing rétrograde (concernant leurs produits avant 2006). Faut reconnaitre qu'ils ont fait des efforts, et qu'il est temps de moderniser les... visiteurs....
21 De Grobert - 05/12/2008, 12:47
Je viens d'être confronté au problème et un peu dans les même conditions (on croit que tout marche et puis... on teste avec IE ;-)
Il y a une autre solution qui convient à IE7 et aux vrais navigateurs. Elle est adaptée si
- la valeur associée au bouton est une chaîne ou un entier
- on traite le formulaire en PHP (peut-être adaptable à d'autres langages)
Cela consiste à «mettre la valeur dans le nom de la variable», via une table associative.
Au lieu de coder
name="lenom" value="qqchose"
on peut coder
name="lenom[qqchose]" value="qqchose ou peu importe quoi"
Au niveau du traitement PHP, cela devient
if (is_array($_GET['lenom']))
$valeur = key($_GET['lenom']);
On peut donc mettre plusieurs boutons submit avec des name="lenom[xxx]" divers. Si un seul est renvoyé comme cela devrait , cela fonctionne bien.
Dans le cas d'IE6 qui renvoie, parait-il, des value pour tous les boutons submit, mieux vaut revenir aux input !
22 De da scritch net works - 11/12/2008, 16:55
Microsoft Internet Explorer ou l'inflation dans la
Je ne sais pas comment ils font. Malgré tous leurs efforts pour rendre leur navigateur acceptable, ils arrivent à faire en sorte de devoir reprendre tous les anciens sites pour qu'ils fonctionnent comme avant....
23 De da scritch net works - 21/03/2010, 23:41
Propriétés en tests et préfixes de vendeurs
De leur histoire, leurs usages, leurs inconvénients et de ma petite contribution à solutionner le problème....