How does this polyfill work for document.queryselectorall?

I'm trying to understand this polyfill for queryselectorall? Specifially this line:

styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";

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

if (!document.querySelectorAll) {
    document.querySelectorAll = function(selector) {
        var doc = document,
            head = doc.documentElement.firstChild,
            styleTag = doc.createElement('STYLE');
        head.appendChild(styleTag);
        doc.__qsaels = [];

        styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
        window.scrollBy(0, 0);

        return doc.__qsaels;
    }
}

Answers:

Answer

It is abusing the expression "feature" of CSS. When computing the style of the x property (which happens on the reflow triggered by scrollBy(0, 0)), Internet Explorer will execute this snippet for all elements that match the selector.

CSS expressions are officially despised since IE 8…

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.