Quelles sont les lunettes de prescription non http://belgiquepharmacie.be/ Unie de liberté de santé oxford

CSS3 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.

Comment détecter qu’un navigateur supporte RGBA ?

Le principe est simple :

  1. Atteindre le premier élément script2 du document.
  2. Mémoriser sa couleur de police (ou de fond).
  3. Tester si la couleur n’est pas déjà en RGBA.
  4. Oui ? Sauter à 7. Non ? Modifier la couleur de l’élément script en rgba(0, 0, 0, 0.5). Si le navigateur ne supporte pas le mode de couleur RGBA, l’action n’aura aucun effet.
  5. Tester la non correspondance de la couleur initiale et de la nouvelle.
  6. Réinitialiser la couleur de l’élément script.
  7. Retourner le résultat du test.

Tester le support de RGBA via le DOM

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;
};

Tester le support de RGBA via jQuery

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;
};

Notes

  1. toute autre propriété CSS3 peut être testée sur le même modèle, comme HSLA ou encore box-shadow

  2. nous utilisons JavaScript, il est naturel de trouver au moins un élément script

publicité (chargement)

5 réponses pour JavaScript : tester le support des couleurs RGBA

  1. Oncle Tom dit :

    Super ! Par contre arguments.callee a é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ôt isRGBACapable ? Cf. ligne 3.

  2. piouPiouM dit :

    En ce qui concerne arguments.callee, c’est arguments qui 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. Avec isRGBACapable, la fonction sera exécutée à chaque accès à la propriété jQuery.support.rgba.

  3. Palleas dit :

    Awesome ! Merci :]

  4. vincent voyer dit :

    Hello, nice, mais ça suffit pas http://www.modernizr.com/ ?

  5. piouPiouM dit :

    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.

Ajouter un commentaire


Syndication

Réseaux sociaux