Le Hack CSS !important

[Monique]

Bonjour,

Un des intérêts du format png est la gestion très fine de la transparence.

Le problème c'est que IE gère très mal cette transparence, ce qui donne des images avec un fond gris qui gâche la présentation d'une page.

Shemu explique comment il utilise la règle !important pour résoudre ce problème dans ce billet Le Hack CSS !important.

Je profite de l'occasion pour recommander ce bog aux utilisateurs de Photoshop qui y trouveront quantités de tutoriels intéressants.

[Jok]

Oui c'est sur qu'il est bien dommage que le png (niveau transparence) ne soit pas gérer par IE ... p'tet dans une prochaine version.

En allant lire l'article, je pensais tomber sur une solution utilisant toujours le png mais en forçant a le faire reconnaitre par IE ... pas grave c'est une autre solution tout a fait bien aussi

[ElMoustiko]

Il n'y a pas que la transparence alpha des PNG qu'IE n'interprete pas... il n'en fait qu'à sa tête avec certaines couleurs. Couleur différente sous IE et firefox par exemple, avec le code hexadécimal correct pour firefox (qui l'eut cru).

[Monique]

J'ignorais cela pour les couleurs.

Les différences sont importantes ?

[Remi]

Couleur différente sous IE et firefox par exemple, avec le code hexadécimal correct pour firefox

Aurais-tu un exemple à nous donner ?

[ElMoustiko]

Faudrait que je refasse un exemple, mais c'est assez gavant quand on mixe couleur de fond et image de fond avec CSS, la couleur hexadécimale qui correspond pas à la couleur sur le PNG d'IE (mais qui correspond sur les bons navigateurs).

Je vous ferais un exemple demain !

[Remi]

Ah ok, si tu parles des couleurs des PNG, oui il y a une différence mais en fait c'est le même problème si je ne m'abuse.

Un utilitaire comme PngOptimizer permet de contourner le problème en virant l'entrée alpha-machin de l'en-tête, mais il y a toujours une différence de couleur sous Safari.

[ElMoustiko]

J'y comprend plus rien

je fais le test, un png-8 en 128, je l'optimise pas avec PNG optimizer, j'obtient bien une couleur différente sous IE (en haut à droite), je l'optimise et là j'ai plus la différence sur l'image d'origine mais je l'ai sur la première... je comprend plus ...

http://www.elmoustikoblog.net/bordel/bug_png/

En haut à droite, non optimisé, en bas à gauche, optimisé (PNG Optimizer 1.4)

[Remi]

Tu as du inverser les 2 fichiers...

Après vérif: C'est l'entrée gAMA (gestion du gamma) de l'en-tête qu'il faut enlever pour ne plus avoir de pb sous IE. On peut voir l'en-tête avec un outil comme Tweakpng.

http://www.webmaster-hub.com/index.php?showtopic=4392