Comment détecter correctement le support du navigateur pour l'opacité?

J'ai un code javascript qui applique une transparence alpha. Avant cela, il tente de détecter quel type de transparence le navigateur prend en charge et stocke cela dans une variable pour une utilisation ultérieure. Voici ce que le code ressemble à:Comment détecter correctement le support du navigateur pour l'opacité?

// figure out the browser support for opacity 
if (typeof br.backImg.style.opacity != 'undefined') 
    opacityType = 'opacity'; 
else if (typeof br.backImg.filters == 'object') 
    opacityType = 'filter'; 
else 
    opacityType = 'none';

Pour Firefox et Safari, la première condition est vraie, pour IE7 la deuxième condition est vrai, mais pour IE6 il tombe à la dernière condition. Pourquoi IE6 n'aurait-il pas d'objet de filtre? Y a-t-il une meilleure façon de détecter cela?

Source

2008-12-22 Marplesoft

magique IE7 est filtre s et IE6 est filtre.

Le code ci-dessous les rendements:

'opacité' si style.opacity est supporté
'filtre' pour un filtrage MS (IE < 7)
'filtres' pour les filtres MS (IE7)
'none' pour tout le reste

var opacityType=(
    (typeof o.style.opacity !== 'undefined') ? 'opacity' : 
    /*@cc_on @if (@_jscript) 
    (typeof o.filters === 'object') ? 'filters' : 
    (typeof o.filter === 'string') ? 'filter' : 
    @end @*/ 
    'none' 
);

Le @cc_on, @if et sont utilisés dans un conditional comment qui ne supporte IE.

J'ai testé sur FF3, IE6, IE7, Opera9 et Chrome 1 mais pas sur IE4,5 ou 8.

Selon quirksmode MS a changé le CSS filtre--ms- filtrer donc je ne sais pas ce que vous obtenez avec résultat IE8.

Selon mozillaopacity a été pris en charge depuis le FF 0.9, Opera 9 et Safari 1.2 et filter depuis IE4. Je n'aime pas faire de reniflage de navigateur, mais parfois il est nécessaire et les commentaires conditionnels rendent tellement plus facile de gérer des choses spécifiques à IE.

Source

2008-12-23 10:43:54 some

Ceci est des années de retard, mais @some, je pense que vous vouliez mettre o.style.filters et o.style.filter dans votre exemple? – Ryley

@Ryley: Comme vous le dites qu'il était depuis longtemps, et je ne me souviens plus des détails.Je me souviens que j'ai fait le test et je copie et colle habituellement mon code de test à la réponse, donc je pense que je l'ai fait cette fois aussi. Je n'ai plus installé IE6 donc je ne peux pas le tester. Après une recherche rapide, je vois qu'au moins des «filtres» existent sur l'objet comme dans mon code. – some

@Ryley o.style.filter (s) n'existe pas mais o.filter (s) fait donc le code tel que posté est correct. –

Qu'est-ce que vous comprenez que les filtres est appelé opacité. Les vrais filtres sont une extension IE propriétaire qui permet l'opacité parmi beaucoup d'autres choses pour ce navigateur.

Essayez this article des techniques de transparence multi-navigateur.

Les équivalents JS sont exactement les mêmes que ceux décrits: style.opacity ou style.filter. problème plus probable est que votre DOCTYPE est transitoire et/ou l'élément que vous essayez de faire la transparence n'a pas le hasLayout

Source

2008-12-22 22:21:55 annakata

Merci - Je comprends ce que les filtres sont. Ce que j'essaie de comprendre, c'est comment détecter quel type d'opacité le navigateur prend en charge pour que je puisse faire la bonne chose en javascript. – Marplesoft

Comment détecter correctement le support du navigateur pour l'opacité?

Répondre

Questions connexes