<Glazblog/>

So one of the painful bits when you have UI-based management of Media Queries is the computation of what to display in that UI. No, it's not as simple as browsing all your stylesheets and style rules to retrieve only the media attribute of the CSS OM objects... Let's take a very concrete example:

<style type="text/css" media="screen and (min-width: 200px)">
  @import url("foo.css") screen and (max-width: 750px);
</style>

where file foo.css contains the following rules:

@media screen and (max-width: 500px) {
  h1 { color: red; }
}

What are the exact media constraints triggering a red foreground color for h1 elements in such a document? Right, it's screen and (min-width: 200px) and (max-width: 500px)... And to compute that from the inner style rule (theh1 { color: red; } bit), you have to climb up the CSS OM up to the most enclosing stylesheet and intersect the various media queries between that stylesheet and the final style rule:

It becomes seriously complicated when the various constraints you have to intersect are expressed in different units because, unless you're working with computed values, you really can't intersect. In BlueGriffon, I am working on specified values and it's then a huge burden. In short, dealing with a width Media Query that is not expressed in pixels is just a no-go.

I'd really love to have a CSS OM API doing the work described above for a given arbitrary rule and replying a MediaList. Maybe something for Houdini?