Compatibility of document.querySelectorAll in IE, Edge and Safari

Question

Reference answer: https://mcmap.net/q/138251/-ignoring-case-sensitiveness-in-queryselectorall

Please refer my question and the answer linked above works only in Firefox, Chrome, and Opera.

I did some research and found that it (case insensitivity flag) isn't compatible. I need an equivalent in IE, Edge and Safari.

var divs = document.querySelectorAll('div[class^="foo" i]');

Hallucinatory

This is CSS4, you shouldn't use that right now because there is no much support. – Kiangsu

I'm using it without issues but I don't now what the "i" is for: so try document.querySelectorAll('div[class^="foo"]'); – Hulk

That is the case insensitivity qualifier. Check this's answer. – Hallucinatory

"I did some research and found that it isn't compatible." What did your research turn up that suggests this is an issue with querySelectorAll and not the case insensitivity flag? – Playback

@Playback I meant, the case insensitivity flag isn't compatible with IE and Edge, because of CSS4. That's why I have quoted one of my questions and the answer to it. Edited now. – Hallucinatory

Answer 1

Since css level 4 is still in drafts, case-sensitivity selector is not compatible with most browsers. You may use filter method like this:

var divs = [].slice.call(document.querySelectorAll('div')).filter(function(el){
   return el.className.match(/^foo/i);
});

---

Update: Need to state that you can now use css4 selector.

document.querySelectorAll('div[class^="foo" i]');

See this link for browser compatibility.

Guerra