I need to be able to support all CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. The polyfill called selectivizr allows you to do this. It needs a javascript library such as jquery or mootools to work. The problem is that while selectivizr supports all the pseudo-classes and attribute selectors with mootools, as many as 11 of them are either not recognized or not supported with jquery. So although I have never used mootools in my life I am forced to add it to my webpage as an external script along with selectivizr in the conditional comments to detect if the webpage has been accessed from Internet Explorer 6-8 or not.
Like this:
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
The problem is that mootools and jquery have been known to conflict with each other. My webpage has lots of jquery all over it. Editing it all using jQuery.noConflict() is not really an option nor is wrapping all of it between
(function ($) {
// $ is actually jQuery here
$(document).ready(function () {
})
}(jQuery))
Plus I don't know if so but the presence of more than one javascript libraries that selectivizr uses may cause problems with the functionality of selectivizr itself. I think what I need to do is add some mootools code to my webpage to prevent it from conflicting with jquery and at the same time make sure that selectivizr is not detected by jquery and is only able to respond to mootools. But since I have never used mootools I don't know how to do this. Can anyone help?
P.S I don't have Internet Explorer 6-8 so I can't test this so please be careful and responsible if you give an answer.