Firefox : cssText ne liste pas une déclaration de style au complet

**schnee** · 01/09/2011, 01h27

Bonjour,
J'avais un truc dans Firefox qui a cessé subitement de fonctionner depuis une mise à jour récente.
J'utilise la propriété cssText pour retrouver les déclarations de styles, et subitement, voilà qu'elle ne sont plus toutes là :-(

Voir le code ci-joint : l'alert montre bien le fontfamily et le fontSize, mais le voiceFamily a disparu.
Qqun aurait-il une explication ?

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
	<title>Untitled</title>
<STYLE>
body {
  voice-family:Male;
	font-family: Verdana, Arial,sans-serif;
	font-size:14px;
	}
</STYLE>
</head>
 
<body onload="test()">
<SCRIPT>
function test()
  {
  alert(document.styleSheets[0].cssRules[0].style.cssText)
  }
</SCRIPT>
</body>
</html>

**SpaceFrog** · 01/09/2011, 09h11

La propriété de style voice n'est a priori pas reconnue...
UN debut de piste :

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
34
35
36
<html>
<head>
	<title>Untitled</title>
    <STYLE type="text/css">
body {
  voice-family:Male;
	font-family: Verdana, Arial,sans-serif;
	font-size:14px;
	}
</STYLE>
<script type="text/javascript" >
function StyleRules(){
var myrules=document.getElementsByTagName('style')[0].innerHTML;
reg =/([a-z]+\s*){([^}]+)}/gi
var tabrules=reg.exec(myrules)//.match(reg)
tabrules=tabrules[2].replace(/\r|\n\|\t|\s+/g,'')
tabrules=tabrules.split(';')
tabrules.pop()
var CSSStyles=new Array()
for (elt in tabrules){
CSSStyles.push(tabrules[elt].split(':'))
}
return CSSStyles;
}
function foo(){
var i=-1
while(StyleRules()[++i]){
document.body.appendChild(document.createTextNode(StyleRules()[i][0]+"=>"+StyleRules()[i][1]))
document.body.appendChild(document.createElement('br'))
}
}
</script>
</head>
 <body onload="foo()">
</body>
</html>

Avantage, c'est crossbrowser !

**schnee** · 03/09/2011, 16h08

>>La propriété de style voice n'est a priori pas reconnue...

En fait, c'est ça le problème. La console d'erreur me dit :
propriété « voice-family » non reconnue
C'est nouveau depuis la dernière version de FF (6.01) depuis quelques semaines tout au plus.
Pourtant, voice-family est dans les standards.

**schnee** · 03/09/2011, 16h17

Merci pour la proposition de contournement.
Je vais essayer de l'implanter, mais c'est un peu plus compliqué, en fait, j'importe les règles qui viennent d'un fichier.css, pas d'une simple déclaration de style.

Pour tout révéler, j'utilise ce truc pour donner un nom à mes déclarations de style afin de les lister de façon plus claire dans mon éditeur de texte.
Au début, j'utilisais carrément une propriété à moi, ex :
H1 {
description:"Titre primaire niveau 1";
font-size:22px;
font-weight : bold;
...
Conformément à la philosophie de HTML qui permet de créer ses propres attributs, MSIE ne traite pas la propriété description, mais il la store quand même dans la structure.
Comme d'habitude, FF est plus tatillon et refuse carrément la propriété inconnue.
J'avais alors trouvé la propriété voice-family dont je ne me servais pas et qui permet de donner une chaîne qqonque.
Mais v'là ty pas que la propriété n'est même plus reconnue :-(

Qqun aurait peut-être un autre truc pour donner (et retrouver dans JS) un nom clair à un style ?

**SpaceFrog** · 03/09/2011, 17h41

pour les fichiers css externes pas de souci, il te suffira de recupérer le src de tes balises link et de faire un ajax pour en récupérer le responseText qui se parsera de la même façon.

si tu veux stocker des choses au niveau des objets tu peux te pencher sur data() avec jquery ...

**schnee** · 03/09/2011, 20h06

>>si tu veux stocker des choses au niveau des objets tu peux te pencher sur data() avec jquery ...

En Javascript, je n'aurais en effet aucun problème pour ajouter des propriétés.
Mais l'idée, c'est d'en ajouter une une dans le code source du CSS pour pouvoir la retrouver plus tard en JS.
Je vais essayer de retrouver la source comme tu l'indiques, mais là il faut que je fasse l'analyse syntaxique moi-même. Avant, c'était FF qui le faisait pour moi.

Apparemment, FF ne supporte pas la propriété voice-family. Mais jusqu'à maintenat, il la compilait et l'incorporait quand même dans la structure.
On dirait que depuis récemment, il la refuse carrément.

En HTML, on peut définir des balises et des attributs soi-même et les retrouver par JS. On se demande pourquoi il n'en est pas de même pour CSS.

Firefox : cssText ne liste pas une déclaration de style au complet

JavaScript

Discussions similaires

Partager

Partager