Path to polyfilling CSS functions?

Hi folks,

CSS functions like image-set(), image(), are very useful for solving the
responsive images problem. image-set() [1] has been agreed upon and
implemented in Safari. However, from a web developer perspective, this
feature is DOA until more browsers implement it, which may be many years
away. The solution is to use polyfills.

Writing polyfills for this should be easy, right? Well, not really. It used
to be the case the the CSS object model would retain unknown CSS rules as
UnknownRules. However, this changed in 2003 as a result of this email [2].
As far as I know, there has been an attempt to get UnknownRule back into
the spec [3], through a CSS Editing Task Force, but nothing ever came of
this.

So, today, we are stuck with sub-optimal solutions to this problem, such as
using JSCSSP, a JS CSS parser [4]. Such a workaround would never be
acceptable for production code because using it means that all CSS gets
parsed once by the browser, and once by JS (a much slower path).

It would be great if UnknownRule was still available, since it'd allow us
to polyfill features missing from different browsers. It seems the removal
of UnknownRule may have been premature - perhaps it's time to re-enable it.
Does anyone have valuable input about how we could do this easily or have a
better suggestion?

Thanks!
- Boris (Chrome Developer Advocate)

[1]: http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
[2]: http://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html
[3]: http://lists.w3.org/Archives/Public/www-style/2010Apr/0274.html
[4]: http://www.glazman.org/JSCSSP/