Commentaires sur : [résolu] Les folles journées de l’intégrateur HTML et ses petits tracas… (XHTML & CSS)

Par : Hermann

Hermann — Thu, 17 Jul 2008 15:44:35 +0000

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/

Par : Pierre

Pierre — Thu, 20 Sep 2007 11:05:45 +0000

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 :
www.robertnyman.com/2007/...

Par : bruno bichet (aka br1o)

bruno bichet (aka br1o) — Tue, 18 Sep 2007 19:56:23 +0000

#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" !
}

Par : Marie-Pier

Marie-Pier — Tue, 18 Sep 2007 19:27:41 +0000

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!

Par : emiliodobrasil

emiliodobrasil — Tue, 18 Sep 2007 15:34:13 +0000

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

Par : emiliodobrasil

emiliodobrasil — Tue, 18 Sep 2007 15:32:13 +0000

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

Par : bruno bichet (aka br1o)

bruno bichet (aka br1o) — Tue, 18 Sep 2007 08:03:17 +0000

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 …;)

Par : Neovov

Neovov — Tue, 18 Sep 2007 01:53:12 +0000

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)

Par : bruno bichet (aka br1o)

bruno bichet (aka br1o) — Mon, 17 Sep 2007 10:04:50 +0000

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

Par : Steven

Steven — Mon, 17 Sep 2007 09:28:20 +0000

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.