CSS3 PIE nous réconcilie avec IE


Le CSS3 apporte quelques nouveaux traits de style incroyablement puissants à nos pages web : des bordures aux coins arrondis, des ombres portées, des dégradés…. mais reste toutefois encore incompatibles avec tous les navigateurs, notamment internet explorer. Par une installation simple et rapide la librairie CSS3 Pie vous promet d’en finir avec ces problèmes d’incompatibilité CSS3 liés à Internet Explorer version 6 à 8.

Comment installer CSS3 Pie ?

Commençons par télécharger CSS3 Pie sur le site de l’auteur (Jason Johnston)
Dézippez le fichier téléchargé, le fichier qui nous interesse est pie.htc.

Supposons que vous ayez déjà une page HTML et une feuille de style CSS prête.
Déclarez une nouvelle classe comme suit :

.rounded {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Ajoutez la ligne suivante :

behavior: url(path/to/PIE.htc);

N’oubliez pas de renseigner correctement le chemin vers votre fichier PIE.htc

Voila c’est tout, l’installation est terminé! Si tout s’est bien passé vous devriez voir sur votre navigateur Internet Explorer des coins arrondis sur vos éléments HTML qui portent
la classe CSS « rounded » (aussi bien que sur les autres navigateurs).

Démonstration en ligne

Un aperçu est disponible sur le site de l’auteur

Nicolas Verhoye

Développeur Magento, Freelance

  1. FredT dit :

    Bonjour, j’ai très apprécié votre blog. C’est une très bonne sélection d’astuces, en particulier comme ce hack CSS3 Pie. Merci pour ce partage.
    J’espère que vous allez continuer sur cette voie.
    La seule chose qu’il manque c’est une petite date, pour indiquer quand vous avez rédigé vos articles.
    a+ (FredT, un développeur amateur par loisir)

  2. Nicolas Verhoye dit :

    Bonjour, merci pour votre commentaire c’est très gentil. Je vais prendre en compte votre remarque. Bonne journée!

  3. caroline dit :

    Bonjour, pour ce qui est du CSS3 Pie, savez-vous si ca règle le problème complètement d’incompatibilité entre Shine Time et Int Explorer 6 à 8 ?? Ce que je veux dire, pas juste sur l’ordi ou on installe ce Pie… ca va régler la programmation de mon site internet au complet pour que peu importe qui le visualise, tout marchera ??

  4. caroline dit :

    En faite, mon problème exact est que le Shine Time ne fonctionne pas parfaitement, dans mon site, nous avons configurer une section spécifique avec ce Shine Time avant de faire tout le reste du site comme ca et certains éléments de la page ne sont pas visibles avec I E 8 et moins…. mais OK avec Firefox et autres… Vous avez des suggestions ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *