How do I parse @import stylesheets with Javascript

Question

I am trying to read CSS selectors in my stylesheets with the document.styleSheets array. It works fine with <link> and <style> tags, but when I use @import inside a <style> it doesn't show up in the array - only as a cssRule (style is "Undefined" in Safari 3 and FF 3).

So: How can I parse the css in an @imported file?

Answer 1

Assuming that our document contains an @import-rule as first rule in the first stylesheet, here's the code for standards compliant browsers

document.styleSheets[0].cssRules[0].styleSheet.cssRules;

and the special case for our all-beloved IE

document.styleSheets[0].imports[0].rules;

You could have easily figured this out yourself if you had read the page at quirksmode.org to which I had already linked and then walked the properties of the @import-rule with a for..in loop - that's what I did...

PS: I can't comment on other answers yet, but if I could, I would have ridiculed you properly ;)