Bloc-note d'un développeur web
Dans : Développement Web
14 fév 2010CSS3 introduit le support des couleurs en mode RGBA. Ce dernier permet de définir une valeur d’alpha à une couleur RGB. Voici comment détecter via JavaScript si un navigteur supporte la fonctionnalité1.
Le principe est simple :
script2 du document.rgba(0, 0, 0, 0.5). Si le navigateur ne supporte pas le mode de couleur RGBA, l’action n’aura aucun effet.L’implémentation DOM de l’algorithme n’a rien de complexe. Cependant, pour éviter de réitérer les manipulations DOM en cas de tests multiples, on assigne à la fonction une propriété result à l’aide de arguments.callee.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /** * Check whether the browser supports RGBA color mode. * * @author Mehdi Kabab <http://pioupioum.fr> * @type Boolean * @return True if the browser support RGBA. False otherwise. */ function isRGBACapable() { if (!('result' in arguments.callee)) { var dScript = document.getElementsByTagName('script')[0], color = dScript.style.color; if (/^rgba/.test(color)) { arguments.callee.result = true; } else { try { dScript.style.color = 'rgba(0, 0, 0, 0.5)'; } catch (e) {}; arguments.callee.result = (dScript.style.color != color); dScript.style.color = color; } } return arguments.callee.result; }; |
Avec jQuery, il peut être utile d’initialiser une proprité jQuery.support.rgba pour éviter de lancer le test à de multiples reprises.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | if (!('rgba' in jQuery.support)) { jQuery.extend(jQuery.support, { 'rgba': isRGBACapable() }); } /** * Check whether the browser supports RGBA color mode. * * @author Mehdi Kabab <http://pioupioum.fr> * @type Boolean * @return True if the browser support RGBA. False otherwise. */ function isRGBACapable() { var $script = jQuery('script:first'), color = $script.css('color'), result = false; if (/^rgba/.test(color)) { result = true; } else { try { result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') ); $script.css('color', color); } catch (e) {}; } return result; }; |
toute autre propriété CSS3 peut être testée sur le même modèle, comme HSLA ou encore box-shadow. ↩
nous utilisons JavaScript, il est naturel de trouver au moins un élément script. ↩
Bookmarks Gazouillements Dans mes oreilles
Super ! Par contre
arguments.calleea été déprécié en JavaScript 1.4 donc faudra juste y penser pour plus tard.PS : par contre quand je vois l’adaptation pour jQuery, t’es sûr qu’il faut mettre
isRGBACapable()? Ça ne serait pas plutôtisRGBACapable? Cf. ligne 3.En ce qui concerne
arguments.callee, c’estargumentsqui est déprécié en JavaScript 1.4 en tant que membre de Function. Il reste valide en tant que propriété de la fonction locale. Mais j’interprète peut-être mal la doc.Il faut bien utiliser
isRGBACapable()pour n’effectuer qu’un seul appel à la fonction. AvecisRGBACapable, la fonction sera exécutée à chaque accès à la propriétéjQuery.support.rgba.Awesome ! Merci :]
Hello, nice, mais ça suffit pas http://www.modernizr.com/ ?
Je ne connaissais pas, merci de me le faire découvrir.
Il fonctionne sur le même principe, étendu à plus de propriétés CSS3, aux propriétés spécifiques des navigateurs et à quelques nouveautés introduites par HTML5. Cependant, il est un peu trop intrusif à mon sens, puisqu’il ajoute actuellement 24 classes CSS à l’élément
. En effet, j’ai eu besoin de mon test du support de RGBA dans le cadre de l’ajout du support de ce dernier dans jQuery Color, donc exit l’ajout de classes CSS.