Transparence sous IE6

Hier au boulot, (en stage) j’ai eu une petite découpe à faire. Et bien sûr IE6 est venu y mettre son grain de sel. Vivement qu’il meurt lui d’ailleurs ^^.

Certains développeurs on d’ailleurs arrêté d’assurer la compatibilité pour cette version d’internet explorer. Autant je suis d’accord avec eux pour les projets personnelles,  mais bon dans le cadre d’une entreprise… le client est roi parait-il :).

Bref, je pense que vous avez été confronté au moins une fois à ce problème voici comme j’ai résolu le mien.

Tout d’abord dans la page html, pour la sélection du css :

    <style type="text/css">
    <!--
    @import url("style/style.css");
    -->
    </style>

    <!--[if lte IE 6]>
    <style type="text/css">
    <!--
    @import url("style/ie6.style.css");
    -->
    </style>
    <![endif]-->

Le premier <style type=”text/css”> correspond à la feuille de style pour tout les naviguateurs et la seconde est spéciale pour IE6 (comme son nom l’indique).

Ensuite dans : ie6.style.css, là où je veux gérer la transparence voici ce que j’ai mis :

.div_png {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ADRESSE_DE_L_IMAGE.png', sizingMethod='scale');
}

L’adresse de l’image doit être sans les ../ même si c’est dans un autre répertoire.

Pour l’attribut sizingMethod voici ce qu’il peut recevoir :

• image —Valeur par défaut, adapte le bloc à l’image,
• scale — Adapte l’image au bloc,
• crop — Coupe l’image pour qu’elle tienne dans le bloc.

J’espère que cela a pu vous aider.

Ah oui, un dernier point. Je conseille d’utiliser les @import plutôt que les  <link href=“” rel=“stylesheet” type=“text/css” />. Pourquoi ?

Je dois dire que j’utilisais link jusqu’à pas longtemps. Mais Methylbro m’a donné une bonne raison qui est d’ailleurs très bien expliquée chez Alsacreations. Les vieux navigateurs, tel que Netscape 4, n’interpréteront pas le @import. Il vaut mieux ne rien interpréter que mal l’interpréter. Les personnes utilisant cela navigueront donc sans feuille de style mais pourront tout de même avoir une navigation plus ou moins agréable (à vous de faire un code html comme il faut).

See you later