Générez du RGBa compatible Internet Explorer avec GiveMeRGBA !
Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂
Vous utilisez CSS3, et avez largement adopté la rgba(), pour mettre en place des couleurs avec transparence. Seulement, voilà, lors des tests sous Google Chrome, tout passe bien, mais une fois sur Internet Explorer 7, ça ne marche pas !
Heureusement, des hacks existent pour permettre de gérer l’opacité d’une couleur sous Internet Explorer, pour un background. Des filters avec aRGB, demandant une certaine structure, un recalcul des valeurs, un niveau d’opacité en hexadécimal.
Lors d’une petite pause dans mon travail chez Colorz, j’ai monté GiveMeRGBA un outil rapide permettant, en fournissant uniquement la couleur en hexadécimal, et le pourcentage d’opacité, de générer tout le code nécessaire pour avoir un fond semi-transparent sur la plupart des navigateurs (dont Internet Explorer 7 et plus). C’est un script sans prétention, disponible sur Github et ouvert à tout commentaire.
Testez directement GiveMeRGBA
Sympa ton outil.
Un petit bémol : c’est dommage que les valeurs fournies en exemple ne soient pas « utilisées ». Au début, j’ai juste cliqué sur le submit (Give me RGBA), mais rien ne se passait… J’ai cru à un bug de l’outil 🙁
Ensuite, j’ai saisi des valeurs et là, ça fonctionnait 😉
@Chibani Pas faux, je vais améliorer ça 😉 Merci !
Fav direct, merci mec 😉
Pourquoi un combo -ms-filter/filter ?
-ms-filter est là pour une syntaxe CSS propre ( tu le sais probablement déjà, mais le lien pour les autres : http://msdn.microsoft.com/en-us/library/ms533754(v=vs.85).aspx )
Le code de sortie de givemergba est prévu pour être modifié et réadapté, donc je devrais probablement ajouter des commentaires dedans, ou proposer une option supplémentaire à la génération.
Dans tous les cas, « filter » sera bientôt presque inutile si Microsoft met en place sa migration automatique vers IE8/9
Au final, -ms-filter est deprecated http://blogs.msdn.com/b/ie/archive/2011/12/07/moving-to-standards-based-web-graphics-in-ie10.aspx donc n’utiliser que filter suffira.
Vous me sauvez la vie !!! 10 jours que j’essaie d’utiliser ca pour explorer en vain !! Je tombe sur votre article…Et miracle !!!!
Je vous envoie tous les remerciements du monde 😀
Bonjour,
L’outil est vraiment super ! Par contre, il ne semble utilisable que pour l’opacité des backgrounds, rien n’est possible pour celle des colors ?
J’ai essayé d’ajouter le filter Alpha, mais ça ne semble pas fonctionner… :/