javascript - What does {x:expression(...)} do? -

this question has answer here:

• how polyfill work document.queryselectorall? 1 answer

i came across polyfill of queryselectorall ie7:

https://gist.github.com/connrs/2724353

i had thought okayish in javascript, have never seen quoted part in line 9 of polyfill:

{x:expression(document.__qsaels.push(this))} 

apparently, javascript object key x , value expression(document.__qsaels.push(this)), other know, mysterious me. expression function do? not able find close via google.

you looking @ generated css rule. not javascript object, css declaration block.

the line

styletag.stylesheet.csstext = selector + "{x:expression(document.__qsaels.push(this))}"; 

concatenates css selector declaration block string of css. declaration block contains dummy css property called x value of expression(document.__qsaels.push(this)).

what expression() is, non-standard feature of old versions of ie allows author execute arbitrary javascript directly , obtain value use within css. while entire string css declaration block, document.__qsaels.push(this) in fact javascript expression.

what expression does, push element matching css selector __qsaels array polyfill can return set of elements matched selector.¹ this, in essence, how polyfill works.

as concrete example, calling polyfilled document.queryselectorall(".foo") causes ie7 append following css document stylesheet:

.foo{x:expression(document.__qsaels.push(this))} 

with indentation , newlines resembles conventional css:

.foo {   x: expression(document.__qsaels.push(this)) } 

here can see css rule apply element matches .foo, causing each element added __qsaels before returned.

---

¹ _{for whatever reason, ie seems happy execute expression() statements on unknown properties (afaik there isn't such property called x on ie7, know?).}