Imaginons le cas suivant :
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2: <html>
3: <head><title>Test</title></head>
4: <body>
5: <div
6: style="undefined: yes; -undefined2: yes"
7: onclick="alert(
8: // Style normal (camelCase)
9: this.style['undefined']+';'+
10:
11: // Style avec son -
12: this.style['-undefined2']+';'+
13:
14: // Style en camlecase
15: this.style['Undefined2']+';'+
16:
17: // Style sans son -
18: this.style['undefined2']
19: )"
20: >
21: Some text
22: </div>
23: </body>
24: </html>
Quelle sera la réaction des différents navigateurs modernes ?
Internet Explorer
Version 7.0
Yes; Yes; Undefined: Undefined affiché
IE 7.0 prend en compte les css inconnus
IE 7.0 préserve les "-" des css inconnus
IE 7.0 ne tient pas compte des règles du camelCase des CSS en JavaScript
this.style.cssText = "undefined: yes; -undefined2: yes;"
Version 6.0 et moins
Yes; Undefined; Undefined; Yes affiché
IE 6.0 prend en compte les css inconnus
IE 6.0 ne tient pas compte du "-" INITIAL contenu dans le CSS inconnu mais bien des autres
IE 6.0 ne tient pas compte des règles du camelCase des CSS en JavaScript
this.style.cssText = "undefined: yes; undefined2: yes;"
FireFox 2.x; Opera 9.x et Safari 3.0
Undefined; Undefined; Undefined; Undefined;
Tous ces navigateurs ne tiennent pas compte des css inconnus.
En conséquence, ces pseudo-styles ne sont pas accessibles via JavaScript.
this.style.cssText ne contient pas les CSS inconnus
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
