Compatibilité IE FF Opéra et CSS

[Invité Diana]

Salut,

 

Voila je bosse sur mon site html mais ya toujours des problèmes récurrents.

 

Je cherche la meilleurs méthode pour la compatibilité des navigateurs.

 

Mon site est basé sur le CSS2, j'ai mis dans la page Index un script de transparence qui marche à merveille.

 

FireFox ne l'interprete pas, mais Opéra lui l'interprete et fait disparaitre l'image.

 

Alors au lieu de faire appel au script IE dans la page HTML, je voudrais le creer le script IE transparence dans un fichiers js. De la a partir du CSS de IE, appeler le script. Mais je sais pas si c possible

 

Sinon ya la méthode une page html avec une redirection sur une des 3 pages de chaque navigateurs.

 

Alors si vous avez une astuce...

 

merci

[KewlCat]

Déjà, que ce soit bien clair : les styles concernant la transparence n'ont aucune existence dans la norme CSS2.

Chaque navigateur a sa propre interprétation et ses propres attributs (et éventuellement le support des attributs des autres navigateurs).

Pour IE il faut utiliser l'attribut de style "filter" et lui coller une valeur "alpha(opacity=80)".

Pour Mozilla il faut utiliser l'attribut de style "-moz-opacity" et lui coller une valeur numérique entre 0 et 1.

La seule présence de l'un de ces deux attributs dans ta feuille de style va faire hurler l'outil de validation CSS du W3C. La solution c'est effectivement de passer par du JavaScript qui va, après chargement de la page, vérifier le navigateur et valoriser l'attribut comme il faut (ou plus bourrinement, valoriser les deux attributs en espérant que l'un des deux sera interprété correctement) :

document.getElementById('trucTransparent').style.MozOpacity = 0.8;
document.getElementById('trucTransparent').style.filter = "alpha(opacity=80)";

[Invité Diana]

Salut,

 

oui mais bon, jai essayé bp de variantes pour définir la transparence dune image pr IE et le seul code que jai trouvé et qui fonctionne bien c celui ci :

 <!--[if IE]> <link rel="stylesheet" type="text/css" href="style-IE.css" media="screen" /> <![endif]-->
  <!-- Script transparence pour IE -->   
<script language="JavaScript">
 function IE_CorrectAlpha_PNG(){
for(i=0; i<document.images.length; i++){
  img	= document.images[i];
  imgExt  = img.src.substring(img.src.length-3, img.src.length);
  imgExt  = imgExt.toUpperCase();
  if (imgExt == "PNG"){
	imgID	= (img.id) ? "id='" + img.id + "' " : "";
	imgClass= (img.className) ? "class='" + img.className + "' " : "";
	imgTitle= (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
	imgStyle= "display:inline-block;" + img.style.cssText;
	if (img.align == "left") { imgStyle = "float:left;"  + imgStyle; } else if (img.align == "right"){ imgStyle = "float:right;" + imgStyle; }
	if (img.parentElement.href)   { imgStyle = "cursor:hand;" + imgStyle; }
	strNewHTML	= '<span '+imgID+imgClass+imgTitle+' style="width:'+img.width+'px; height:'+img.height+'px;'+imgStyle+';'+'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img.src+'\', sizingMethod=\'scale\');"></span>';
	img.outerHTML = strNewHTML;
	i = i-1;
  }
}
 }

 window.attachEvent("onload", IE_CorrectAlpha_PNG);
</script>

 

C une merveille ce script, donc d'apres ce que tu dit, je peux pas l'appeler depuis la css de IE. Alors comment je fais si je veux garder ce code et quil soit différencier des 3 navigateurs ? Car les différents parametre opacité comme cité plus haut ne fonctionne quasiment pas.

 

Donc moi je garde mon script que je met dans un js, ensuite comment dois-je faire pour que celui ci soit seulement interprété que par IE ?

c ça que je veut savoir.

[KewlCat]

comment dois-je faire pour que celui ci soit seulement interprété que par IE ?

T'inquiète. Tu utilises attachEvent() qui est une méthode que seul IE semble implémenter, puisque la norme DOM du W3C prévoit plutôt l'utilisation de addEventListener() ! (et je ne parle même pas de outerHTML...)

Troll mis à part, ton script est une belle usine à gaz qui ne fait qu'ajouter l'attribut filter aux images dont l'extension est PNG (et d'ailleurs, ça ne l'applique pas à l'image mais à un <span> qui vient se mettre autour). Ce "filter" utilse un composant ActiveX. Es-tu certaine que le filtre ajouté ne fait que de la transparence ? Parce que l'appel à la fonction utilise également "scale", alors je me demandais...

 

Bref.

Est-ce que la solution suivante fait quelque chose ?

var images = document.getElementsByTagName("img");
for (var i=0; i < images.length; i++) {
 images[i].style.MozOpacity = 0.8;
 images[i].style.filter = "alpha(opacity=80)";
}

Où peut-on voir le résultat que tu attends (ton site ? des captures d'écran ?)

[Florent]

c'est par la :

http://isis-site.ath.cx/

[KewlCat]

J'ai Mozilla.

J'ai tapé ceci dans la barre d'adresse juste après avoir chargé ton site :

java script: { var images = document.getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { void(images[i].style.MozOpacity = 0.8); void(images[i].style.filter = "alpha(opacity=80)"); }}

Et voici ce que j'ai obtenu :

Toutes les images sont transparentes à 80%. C'est ce genre de chose que tu veux ?

[Invité Diana]

ça c transparent ! Mais je ne touche pas au paramètre de transparence de FF et d'Opéra qui l'interprete très bien.

 

Ya que IE v6 avec qui ça ne passe pas sauf dans la future version 7 :

 

Ici c'est IE avec une trame grise qui devrait pas se voir.

 

Ici c FireFox ça passe, la transparence est bien effective. Et c'est ça que je veux sur toutes les pages.

 

Et Opéra ça passe aussi si le scriptIE est désactivé.

 

Ici le scriptIE est actif dans IE, il semble que lorsque le script est appliqué, il déplace légèrement l'image mais le résultat est satisfaisant.

Modifié le 23 juin 2006 par Diana

[KewlCat]

Le script "déplace légèrement l'image" parce qu'il ajoute un span autour...

*$@# de IE qui ne supporte pas réellement les images png !

 

Si tu veux quelque chose de plus propre, il doit suffire de reprendre mon script qui ajoute juste l'attribut "filter", en lui donnant la valeur "progid:DXImageTransform.Microsoft.AlphaImageLoader(src= etc.", et en testant le UserAgent pour s'assurer qu'on est bien en présence de IE. Ca évitera de mettre en péril ta mise en page...

Autrement, [je sais que ce n'est pas constructif mais bon] je conseillerais plutôt d'utiliser une gif parce qu'au moins là tu seras sûre que IE saura l'afficher correctement et que tu n'auras pas de script bancal pour compenser (et risquer de tout casser sur d'autres navigateurs qui se font passer pour IE) !

 

Quelle(s) bonne(s) raison(s) avais-tu de faire tes images en png plutôt qu'en gif ? (à part le fait que tu évites un procès contre Unisys)

[Invité Diana]

mdr

Ben en faite png=transparence gérer par la plupart des navigateurs. Mais c vrai quen y pensant, dailleurs Tanguy me lavait suggerer, le gif pour pallier à ce probleme.

 

Faudrait que je base ma structure sur du Jpeg et Gif ? pas Png ? Le pire c que jadore le png

 

Je pense que je vais retirer ce script, yen a tellement dautres à mettre Des jolies butterfly qui volent, faut que je me trouve ça

 

Par contre je met rien pas de script dans mon code html, c illisible après. Je prefere les mettre dans des fichiers.js mais c'est l'appel que je pige pas trop car ça fonctionne avec certain seulement:

 

"Nous somme le : <script language="JavaScript" src="/scripts/date.js"></script>"

 

ici ça l'appel est l'execute. Mais ya certains ou ça ne marche pas Je ne sais pas pourquoi.

 

Merci pr ton aide KewlCat

 

Bah! Je vais mettre les png en 8bits ça passe. C'est la couche 24bits qui n'est pas supportée par IE. C'est décevant davoir - de bits

Modifié le 23 juin 2006 par Diana

[tangui]

le gif est géré par tous les navigateurs, dont le plus utilisé: Internet Explorer...

Le Png non, donc pour avoir de la transparence, il faut que tu passes tes fichiers en .gif...

 

Et c'est tangui avec un i! vilaine va!