...du verbe Drupaler (1er groupe)

CSS 3 dans Internet explorer avec css3pie et Drupal

29. février 2012 - 16:45 -- Jeremy

Dans cet article nous allons voir comment installer et utiliser le module css3pie dans Drupal 7. Le module css3pie convertit via une librairie javascript plusieurs propriétés css3 afin qu’internet explorer puisse les interpréter.

Nous allons aussi voir que le module, ainsi que la librairie css3pie, a ses limites en matière de propriétés css3 supportées mais aussi en terme de configurations.

Comment utiliser CSS3PIE dans Drupal 7 :

Première étape : 
Télécharger et installer le module css3pie et le module Libraries API

Jusque là, pas de grandes spécificités techniques ! Sachez néanmoins que le module css3pie dépend du module Libraries API. Il vous faudra aussi le télécharger et l’installer. Il n’y a pas de configuration particulière pour ce module.

Deuxième étape : 
Télécharger et installer la librairie css3pie

Sur le site de css3pie, téléchargez la dernière version de la librairie css3pie, décompressez la et placer la dans l’arborescence de votre site dans :

site/all/libraries/PIE

Notes : Le dossier ‘libraries’ n’existe pas par défaut dans l’arborescence Drupal, c’est donc à vous de le créer. A noté aussi que le dossier ‘PIE’ qui contient les fichiers de la librairies css3pie que vous venez de télécharger et décompresser est bien à écrire en majuscule!

 



Troisième étape :
Afin de configurer le module, rendez vous dans la zone de configuration en suivant ce chemin : admin/build/themes/css3pie

Dans la zone ‘CSS Selectors’, collez vos id et classes qui possèdent des propriétés css3. Ce peut être un chemin de classes qui se suivent, comme vous pouvez le voir sur l’image qui suit.

La case à cocher ‘use php wrapper’ utilise PIE.php pour générer le fichier PIE.htc car certains serveurs ne possèdent pas le bon type MIME pour les fichiers htc. Dans le cadre de cet article, le serveur étant chez OVH, j’ai eu besoin de l’activer.

Lorsque vous sauvegardez vos configurations, le module css3pie va générer un css avec vos classes dans le dossier : sites/default/files/css3pie


 


Le fichier CSS créé

Voilà pour la méthode Drupal. Cette configuration est parfaite pour les coins arrondis de vos blocs qui ont aussi une ombre portée et un super dégradé! Mais si jamais, comme il me l’est déjà arrivé, vous souhaitez aller plus loin et avoir dans votre magnifique bloc des inputs à bords arrondi, une ombre interne et un magnifique fond dégradé, la tâche va se compliquer sérieusement.

Vous pouvez d’ors et déjà oublier de configurer le module, il va falloir mettre les mains dans votre fichiers css et passer quelques minutes sur la documentation css3pie. Dans mon cas, les background de mes inputs avaient disparu complêtement. Après quelques recherches j’ai vue que dans les problèmes connues mon cas existait et je suis tombé aussi sur une conversation intéressante en anglais pour ceux qui aurait des problèmes avec le chemin ou avec leur fichier .htc. Pour en revenir à mes background, il y a une méthode qui fonctionne, à conditions d’avoir le temps de mettre la main à la pâte.

la documentation css3pie nous explique qu’il faut que :

- L’élément cible soit en position relative

- L’élément parent de la cible ai un z-index

Voici ce qu’on pourrait écrire dans notre fichier css si on ne passait pas par le module :


.elementParent {

z-index:10;

}

.elementParent .votreClasse {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

behavior: url(/sites/all/libraries/PIE/PIE.php);

position: relative;

}

 

3.75
Average: 3.8 (4 votes)
Votre vote: Aucun(e)

Ajouter un commentaire

Texte simple

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
CAPTCHA
Image CAPTCHA