[résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

[résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…

Le quotidien de l’intégrateur HTML est parfois assombri par la survenance de bugs plus ou moins gênants. Ces derniers jours, je me suis débattu avec un décalage de couleur entre une image au format png et un fond spécifié en hexadécimal. Et comme si ça ne suffisait pas, Internet Explorer et Firefox n’ont pas aimés que je débute l’intitulé d’un identifiant avec un underscore ! Pfff… Pour finir si l’utilisation de overflow: hidden pour clearer les float est une bonne idée, cette propriété peut avoir des effets de bord indésirables. Enfin, voyons ça de plus près :

Le png c’est bien, mais le gif c’est mieux !

J’ai tenté en vain de raccorder le fond d’une image avec la couleur équivalente en hexadécimal à cause d’une légère différence de teinte qui n’avait pas lieu d’être : les valeurs entre la couleur sélectionnée avec la pipette de Photoshop et celle que j’indiquais dans ma feuille de style étaient identiques.

Puis j’ai eu l’idée de modifier le format du fond en passant du png au gif. Et là, bingo, mes deux couleurs se sont raccordées sans solution de continuité. Je précise que ce léger problème n’apparaissait que sur IE6, Firefox et Opera me restituant les bonnes teintes.

Toutefois si vous désirez absolument conserver le format png vous pouvez lire ce fil du forum Alsacréations qui décrit le même phénomène avec une solution logicielle : tweakpng pour enlever les informations liées au réglage du Gamma.

Ca me rappelle que le même phénomène se produit lorsqu’on veut raccorder certaines couleurs présentes dans une animation Flash avec une couleur en hexa dans le code HTML. Je me demande si le fait que Flash utilise le format png n’en serait pas la raison. Si des adeptes de Flash passent par ici j’aimerais bien savoir comment ils gèrent ce problème.

Ne débutez pas un id avec un underscore, car IE6 et Firefox n’aiment pas ça

C’est typiquement le genre de truc qu’il vaut mieux vérifier avant d’appeler SOS médecin : j’en ai fait l’amère expérience il y a peu. C’est assez curieux car les spécifications autorisent bien l’usage du souligné et du tiret pour les identificateurs et les classes…

En CSS2, les identificateurs (ainsi que les noms des éléments et ceux des classes et IDs des sélecteurs) ne peuvent contenir que des caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre.

Donc, si j’ai bien lu : le tiret (-) est autorisé sauf au début, tandis que le souligné (_) est valide partout. Peut-être un excès de zèle de la part des navigateurs ?

overflow: hidden : cachez ce menu que je ne saurais voir

Lorsqu’on utilise la propriété float pour placer du contenu à gauche ou à droite d’un élément, il est souvent nécessaire de rétablir le flux, pour celà, on peut utiliser clear: left|right|both pour éviter que le bloc en question ait des voisins à gauche, à droite ou des deux côtés. Ce clear peut également être utilisé sur un élément HTML comme hr, br ou div.

Suite à mon billet sur la question du rétablissement du flux après un float, j’ai eu l’occasion de redécouvrir la propriété overflow: hidden|visibble|auto qui, en plus de gérer le débordement du contenu d’un élément, permet de créer un contexte de formatage qui a les mêmes conséquences que clear: both pour rétablir le flux.

Aussitôt lu, aussitôt testé avec succès, je commençais à me servir d’overflow: hidden quand je me suis rendu compte que la conséquence évoquée plus haut n’annulait pas sa fonction première : rendre visible ou pas le débordement d’un élément contenu dans un bloc auquel on applique overflow: hidden.

En effet, si l’on a un menu déroulant en position: absolute dans un bloc dont un ancêtre possède overflow: hidden et si la hauteur de cette ancêtre est inférieure à la hauteur du menu déroulant en question, ce dernier est coupé dans les limites de l’ancêtre… Voir à se sujet le billet de Rémi Prévost et les commentaires associés.

Hum… j’espère que c’est plus simple à comprendre qu’à expliquer ;)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



14 commentaires pour “[résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…”

  1. Kynerion dit :

    Moi j’ai compris! :D

    Pour le PNG j’arrive à me débrouiller avec un hack javascript qui s’appelle pngfixall.js, et qui gère la transparence aussi bien dans une balise <img> que dans le background d’une classe ou d’un id. Seule restriction : qu’il n’y ait pas de ‘repeat’ de cette image, mais généralement ce n’est pas le cas. L’autre point embêtant est que s’il y a un lien sur une image en PNG avec de la transparence, le curseur de la souris ne s’active pas (en pointeur) quand on passe sur les zones transparentes de l’image (sur IE6 et 7); il faut donc généralement rajouter un <span> vide dans le lien, aux dimensions de l’image, avec un display:block; C’est moche pour l’accessibilité (le <span> vide plutôt qu’en display:none;) mais il faut savoir faire des concessions.

    Et sinon, il n’y a rien de mieux que le clear:both. ;)

  2. Rémi dit :

    M’en parle pas, j’ai passé ma soirée de vendredi, au bureau, à bloquer sur un probleme d’IE qui n’affichait pas une maudite image de background, après des heures de bricolage, j’ai vaincu ^^

  3. giz404 dit :

    J’ai déjà rencontré les problèmes que tu abordes. Pas toujours évident de s’en sortir sans perdre trop de temps… Dans le même genre, quand surgit une étrangeté au niveau du layout, penser à jeter un coup d’oeil sur ce site : http://www.positioniseverything….

  4. Simay dit :

    ahhh IE et ses petits désagréments. J’ai testé la modification d’une classe à la volé en JS pour IE (car IE6 ne comprend pas le :hover autre part que sur les liens), et la drôle de surprise, j’ai du modifier mon style car j’ai l’impression qu’IE6 en reconstruit pas tout l’arbre DOM quand on lui change une classe. Je m’explique : ma classe CSS passe de ‘deplie’ à ‘replie’ et inversement, et avec IE6, cela ne fonctionne pas que lorsque mon style CSS n’a aucun contexte, je ne peut pas dur à mon style .replie qu’il se trouve dans un #container #left #menu par exemple…

    Bizarre bizarre…

  5. Steven dit :

    Bonjour,

    Il me semble que le problème de décalage de couleur vient en fait de Photoshop. Travail tu sous Photoshop ?

    Personnellement j’utilise beaucoup le png mais je ne le fais pas à partir de Photoshop. Je crée un gif avec Photoshop et gràce à un petit logiciel (PngOptimizer) je transforme mon gif en png. Comme cela il n’y a aucun souci avec la couleur mais c’est certes plus long à faire.

  6. Simay > Je n’ai pas saisi la fin de ton commentaire ;) Utilises-tu un js maison ou bien un framework ? Sinon, la notion de "contexte" que tu évoques me fais penser à la propagation des événements en javascript (enfin j’dis ça, mais je suis loin d’être un pro du javascript) Sinon, essaie jQuery pour voir si le problème ne vient pas plutôt du script.

    Steven > oui, j’utilise photoshop, mais comme seul IE semble avoir un souci, je me dis que c’est lui le fautif, mais il y a peut-être à chercher du côté de certaines informations encapsulées dans le png par photoshop…

    giz404 > Merci pour le lien, je le ressortirai de mon blogmark ;) En fait, c’est marrant, parce qu’à force, les bugs des uns et des autres sont connus, les solutions existent mais c’est la galère pour les reconnaitre in vivo.

    Rémy > c’était quoi le souci avec l’image en background ?

    Kynerion > Merci beaucoup pour les liens et les conseils ;) En ce qui concerne le clear: both, je n’en ai pas fini avec : j’écrirai un billet complémentaire sur les différents contextes d’utilisation de clear: both et d’overflow: hidden parce qu’il y a des tonnes de choses à dire, mais avant faut mettre une batterie de test en place… et tout et tout ;)

  7. Neovov dit :

    On s’ennuirai s’il n’y avait pas IE :P !

    Pour le PNG après avoir sauvegardé avec ImageReady (enregistrer pour le web dans Photoshop) je passe un petit coup de PNGOptimizer dessus. Ca réduit la taille et corrige ce fameux problème de rendu des couleurs sous IE.

    Pour la transparence il n’y a besoin de JavaScript que s’il s’agit d’une image avec une balise <img>. Pour un background CSS : Il faut définir le background-image à ‘none’, et définir une règle pour charger un filtre DirectX (vive microsoft).

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’css/images/image-avec-du-transparent.png’);

    (A noter que l’url de l’image est relative à la page HTML, et non au fichier CSS comme pour les backgrounds)

    Il y a un autre paramètre qui est le sizingMethod qui permet de définir comment l’image doit s’appliquer, mais c’est très problématique lorsqu’il y a un repeat.

    La doc se trouve ici : msdn2.microsoft.com/en-us…

    Pour corriger les problèmes sur les liens il faut les placer en position: relative.

    Pour les <img> il faut un script qui remplace ces balises par autre chose : une balise span auquel on attribut un backgroundImage à none, un width (peu importe la valeur), un display à inline-block et le filter comme pour les background CSS. C’est le minimum pour obtenir un image avec de la transparence.

    Voila, j’espère aider quelqu’un :) . (Au moins je suis roder là dessus moi)

  8. Neovov > "Au moins je suis rodé là dessus moi" Tu as bien de la chance ;) Merci pour ces précisions : ça va me faire plein de choses à tester. Jusqu’à présent j’ai résisté à la tentation d’utiliser les progid et cie en évitant le png 24 transparent (ce qui est dommage) mais bon, puisqu’il parait qu’IE7 a fait des efforts sur le sujet …;)

  9. premier commentaire sur ce "blog" que je lis depuis un bon moment avec énorme plaisir :D

    juste pour dire que j’ai le problème inverse relativement aux couleurs des png. c’est à dire que les couleurs de mes png sont parfaites (sous ie6, ie7, opera et ff2), par contre les Jpg et gif sont catastrophiques.

    par contre je bosses sous linux donc Inkscape our le vectoriel et Gimp pour le raster (gimp qui d’ailleurs est une calamité pour les exportations de fichiers).

    donc je penses aussi que le problème est de la gestion des png par Photoshop.

    encore une fois bravo pour le site

  10. ps: je rêve du jour oú tous les navigateurs seront capables de lire le SVG…

  11. Marie-Pier dit :

    Par rapport au fait que Firefox et IE non pas aimé ton underscore. J’utilise un hack dans mes CSS qui utilise justement l’underscore.

    Ici un exemple pour spécifier des marges différentes selon la version d’ie: #style { margin:0; /* Firefox/ #margin:20px; /ie/ _margin:10px; /ie6*/ }

    C’est peut-être pour ça que tu avais des problèmes avec ton underscore!

  12. emiliodobrasil {

    Je ne connais pas du tout la plate-forme linux. Apparemment ça viendrait non pas directement de Photoshop, mais des méta-informations qu’il garde dans le png, ce qui explique d’ailleurs une des raisons qui font que les optimiseur de png ont quelque chose à optimier ;) A prendre avec moult pincettes car je n’ai pas vraiment étudié la question… }

    #Marie-Pier { Dans mon cas, il ne s’agit pas de mettre un underscore devant le nom d’une propriété comme _margin (que seul ie comprend bien que celà soit valide au regard des spécifications) mais devant un identificateur, soit par exemple : div id="_header" ! }

  13. Pierre dit :

    Pour l’histoire du PNG, le problème vient effectivement de la correction "Gamma" mal gérée par certains navigateurs, que Tweakpng permet en effet de supprimer, ce que je fais systématiquement sur tous mes PNG-8.

    Il est à noter que depuis Photoshop CS3, il n’y a plus de correction Gamma dans les PNGs exportés.

    Pour plus d’informations sur le sujet : The Sad Story of PNG Gamma “Correction” hsivonen.iki.fi/png-gamma…

    CSS/PNG Gamma Consistency Test Results hsivonen.iki.fi/png-gamma…

    Pour l’overflow: hidden, je ne l’utilise que dans le cas où je ne peux faire autrement, c’est à dire lorsque je n’ai pas d’élément à disposition pour le clear, pour éviter de me créer de futurs problèmes à résoudre, et surtout parce qu’il est fait pour ça ;)

    Il existe cependant d’autres solutions qu’un overflow:hidden pour qu’un conteneur prenne en compte la taille d’un float : http://www.robertnyman.com/2007/...

  14. Hermann dit :

    Bonjour, je suis un des contributeur du topic alsa auquel tu fais référence. A ma connaissance le plus interessant pour l’optimisation PNG (avec suppression automatique du gamma) est ce script: http://www.css-ig.net/download/

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site