28172 sujets

CSS et mise en forme, CSS3

Bonjour / Bonsoir à toutes et tous,

j'exploite depuis le début avec des scripts conditionnels dédiés à Ie des filtres pour remédier aux défauts de ce "Navigateur" !
Pour exemple le fameux : filter:"alpha(opacity=X)"; qui est bien pris en charge selon les conditions. Et fonctionnel, puisque si je mets en valeur 0, la transparence est totale puisque l'opacité étant à 0 !

Mon souci est que c'est le seul Navigateur qui ne rend pas un effet de transparence réel identique aux autres, en ce sens que de 0 à 10, avec du blanc par exemple, c'est semblable aux autres, de même pour 90 à 99. Mais pour toutes les valeurs intermédiaires, pas de comparaison, Ie reste "foncé", très très peu transparent ! ! !

Qui saurait me dire pourquoi ce curieux phénomène ? Pour information, sont employés en parallèle les scripts PIE Version 2.0 quant aux arrondis et "shadows" ou dégradés de fonds.


A vous lire, cordialement, Yvanoph---
salut,
si tu parles de défaut, c'était quand même le seul navigateur qui proposait une opacité, des dégradés et des transformations quand les autres n'avait rien de cela.
Par contre cela devrait marcher normalement et prendre bien en compte toutes les valeurs.
Pour IE8 par contre c'est "-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=x)";" je ne sais pas si ça a un impacte quelconque mais bon.
Si non, un exemple concret serait le bienvenue.
De fait, les "filter" simples SANS passer par "progid", que je répugne à employer puisqu'il y a plus court et plus léger, fonctionnent très bien sauf dans les valeurs intermédiaires... Et c'est bien cela qui me surprend, d'où ma curiosité quant à comprendre pourquoi ?


Merci déjà pour votre réponse, Yvanoph---
Moi j'avais trouvé un truc trivial au temps ou je me souciais encore de la compatibilité avec IE8 :

J'avais créé un fichier composé d'image PNG de 1X1 pixel, avec un minimum de deux couleurs, noir et blanc, plus quelques autres en fonction de mes besoins. J'ai décliné toutes ces couleurs en transparence par créneau de 10%. Je les ai ensuite nommé sous leur nom hexadécimal avec la valeur de transparence.

Par exemple, pour un noir à 50% : 000000.0.50.png.

Il ne me restait plus ensuite qu'à les appeler dans la feuille de style avant les autres déclarations pour navigateur standard :
.test {
    background: url('../img/color/000000.0.50.png'); /* IE8 */
    background: rgba(0, 0 ,0 , .5); /* le reste du monde */
}

... ou mieux : dans une feuille de style séparée dédiée à IE comme cela se fait couramment.

Édit : Si la méthode vous plait, attention de bien smuchiter les images. Outre le fait de gagner jusqu'à plus de 50% du poids de l'image, insignifiant pour des images de cette taille, cela permet de les débarrasser de leur indications colorimétriques, problématiques sur certains navigateurs comme Safari par exemple.
Modifié par Olivier C (20 Oct 2013 - 09:38)