[ASTUCE] Résoudre certaines incompatibilités avec IE

[ASTUCE] Résoudre certaines incompatibilités avec IE [Réglé]

Appliquer des propriétés CSS inexistantes dans IE Créations de Thèmes

aiglobulles Membre non connecté

Booster Missile

Le 24/02/2013 à 18h38

Bonjour les gens,

depuis ce matin, je me prends ah non, j'ai terminé, donc, depuis ce matin, je me prenais la tête pour modifier l'apparence du formulaire d'inscription à la newsletter tout en faisant en sorte que l'affichage soit similaire dans IE et dans les autres navigateurs.

Bien qu'il existe des hacks ou astuces, je ne trouvais pas mon compte. N'utilisant IE9 (et je n'ai aucunement envie de m'occuper des versions antérieures !!) que pour mes tests d'affichage, j'ai appris à mes dépends que certaines pratiques, comme par exemple l'utilisation du "!important" ne fonctionnent pas sous IE9.

En farfouillant, j'ai trouvé un tuto fort intéressant sur alsacréations et je vous livre ici la méthode qui (chez moi en tous cas) semble fonctionner.
Je vous présente si après la solution pour laquelle j'ai optée. Je ne dis pas que c'est LA solution. Mais pour le moment elle semble répondre à mes besoins et je pense qu'à présent elle me fera gagné bien du temps....

Alors voilà, il s'agit d'un petit javascript prévu pour permettre à IE d'interpréter correctement certains styles CSS comme par exemple:

border-radius
box-shadow
linear-gradient

la gestion de la transparence dans certains éléments comme par exemple:

Code CSS :

-pie-background: rgba(0, 0, 0, 0.2);

C'est bien utile pour éviter le recours systématiques aux images.

Intéressé ? Pour commencer rendez-vous à l'adresse suivante: http://css3pie.com/

1- Téléchargez le zip, puis placez le dossier qu'il contient à la racine de votre site phpboost. Pour plus de facilité je l'ai renommé PIE (Progressive Internet Explorer)

2- Créez un fichier ie.css ans le dossier "theme" du template utilisé sur votre site

3- Editez le fichier header.tpl de votre template et ajouter le petit hack ci-après à la suite de l'appel des divers TPL du template. Si l'utilisateur navigue sur IE, ce petit hack permettra de charger une CSS précise: ie.css

Code HTML :

 
<!-- IE -->
<!--[if IE]>
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/ie.css" type="text/css" media="screen, print, handheld" />
<![endif]-->

4- Dans ie.css, vous allez pouvoir intégrer les CSS qui posent des problèmes de compatibilité, et uniquement ceux-ci. Il est inutile de reprendre tous les CSS du site car, si vous prenez comme base le thème "base" de PHPBoost, l'ensemble des CSS utilisés fonctionnent tant sous IE que sous n'importe quel navigateur.
Cependant, pour que les différents styles aoutés à ie.css puissent fonctionner, il vous faudra, pour chaque style crée, ajouter la ligne suivante:

Code CSS :

behavior:url(http://localhost/monsite/PIE/PIE.htc);

L'url doit pointer de la racine de votre site vers le fichier PIE.htc.

Pour mieux comprendre, voici ci-après, un exemple de la manière dont doivent être rédigés les styles dans ie.css:

Code CSS :

 
.piestyle {
position: relative
width: 100px
height: 100px
border-radius: 15px;
box shadow: 3px 3px 10px #ccc;
behavior:url(http://localhost/monsite/PIE/PIE.htc);

Encore une fois, l'attribut "behavior..." doit être implémenter dans chacun des styles CSS que vous allez créer.

Voilà, j'espère que cela pourra être utiles à certains d'entre vous... bonne fin de journée

Bruno

Édité par Mipel Le 09/11/2017 à 21h59

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie