Savoir si une propriété CSS existe dans un navigateur

**mioux** · 14/03/2008, 16h52

Salut

Je cherche un moyen de savoir (en java... ah non javascript

) si un navigateur gère ou pas une propriété CSS. Genre "table-cell" (par le plus grand des hasard, au pif sans réfléchir (non en fait, c'est exacement celle là que je voudrais tester

)) pour pouvoir affecter le display en conséquence.

Je voudrais ca parce que j'ai un code comme ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<table>
    <tr>
        <td id="td1">blablabla</td>
        <td id="td2" style="display: none">blobloblo</td>
    </tr>
</table>
<input type="button" id="btn_change" onclick="change(); return false;" />
<script language="javascript" type="text/javascript">
    function change()
    {
        var obj_td1 = getElementById('td1');
        var obj_td2 = getElementById('td2');
 
        if(obj_td1.style.display = 'none')
        {
            obj_td1.style.display = 'table-cell ou block';
            obj_td1.style.display = 'none';
        }
        else
        {
            obj_td1.style.display = 'none';
            obj_td1.style.display = 'table-cell ou block';
        }
    }
</script>

Le truc c'est que je voudrais éviter de faire une détection de navigateur (je trouve que c'est pas super, je préfère tester l'existance d'une fonction plutot que de tester savoir sur quel navigateur je suis, surtout avec la diversité des navigateurs à l'heure actuelle (et ce, bien que seulement 2 soient présent et 1 seul pour la boite pour laquelle je bosse, mais ca c'est une autre histoire, je préfère laisser un code propre si du jour au lendemain ils décident de passer sous Firefox ou autre))

Or, si je met 'table-cell', IE me dit gentillement que 'table-cell' n'est pas une propriété valide, et si je met 'block', l'affichage est dégueu dur Firefox...

Quelqu'un a une idée ?

EDIT : J'ai fais un truc de porc en attendant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
29
30
31
32
33
 
<script language="javascript" type="text/javascript">
    function change()
    {
        var obj_td1 = getElementById('td1');
        var obj_td2 = getElementById('td2');
 
        if(obj_td1.style.display = 'none')
        {
            try
            {
                obj_td1.style.display = 'table-cell';
            }
            catch(err)
            {
                obj_td1.style.display = 'block';
            }
            obj_td1.style.display = 'none';
        }
        else
        {
            obj_td1.style.display = 'none';
            try
            {
                obj_td2.style.display = 'table-cell';
            }
            catch(err)
            {
                obj_td2.style.display = 'block';
            }
        }
    }
</script>

**SpaceFrog** · 14/03/2008, 17h45

a mon avis il te faudrait faire un test dans une boucle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for (prop in obj.style)

pour verifier si la propriété est prise en compte par le navigateur

**SpaceFrog** · 14/03/2008, 18h42

Voici un code qui fonctionne parfaitement sous firefox ...
On rentre la proprété à tester dans l'input ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type='text/javascript'>
Object.prototype.HasCSSProp= function(prop){
var  flag = false;
for (CssProp in this.style) {
 if (prop == CssProp){flag=true;}
 }
return flag;
} 
</script> 
</head>
<body >
<div id='one' style="border:solid 1 pd red; width:50px;">&nbsp;</div>
<input type='text' id='testprop'  />
<input type='button' value="test" onclick="alert(this.HasCSSProp(document.getElementById('testprop').value))">
</body>
 
</html>

Si quelqu'un peut m'explique pourquoi IE n'apprécie pas ?

Ceci étant je m'aperçois que je suis hors sujet car ce code teste l'existance de la propriété et non ses valeurs possibles