Encore raté, Microsoft : ce soir j’ai installé la version 10 de ton navigateur sur ma partition Windows 7.

Une fois le redémarrage terminé, c’est avec allégresse que je clique que le gros E bleu, et que j’affiche mon site. Epicwin me dis-je : cela semble s’afficher correctement.
Il y a les dégradés et les ombres sous le texte et même les flammes sur le titre (reléguant à Chrome (et Safari) le statut de seul navigateur qui ne l’affiche pas, mais ça va viendre).

C’est alors, toujours dans un état d’euphorie, que j’ai le malheur de cliquer sur le lien vers mes outils en ligne

ET LÀ, C’EST LE DRAME !

(EDIT : j’ai corrigé le bug hier soir pour IE. Un simple Border:none; en CSS, mais ça ne devrait pas être nécessaire si IE était pas si con).

ie10-liens-images.png
IE 10 affiche toujours et encore des putain de bordure sur les liens-images.

C'est le seul à faire ça, depuis 10 ans.
C'est le seul a faire ça, seulement sur les liens images.
C'est le seul à faire ça, sans que ce soit demandé.
C'est le seul à faire ça.
Et que je te déteste, IE.

PS, voilà comment ça s’affiche sous Firefox et sous Opera :
opera-mes-outils-en-ligne-capture.png
(Je remarque du même temps que Chrome Néo-ie6 affiche lui aussi tout de travers… Lui aussi je commence à en avoir de plus en plus marre qu’il fasse n’importe quoi, parce que ce n’est pas la première fois >_<).

51 commentaires

gravatar
Med a dit :

On t'avais prévenu que c'était une merde pourtant ^^
PS : Le captcha déconne des fois, même si je met la bonne somme ça me met "La somme est incorrecte (utiliser des chiffres)"
PS : Rhooo !!
PS : M*r*e !

gravatar
Kevin a dit :

Tu l'as installé manuellement ou il t'a proposé la mise à jour ? Chez moi je n'ai toujours rien et j'ai bien envie de tester :P

gravatar
qwerty a dit :

Vive Firefox et Opéra. Bizarre, c'est ceux aussi qui respecte les utilisateurs...

gravatar
rwanito a dit :

Aucuns problèmes avec ie sous windows 8. Pas de bordures ni de dégradés...Meme chose sur la version metro.

gravatar
iTux a dit :

@Nerdebeu : Afficher la page correctement c'est ne pas être compatible ? Sont rigolos chez Microsoft ...

@Timo : c'est pas franchement une limitation de Chrome et Safari pour les flames, ça vient du moteur WebKit (qui équipe aussi quelques projets libres).

gravatar
iTux a dit :

@Nerdebeu : Afficher la page correctement c'est ne pas être compatible ? Sont rigolos chez Microsoft ...

@Timo : c'est pas franchement une limitation de Chrome et Safari pour les flames, ça vient du moteur WebKit (qui équipe aussi quelques projets libres).

gravatar
Draeli a dit :

Je peux t'assurer que pour le coup tu râles pour rien, tu prends n'importe quel reset de base (une ancienne version que j'avais faite ici notamment qui est très courte et devrai te suffire http://www.yves-astier.com/2011/11/11/reset-css/ ou tu tapes "reset css" dans google tu n'as que l'embarras du choix).

Pour le mode de compatibilité, tu ajoutes :
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
(ici une explication détaillé : http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge )

Je peux te filer un coup de main si tu le souhaites, tu peux m'envoyer un mail dans ce cas ;)

gravatar
djibey a dit :

border="0" pour éviter ça non ?

gravatar
Bill2 a dit :

Si on regarde le CSS de ta page "outils", on a ça :

.bloc a img {
border: none;
display: block;
margin: 0 auto;
width: 48px;
height: 48px;
}

On a bien un border:none sur les images, et sous IE10, ça s'affiche bien correctement ...
Alors, c'est peut être pas le comportement par défaut, j'en sais rien, faudrait aller voir w3c ce qu'ils disent du comportement attendu pour les a img.
Parce que si ça se trouve, FF n'affiche pas de bordure alors qu'il en faudrait une.

Donc dans le pire des cas, c'est une ligne de CSS ... c'est pas la mort non plus ;)
Je vais regarder si je trouve des infos.

gravatar
Nerdebeu a dit :

@iTux: je suis bien d'accord, mais justement, certains sites étant développés pour d'anciennes versions de IE qui respectaient bien moins que les dernières, il était parfois nécessaire d'être en mode compatibilité pour pouvoir les afficher. Donc en effet, avoir l'affichage de compatibilité activé est négatif sur les sites qui respectent les règles, et même sur d'autres d'ailleurs. Si tu essaies d'afficher Gmail ou d'autres trucs Google en mode compatibilité, vont pas aimer. En mode normal aucun souci, comme le site de notre ami.

Il me semble, sans en être certain, qu'à l'installation sous 7 ou d'origine sous 8, IE 10 est en mode compatibilité, du moins certains paramètres de ce mode.

Donc à vrai dire, je ne saisis pas bien ta remarque, puisqu'au contraire il ne faut pas activer le mode de compatibilité avec les anciennes versions de IE, ce qui pourrait être la cause d'un mauvais affichage.

NB: je suis Operadôlatre, je n'aime guère IE, mais rendons lui ce qu'il est tout de même capable de faire...Parfois...

gravatar
Bill2 a dit :

IL est vrai que, par défaut, même en mode "normes", si on ne met pas un border:none; en CSS sur les a img, on a une bordure qui s'affiche sur les images.

Le tout étant de savoir si c'est la norme, ou si c'est les autres nav qui ont pris des libertés sur ce point précis.

gravatar
jefaispeuralafoule a dit :

Heuuu n'importe quoi. Je suis sous IE10 là, et cela fonctionne tout à fait comme l'image que tu souhaites obtenir... et ps zéro plug in ou quoi que ce soit de trituré.

gravatar
iTux a dit :

@Nerdebeu : donc, si je comprend bien, le mode compatibilité c'est pour respecter les non-standards ?

Pour ma part je soutiens Firefox, Opéra et tout autre navigateur libre mais j'utilise principalement Chrome parce qu'il embarque son propre moteur flash (qui ne s'installe pas sur le système et qui est a jour).

gravatar
Ton7on a dit :

Je suis actuellement sur firefox 3.6.17 (version uniquement autorisé par le taff') et j'ai la belle bordure aussi.

gravatar
Androc a dit :

@iTux : C'est "Mode de compatibilité ancienne versions de IE".
En gros, c'est un mode qui te permet d'afficher tes sites comme avant, que ça reste compatible avec ce que tu avais avec les anciennes versions d'IE.

gravatar
iTux a dit :

@Androc : au sens du W3C, ce serait donc le mode incompatibilité ^^

gravatar
Gilles a dit :

Je suis sans doute bigleux, mais je ne vois pas le souci de cette page avec Chrome.
Pas de lignes noires, tout est arrondi, etc.

gravatar
NorbsDeForbsAndWensminster a dit :

Bonjour, en qualité d'avocat au sein du cabinet de conseil & protection WeDontCareServices, je vous mets en demeure monsieur Volant, dit Le Hollandais, de modifier la forme carrée à coins arrondis employées sur votre page d'applications, car elle viole le brevet 321581351.635b2 accordé à la société Mapple Inc. de Steve&Steve, lui accordant un droit d'usage exclusif ad vitam aeternam sur les icônes de forme dite 'carrées à coins arrondis'.

Nous vous suggérons d'utiliser à la place une mise en forme qui pique les yeux (vous pouvez par exemple vous inspirer des illustrations employées sur cette page http://sebsauvage.net/comprendre/), afin de respecter les droits de notre client.

gravatar
Androc a dit :

Petite parenthèse.

@Timo : Ca a peut être été déjà discuté lors de ton rafraîchissement d'interface, mais je trouve très dommage que le lien pour aller aux commentaires soit juste au dessus des commentaires et pas au niveau du titre d'un article comme c'était le cas avant.

Etant donné que c'est sensé être un raccourci pour sauter vers les commentaires, il faut le placer dès le début pour pouvoir aller aux commentaires sans être obligé de défiler tout l'article pour y accéder.

gravatar
Le Hollandais Volant a dit :

@rwanito : normal j’ai corrigé maintenant.
J’ai spécifier un « border: none; » en CSS alors que normalement ce n’est pas nécessaire.

@Kevin : Dans Windows Update (WS7 SP1).

@Draeli : Justement, les Reset c’est le mal et ils ne devraient pas être utilisés si les navigateurs étaient tous bon. Et 90% d’un CSS-Reset c’est pour IE.

@Gilles : j’ai dû corriger aussi !

@Androc : la semaine dernière quelqu’un ma demandé l’inverse :-|.

gravatar
Julien et Nel a dit :

@Julien et Nel :

Il faut être admin pour le moment pour poster des liens , je ferais peut être un petit truc pour que sa soit accessible en public (tout le monde) ou privé (admin). Je ferais peut être aussi un truc pour changer le login et le mot de passe. Et peut être un petit script d'installation aussi ... Pour le moment pour tester, il faut ajouter ?admin à l'url , le login est "admin" et le mot de passe est "pass".

gravatar
Draeli a dit :

@Le Hollandais Volant : reset ca n'est pas le mal car à la base (je ne rentrerai pas dans le détail explicatif car beaucoup de choses seraient à dire) c'est la pour uniformiser des parties qui sont laissés à la libre appréciations du navigateur. Par exemple, les specs ne disent pas les margin/padding à appliquer par défaut donc libre au navigateur de faire sa vie et libre à l'utilisateur d'utiliser ce genre de chose pour uniformiser s'il le souhaite.

Dans le cas de l'image, ca n'a rien d'hallucinant d'avoir un border sur l'image par défaut pour deux raisons simple :
1 : si l'image n'est pas chargé il reste possible d'identifier une zone définissant une image
2 : en terme d'accessibilité visuel, il sera plus simple d'identifier une image
(je ne dis pas que c'est juste, je montre simplement des arguments plausibles au choix effectué par les gars de chez IE)
Ensuite un lien historiquement est souligné, donc rien d'aberrant à visualiser rapidement une zone dite cliquable en appliquant un style par défaut.

Je ne suis pas un fan à IE mais objectivement il faut prendre un peu de recul pour comprendre certains choix qui ont été fais.

gravatar
Le Hollandais Volant a dit :
1 : si l'image n'est pas chargé il reste possible d'identifier une zone définissant une image

Justement : Firefox et les autres ajoutent une bordure *seulement* quand l’image n’a pas été chargée.

2 : en terme d'accessibilité visuel, il sera plus simple d'identifier une image

Je ne vois pas l’intérêt. Ce qui intéresse c’est le contenu de l’image, pas le fait que ce soit une image. Il y a de plus en plus d’images sur Tumblr surtout mais aussi les autres réseaux sociaux, avec du texte dans les images…

Je comprend bien ce que tu veux dire, mais dans ce cas, si c’est si pratique, ça confirme que fait que les CSS Reset soient un mal : ça supprime tout ce pratique.

gravatar
Draeli a dit :

Perso je le vois comme un bien mais c'est comme chaque outil, tout dépend l'usage final que tu en as et autant je vois pourquoi tu penses que c'est un mal (et on peut tout à fais s'en passer), autant dans les faits, sur des projets qui se veulent un minimum maintenable, il sera plus souvent intéressant de prendre un reset pour partir sur une base saine. Et que je dis base saine, non pas que ton reset sera bien et/ou propre mais qu'il correspondra à ta vision et ton approche des Css. Par exemple, je considère que passer un élément qui possède un outline à 0 est une hérésie pour des questions d'accessibilité mais pour certains Reset, tu le trouveras car ca correspond à la vision de l'auteur. Au final tu peux voir le comportement des navigateurs par défaut comme un Reset et au final en posant ton propre Reset, tu viens simplement dire "Votre vision du Css ne me plaît pas, je préfère ca".
Remarques que dans l'approche, à aucun moment je ne dis que c'est bien ou mal et/ou même que c'est obligatoire cependant si des choses ne te plaisent pas, avoir recours au reset (quelque soit sa forme) est un moyen pour toi d'offusquer la vision des Css porté par la navigateur.

Donc au final quand tu dis "ça ne devrait pas être nécessaire si IE était pas si con", je te trouve relativement injuste.
Tu aurais dis ça à cause de la gestion des hasLayout (truc spécifique des vieux IE), ou sous IE6 le double margin (bogue), ou encore les filtres spécifiques à IE en css (http://msdn.microsoft.com/en-us/library/ms673539%28v=vs.85%29.aspx), ou encore ... bref une raison qui sort des clous soit car ce n'est pas lié aux spécifications, soit car c'est un bogue dans ce cas la je ne pourrai être que d'accord.

C'est pour ca que je t'invite à demander à des gens dont c'est le métier (je me propose également) et qui te feront ca avec grand plaisir, ce qui en plus te dégagera du temps pour te concentrer sur la construction d'outils ;)

ps : remarque en passant, un css externe serait une bonne idée pour profiter du cache navigateur et ne pas charger encore et encore du css qui ne change pas.
ps2 suggestion : tu peux pousser le vice à mettre tes icônes dans un seul sprite afin de limiter le nombre de hits vers ton serveur.

gravatar
Le Hollandais Volant a dit :

@Draeli : ça ne vaut pas juste pour IE : pour les formulaires par exemple, tous les navigateurs actuel encadrent les champs avec une bordure (jaune pour chrome, noir pour opera et une ombre pour firefox). C’est moche mais bon, je désactive rarement ça lors du focus sur le formulaire.

Les reset sont utiles pour les thèmes qui ont des positionnements précis (comme le thème précédent que j’avais), mais pas pour des thèmes simples. Mais je remarque que grâce à IE, se passer d’un reset et c’est la catastrophe (sujet de l’article…), et ça c’est bien dommage.

C'est pour ca que je t'invite à demander à des gens dont c'est le métier (je me propose également) et qui te feront ca avec grand plaisir, ce qui en plus te dégagera du temps pour te concentrer sur la construction d'outils ;)

Mais je connais bien la plupart des hacks pour IE et autres conneries. C’est bien pour ça que pour un récent site semi-pro que j’ai eu à faire pour quelqu’un, j’ai choisis de le faire en xHTML 1.1 au lieu de HTML5 : compatibilité IE 8 voire 7 oblige… (IE6 je m’y refuse, c’est mort). Mais ce n’est pas pour ça que ça me fait pas chier.

Pour les outils : oui, je sais : certains choses sont à refaire pour les outils. À vrai dire je ne pensais pas publier ça en ligne au départ, mais garder ça en local pour moi, c’est pour ça que j’avais fait ça à l’arrache.
Même chose pour les icônes dans le formulaire des commentaires : chaque icône est séparée^^".

gravatar
Draeli a dit :

"C’est bien pour ça que pour un récent site semi-pro que j’ai eu à faire pour quelqu’un, j’ai choisis de le faire en xHTML 1.1 au lieu de HTML5 : compatibilité IE 8 voire 7 oblige", la pour le coup j'ai du mal à voir la justification profonde car tu peux très bien utiliser html5 en restant compatible (alors oui pour les vieux IE on doit mettre html5shiv dans le cas des balises spécifiques mais bon d'expérience je n'ai pas encore eu de surprise). IE6 je peux te comprendre (pour ma part je ne le fais plus), surtout vu le pourcentage de trafic qui est encore concerné et au coût temps uniquement pour régler des merdes spécifiques.

Bon courage pour la suite de tes outils :)

gravatar
Androc a dit :

@Le Hollandais Volant : Arf :( Mais quelle est la justification de l'avoir juste à côté ?

A la rigueur tu peux mettre aux deux endroits :)

Je trouve ça juste peu logique d'avoir un accès rapide à quelque chose qui se trouve juste en dessous alors que parfois, on veut pouvoir sauter directement aux commentaires.

C'est un peu comme si il n'y avait pas de tables des matières.

gravatar
Anon a dit :

Moi j'utilise IE7 et le site est comme d'habitude, pas de problème particulier :)



A quand les commentaires dans la partie "Au fil du web" ? Je pense que tu rates pas mal de conversations intéressantes en balançant des infos tout seul comme ça.

gravatar
Anon a dit :

@Le Hollandais Volant :

Laisse tomber IE7.

Il y a un moyen en javascript de faire tourner html5 sur ie8/9, html5shyv.js je crois, léger temps de chargement en plus mais résultat très satisfaisants !

gravatar
Anon a dit :

@jeromebe :
Qui AVAIT raison :

"The <img> border attribute is not supported in HTML5. Use CSS instead.

The border attribute of <img> is deprecated in HTML 4.01."

Attention à w3schools : je vois souvent des critiques commes quoi leurs infos sont souvent un peu périmées / a coté de la plaque.

Je n'ai rien trouvé concernant les bordures d'images dans des liens sur le site officiel du w3c.
Mais ça me parait débile que le html impose du style a des éléments
Quoique c'est pareil pour les listes et leurs puces horribles par défaut...
Trop dur de désactiver ça et laisser le choix ?? x(

gravatar
Anon a dit :

@Julien et Nel :

"Je n'ai qu'une chose à dire, ie c'est de la merde et sa restera de la merde."

Franchement, je disais pareil mais la version 10 est en train de me faire changer d'avis.
Les ptits effets css3 a la mode sont super fluide, mes pages rendent comme je le veux...

Ils font des efforts quand même, j'ai été bien surpris :)

Sur certain points c'est même mieux que firefox et chrome, je pense a l'animation des éléments before et after (impossible sous chrome),
et firefox j'ai de temps en temps de gros lags sur les effets modernes... (peut être dus aux extensions?)


Pour moi le pire, c'est pas IE. C'est ce putain de SAFARI que je hais du plus profond de mon âme.

gravatar
jeromebe a dit :

@Anon:

Ce n'est pas parce que l'attribut border est remplacé par son équivalent CSS que le style appliqué par défaut à un <a><img/> <a> doit forcément changer.
Si la bordure était présente par défaut, c'était donc en l'absence du tag en question...

gravatar
Anon a dit :

@jeromebe :

C'est vrai, j'ai mal réfléchi.
Du coup, je me demande, pourquoi seul IE obéis ? Alors que les autres nav implémentent pourtant les autres styles bizarres par défaut ?
O_o

gravatar
Le Hollandais Volant a dit :

@jeromebe :
@Anon : objection.
Si je regarde la spec du W3C (et pas w3scoold qui ne source pas ses infos (mais n’en reste pas moins bien utile)), je vois ça :

border = pixels [CN]
Deprecated. This attribute specifies the width of an IMG or OBJECT border, in pixels. The default value for this attribute depends on the user agent.

(source)

Et :

Since the A element has content (text, images, etc.), user agents may render this content in such a way as to indicate the presence of a link (e.g., by underlining the content).

(source).

Ça dépend donc du navigateur. Autrement dit, en HTML4, IE fait le contraire de tous les autres.

En HTML5, l’attribut « border="" » est obsolète, tout comme tout ce qui est maintenant faisable en CSS à la place (font, width, height, blinck, etc.).
Je n’ai rien trouvé aux sujet des liens-images dans la doc du W3, mais encore une fois, IE fait le contaire de tout le monde.

Ça veut pas dire qu’il a raison, ça ne veut pas dire qu’il a tord, mais ça veut dire qu’il fait chier.

gravatar
jeromebe a dit :

@Le Hollandais Volant :

Effectivement.
Comme tu dis, ni raison ni tort.
Maintenant, il serait temps que les recommandations du W3C soient plus claires et ne laissent plus ce genre de libertés.

gravatar
Exagone313 a dit :

Sur mon Windows 7, Internet Explorer ne fonctionne même pas (il se ferme au bout d'un dixième de seconde, rien trouvé pour le réparer). Une fois, Firefox a eu un problème, et j'ai du le réparer tout seul, je vous dit pas la merde quand on a pas accès à internet pour nous aider.

PS : Je cherchez pas, mais quand je suis avec mon Windows 7, j'ai pas mon Linux.

gravatar
Le Croustillant a dit :

@NorbsDeForbsAndWensminster

On a atteint les sommets du rire. Enkulé de rire.

gravatar
Hegurka a dit :

Perso, j'utilise uniquement Chrome et Safari. Ils sont excellents (désolé). Mais attendons maintenant Blink, qui doit remplacer, enfin, webkit.

gravatar
course animaux a dit :

Moi rien qu'à l'idée d'utiliser IE ça me donne des boutons, et rien qu'à l'idée d'utiliser Chrome, je préfère avoir des boutons hahaha :D

gravatar
Amaury a dit :

@Anon :

À quand les commentaires dans la partie “Au fil du web” ? Je pense que tu rates pas mal de conversations intéressantes en balançant des infos tout seul comme ça.

+1. Il y a souvent des choses intéressantes qui ressortent des commentaires.
Mais peut-être que Timo ne veut pas être confronté à ce petit problème ?...

gravatar
Le Hollandais Volant a dit :

@Amaury : Si j’ouvrais les commentaires dans mes liens, autant les publier sur le blog, ça serait plus logique.

Je peux en revanche faire des « en vrac » reprenant une sélection des liens de la semaine ou du mois.

Depuis quelques temps également, je poste sur le blog quelques réflexions que je débutant dans mes liens.

gravatar
Gilles a dit :

En effet, les comm. et tout le tintouin, c'est du blogging je trouve :)
Les liens, c'est vraiment pour se faire des marque-pages en ligne.
Et les partager éventuellement.

gravatar
bohwaz a dit :

firefox avait le mm comportement jusqu'a recemment donc calmez vous un peu...

Les commentaires sont fermés pour cet article