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))}";

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

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

        return doc.__qsaels;



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…


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.