Comment obtenir IE pour soutenir CSS3

October 11

Cascading Style Sheets (CSS) contrôlent l'aspect et la convivialité des sites Web, et CSS3 est la plus récente spécification CSS. Alors que CSS3 ajoute des fonctionnalités telles que les gradients, les ombres portées et des coins arrondis, Internet Explorer (IE) versions 6 à 8 ne supportent pas du tout CSS3. Ajout d'un fichier poly-remplissage - un fichier HTC qui "remplit" le soutien IE est manquant - à votre site Web vous permettra d'utiliser certaines propriétés de base CSS3. Parmi les CSS3 quelques poly-remplissages qui existent, le meilleur à utiliser pour ajouter des effets visuels est CSS3 PIE (Progressive Internet Explorer).

Instructions

1 Allez à CSS3pie.com et télécharger CSS3 PIE, un script poly-remplissage qui ajoute le support de CSS3 limité pour votre site Web lorsque les visiteurs se chargent dans les versions d'Internet Explorer 6 à 8. Décompressez CSS3 PIE sur votre ordinateur et le télécharger sur votre serveur Web si votre site est déjà en ligne.

2 Ouvrez le fichier CSS associé à votre site Web. Sélecteurs en CSS comme «#mydiv» ou «tagname», ainsi que les paires propriété-valeur contenue entre leurs accolades, constituent des règles de style. Ajoutez ce code à chaque règle de style contenant les propriétés CSS3:

comportement: URL (path / to / PIE.htc);

Change "path / to / PIE.htc" pour correspondre à l'emplacement de votre fichier PIE.htc.

3 Repérez tout gradient linéaire dans le fichier CSS et écrire une nouvelle paire property-value:

-tarte-fond: linear-gradient (en haut, #ffffff, # 000000);

La paire ci-dessus ne remplace pas les autres dans votre code. Ceci est une paire supplémentaire qui ajoute le support pour PIE CSS3 seulement. Ne pas utiliser "-tarte-background-image." Modifiez les valeurs pour le gradient, comme la direction ou les couleurs, pour correspondre à la pente que vous voulez utiliser.

4 Modifiez RGBA (Rouge, Vert, Bleu et Alpha) code couleur dans le CSS3 en hexadécimal. Le poly-fill CSS3 PIE peut utiliser les valeurs de couleur dans RGBA, mais ne rend pas les couleurs avec toute transparence. Donner une valeur RGBA seul si cette couleur ne sera pas une mauvaise image lors du rendu opaque.

Conseils et avertissements

  • Vous pouvez obtenir de nombreux effets CSS3 en utilisant JavaScript solutions de repli. Ces solutions de repli souvent ajouter un effet à la fois, cependant.
  • Envisager de laisser votre site se dégrader gracieusement dans les navigateurs plus anciens. Cela signifie que bien que certains utilisateurs ne verront pas les coins ou les gradients arrondis, ils peuvent encore lire et utiliser le site.
  • CSS3 PIE fonctionne mieux avec, les sites Web HTML réguliers "statiques". Lorsqu'il est appliqué à des modèles ou des thèmes pour le contenu dynamique des systèmes de gestion (CMSs), le fichier poly-remplissage ne fonctionne pas toujours ou peut se comporter de façon étrange.
  • Cette technique ne sera pas ajouter le support de texte-ombrage pour votre site web. Vous devez vérifier que la couleur de votre texte ne pas interférer avec la lisibilité quand l'ombre est manquante.

          

Post a comment: