CSS Rules and DOM

[Nathan Davis]

Hi,

I'm looking for a way to query the DOM to determine which CSS rules
apply to a particular element. Solutions that are cross-browser
compatible are preferred, but not absolutely necessary. Does anyone
have any suggestions? I've spent several hours on this, but can't
seem to find the answer.

Thank you,

--Nathan Davis

 

[Martin Honnen]

I'm looking for a way to query the DOM to determine which CSS rules
apply to a particular element. Solutions that are cross-browser
compatible are preferred, but not absolutely necessary. Does anyone
have any suggestions? I've spent several hours on this, but can't
seem to find the answer.

Well current browsers expose
document.styleSheets
and then IE/Win exposes
document.styleSheets.rules
and W3C DOM Level 2 compliant browsers expose
document.styleSheets.cssRules
Then you can check the selector of each rule but there is no API as far
as I know telling you whether a rule applies to a certain element.

 

[Nathan Davis]

I'm looking for a way to query the DOM to determine which CSS rules
apply to a particular element. Solutions that are cross-browser
compatible are preferred, but not absolutely necessary. Does anyone
have any suggestions? I've spent several hours on this, but can't
seem to find the answer.

Well current browsers expose
document.styleSheets
and then IE/Win exposes
document.styleSheets.rules
and W3C DOM Level 2 compliant browsers expose
document.styleSheets.cssRules
Then you can check the selector of each rule but there is no API as far
as I know telling you whether a rule applies to a certain element.

Yeah, I was kind of hoping to avoid reimplementing CSS selectors in
javascript, but that was the conclusion I reached too. Does anyone
know how they do the CSS introspection Firebug?

--Nathan Davis

 

[dhtml]

I'm looking for a way to query the DOM to determine which CSS rules
apply to a particular element. Solutions that are cross-browser
compatible are preferred, but not absolutely necessary. Does anyone
have any suggestions? I've spent several hours on this, but can't
seem to find the answer.

Well current browsers expose
document.styleSheets
and then IE/Win exposes
document.styleSheets.rules
and W3C DOM Level 2 compliant browsers expose
document.styleSheets.cssRules
Then you can check the selector of each rule but there is no API as far
as I know telling you whether a rule applies to a certain element.

Yeah, I was kind of hoping to avoid reimplementing CSS selectors in
javascript, but that was the conclusion I reached too. Does anyone
know how they do the CSS introspection Firebug?

There are mozilla-internal methods for that. It is not exposed to HTML
DOM. I cannot remember the name of the method, but there is a method for
this. I found it on XUL planet, I think.

you might try posting to a Firebug group. Or, if you're interested in
pursuing this, follow up on the www-style mailing list for a
getAppliedRules() method.

What are you trying to do?

 

[Nathan Davis]

Yeah, I was kind of hoping to avoid reimplementing CSS selectors in

There are mozilla-internal methods for that. It is not exposed to HTML
DOM. I cannot remember the name of the method, but there is a method for
this. I found it on XUL planet, I think.

I looked into Firebug some more, and it looks like they use the
inIDOMUtilsinIDOMUtils interface implemented by @mozilla.org/inspector/
dom-utils;[email protected]/inspector/dom-utils;1. This provides a
getCSSStyleRulesgetCSSStyleRules method that takes an element and
returns a list of rules. From my limited experimentation so far, it
appears the list is ordered such that index n contains rules that
override rule n-1.

Of course, Firefox doesn't allow access to XPCOM from web/file
resources, so it was a bit of a dance to get around that. I ended up
re-writing the page in XUL, and using XUL Explorer to run it. Given
the dependency on Mozilla, this isn't necessarily a bad thing. Still,
it would be better if there was a cross-browser way.

you might try posting to a Firebug group. Or, if you're interested in
pursuing this, follow up on the www-style mailing list for a
getAppliedRules() method.

I may do that. It seems to me that this would be a relatively common
stylesheet introspection problem.

What are you trying to do?

Well, that's not entirely decided yet ;-). Basically, though, I'm
trying to build an application that would let the user interactively
experiment with different styles. Click on an element, change the
color/background, and see the changes instantly. By determining which
rule an element gets its color from, it is possible to change the
appearance of, for example, all the section headings on the page.

--Nathan Davis

 

[Nathan Davis]

Yeah, I was kind of hoping to avoid reimplementing CSS selectors in

There are mozilla-internal methods for that. It is not exposed to HTML
DOM. I cannot remember the name of the method, but there is a method for
this. I found it on XUL planet, I think.

I looked into Firebug some more, and it looks like they use the
inIDOMUtilsinIDOMUtils interface implemented by @mozilla.org/inspector/
dom-utils;[email protected]/inspector/dom-utils;1. This provides a
getCSSStyleRulesgetCSSStyleRules method that takes an element and
returns a list of rules. From my limited experimentation so far, it
appears the list is ordered such that index n contains rules that
override rule n-1.

Of course, Firefox doesn't allow access to XPCOM from web/file
resources, so it was a bit of a dance to get around that. I ended up
re-writing the page in XUL, and using XUL Explorer to run it. Given
the dependency on Mozilla, this isn't necessarily a bad thing. Still,
it would be better if there was a cross-browser way.

you might try posting to a Firebug group. Or, if you're interested in
pursuing this, follow up on the www-style mailing list for a
getAppliedRules() method.

I may do that. It seems to me that this would be a relatively common
stylesheet introspection problem.

What are you trying to do?

Well, that's not entirely decided yet ;-). Basically, though, I'm
trying to build an application that would let the user interactively
experiment with different styles. Click on an element, change the
color/background, and see the changes instantly. By determining which
rule an element gets its color from, it is possible to change the
appearance of, for example, all the section headings on the page.

--Nathan Davis> > Yeah, I was kind of hoping to avoid reimplementing
CSS selectors in

There are mozilla-internal methods for that. It is not exposed to HTML
DOM. I cannot remember the name of the method, but there is a method for
this. I found it on XUL planet, I think.

I looked into Firebug some more, and it looks like they use the
inIDOMUtilsinIDOMUtils interface implemented by @mozilla.org/inspector/
dom-utils;[email protected]/inspector/dom-utils;1. This provides a
getCSSStyleRulesgetCSSStyleRules method that takes an element and
returns a list of rules. From my limited experimentation so far, it
appears the list is ordered such that index n contains rules that
override rule n-1.

Of course, Firefox doesn't allow access to XPCOM from web/file
resources, so it was a bit of a dance to get around that. I ended up
re-writing the page in XUL, and using XUL Explorer to run it. Given
the dependency on Mozilla, this isn't necessarily a bad thing. Still,
it would be better if there was a cross-browser way.

you might try posting to a Firebug group. Or, if you're interested in
pursuing this, follow up on the www-style mailing list for a
getAppliedRules() method.

I may do that. It seems to me that this would be a relatively common
stylesheet introspection problem.

What are you trying to do?

Well, that's not entirely decided yet ;-). Basically, though, I'm
trying to build an application that would let the user interactively
experiment with different styles. Click on an element, change the
color/background, and see the changes instantly. By determining which
rule an element gets its color from, it is possible to change the
appearance of, for example, all the section headings on the page.

--Nathan Davis

 

[JR]

Hello,
I didn't test the code snippet below thoroughly (successful in FF3 &
IE 7 / win), but here goes my
contribution:

function() {
var ss, ret = '', el = document.getElementsByTagName('p')[0] // first
p tag.
if(window.getComputedStyle) { // FF3.
ss = window.getComputedStyle(el, null);
} else if(el.currentStyle) { //IE7 win
ss = el.currentStyle;
}
for (var s in ss) {
if(typeof ss == 'number' || (typeof ss == 'string' && ss
.length > 0)) {
ret += s +': ' +ss +'\n';
}
}
alert(ret); // do whatever you wish with ret.
};

Merry Christmas,
Joao Rodrigues

 

[David Mark]

Hello,
I didn't test the code snippet below thoroughly (successful in FF3 &
IE 7 / win), but here goes my
contribution:

function() {
        var ss, ret = '', el = document.getElementsByTagName('p')[0] // first
p tag.
    if(window.getComputedStyle) { // FF3.

The getComputedStyle method is not necessarily a method of the window
object. In FF, where window == document.defaultView, this will work.
I know of at least one browser where it will not. Also, do not detect
host methods by boolean type conversion (use typeof.)

                  ss = window.getComputedStyle(el, null);
                } else if(el.currentStyle) { //IE7 win
                        ss = el.currentStyle;

This is the cascaded style, not to be confused with computed styles.

                }
        for (var s in ss) {
        if(typeof ss == 'number' || (typeof ss == 'string' && ss
.length > 0)) {
        ret += s +': ' +ss +'\n';
        }
        }

Depending on the styles involved, this may yield a very different
result in IE (as opposed to the quasi-standard browsers.)

[snip]

 

[JR]

Reposting my code, because the ss object has a different structure in
Safari 3.x / win version:

function() {
var ss, ret = '', el = document.getElementsByTagName('p')[0],
safari = /webkit/i.test(navigator.userAgent);
if(window.getComputedStyle) { // FF3 and Safari 3.x
ss = window.getComputedStyle(el, null);
} else if(el.currentStyle) { //IE7 win
ss = el.currentStyle;
}
for (var s in ss) {
if(typeof ss == 'number' || (typeof ss == 'string' && ss
.length > 0)) {
ret += (!safari) ? (s +': ' +ss +'\n') : (ss +": " +
ss.getPropertyValue(ss) +"\n");
}
}
alert(ret); // do whatever you wish with ret.
}

Hope this helps.

Joao Rodrigues

 

[JR]

Hi David, sorry I didn't see your comments before reposting the
snippet. I agree with you in some points. Just answering partially to
Nathan's question:

"[..] I'm looking for a way to query the DOM to determine which CSS
rules apply to a particular element."

Well, what I tried to tell with my code is:

a) in FF3 and Safari 3.x, loop around window.getComputedStyle(element,
null) object. Safari has a specific method (getPropertyValue) to
retrieve the values from the object's properties;

b) in IE7, loop around element.currentStyle.

Obviously, as results may vary depending on browser version and
platform (win / mac), it's better to check for a specific style than
to looping around the styles object.

Cheers and Merry Christmas.

Joao Rodrigues

 

[David Mark]

Hi David, sorry I didn't see your comments before reposting the

No need to apologize. That is the nature of Usenet (my post may not
have been available when you posted.)

snippet. I agree with you in some points. Just answering partially to
Nathan's question:

"[..] I'm looking for a way to query the DOM to determine which CSS
rules apply to a particular element."

Well, what I tried to tell with my code is:

a) in FF3 and Safari 3.x, loop around window.getComputedStyle(element,
null) object. Safari has a specific method (getPropertyValue) to
retrieve the values from the object's properties;

I believe that most quasi-standard browsers have that as it is the
standard way to query computed styles. However, the
"getPropertyValue" method has bugs in some older versions, so a lot of
scripts don't use it. ISTM that these bugs can be tested, but I don't
know of a reason to do so (the corresponding properties of the
returned object work fine in my experience.) IIRC, the standard
method requires the hyphenated forms of the names as well (which I
never use in scripts.)

b) in IE7, loop around element.currentStyle.

Obviously, as results may vary depending on browser version and
platform (win / mac), it's better to check for a specific style than
to looping around the styles object.

It is best to understand when and why they will vary. The rules are
simple and have nothing to do with versions or platforms. For
example:

div.myclass { border-left: .2em }

The computed style of these div's will be in pixels. The cascaded
style will be ".2em".

Similar deviations occur with float, position and display rules.

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

[snip]

 

[SAM]

Le 12/23/08 5:35 PM, Martin Honnen a écrit :

I'm looking for a way to query the DOM to determine which CSS rules
apply to a particular element. Solutions that are cross-browser
compatible are preferred, but not absolutely necessary. Does anyone
have any suggestions? I've spent several hours on this, but can't
seem to find the answer.

Well current browsers expose
document.styleSheets
and then IE/Win exposes
document.styleSheets.rules
and W3C DOM Level 2 compliant browsers expose
document.styleSheets.cssRules
Then you can check the selector of each rule but there is no API as far
as I know telling you whether a rule applies to a certain element.

And how makes FireBug ?
(FireBug is an extension for FireFox)

(the code of such an extension (xml and js) is in 'clear' once you've
unziped it)

 

[SAM]

Le 12/23/08 6:57 PM, Nathan Davis a écrit :

how they do the CSS introspection Firebug?

Just unzip it and have a look in ?