selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

  • By Keith Clark
  • Last update: Dec 18, 2022
  • Comments: 16

Selectivizr

CSS3 selectors for IE 6-8

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

To use the library, you'll need to include one of the supported libraries:

  • jQuery (1.3+)
  • Dojo (1.5.0+)
  • Prototype (1.6.1+)
  • Yahoo UI Library (2.8.0+)
  • DOMAssistant (2.8.0+)
  • MooTools (1.3+)
  • NWMatcher (1.2.3+)

Then add the following conditional comment AFTER your stylesheets:

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

This adds the selectivizr.js and an optional fallback CSS file to IE6-8 while hiding for other browsers.

Github

https://github.com/keithclark/selectivizr

Comments(16)

  • 1

    Incompatible with media queries

    Hi,

    I found that selectors don't work when they're inside a media query. Of course, I use Respond.js to have the real media query behavior in IE6-8.

    I don't know where the issue comes... Maybe selectivizr don't match any media queries? (which will be a relevant behavior since IE6-8 don't support them).

    I hope you'll find out what's going on...

  • 2

    onready fix

    It should allow to lazyload selectivizr (tested with yepnope) no more doc.write() check document.readyState uses doScroll trick when not iframe uses doc.onreadystatechange if iframe

    I made a few tests on IE6 and IE8, looks fine. With iframe, selectivizr does the job just before unload, which is little delayed, but without throwing errors.

  • 3

    Fix potential "Stop running this script" errors in IE.

    As we scaled a site using Selectivizr to production levels of DOM content, we noticed that IE7 (and occasionally IE8, depending on the resources) started throwing "Stop running this script" errors. I traced it back to the applyPatches() method, which in our case was extremely complex; we had a domPatch length of near 800.

    Since all of this code executes in the same loop/closure, the more you throw in it the more likely you are to see this error. Our solve was to first wrap the for-loop's code in a setTimeout with a 0ms timer (basically _.defer() from underscore, see http://underscorejs.org/#defer and http://www.picnet.com.au/blogs/Guido/post/2010/03/04/How-to-prevent-Stop-running-this-script-message-in-browsers), and wrap that with a self-executing function to preserve the iterator once the timeout executes.

    Hopefully this is an easy add, but let me know if additional info / tests are required. Thanks!

  • 4

    White Screen of Death

    First of all, fantastic work with Selectivizr! I've applied it to many sites and found it incredibly useful.

    Currently I'm having an issue with IE8 intermitantely white-screen-of-death'ing when Selectivizr is included in the site. The site is quite big and there's a lot of other JavaScript so it could be an issue with compatiability?

    The site in question is puregym dot com and the WSOD is happening intermittantely on XP based PCs - it mainly seems to be happening to our kiosk machines but it has been happening on our usual desktops too.

  • 5

    Added bower support

    selectivizr is already IN the bower repository — accepting this pull request will make users of bower & selectivizr happy.

    Bower uses tags, so as per #67, it'd be great if you could

    git tag 1.0.3

    After accepting this pull request (or use the new github releases feature).

    Lemme know if you have any questions, I'll do my best to answer.

    This will close Ref: #62 when merged.

  • 6

    hover broken for newly loaded dom elements

    in ie7 (could be ie6+ie8 as well) selectivizr seems to break the hover states for ajax loaded dom elements

    jquery 1.6.1, selectivizr 1.0.3b (and lower)

  • 7

    getXHRObject throws error in ie8

    win.XMLHttpRequest throws: Message: Object doesn't support this property or method

    Consider testing for ActiveXObject first and falling back to XMLHttpRequest after:

        try {
        return( window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest( ) );
    } catch(e) {
        return null;
    }
  • 8

    explore other (non-doc.write) dom ready solutions

    this old dean edwards snippet was used in jquery but was removed due to edge case incompatibilities.

    the doScroll basic check from diego perini (called IEContentLoaded) is much safer.

  • 9

    Fix bug in IE8 when loading empty stylesheets

    Loading an empty stylesheet might result in the xhr.responseText being null. Rest of the code expect an EMPTY_STRING. Returning null will cause a JavaScript error.

  • 10

    Library agnostic

    This is not an issue but more of a request.

    Is it possible to use one of the existing selector engines (or strip down a selector engine if possible) instead of requiring the user to include an entire Js framework such as jQuery if they don't need or use it.

    I like the idea of your script but want to not be forced to use a framework.

  • 11

    MooTools and JQuery updated to latest versions

    • MooTools v1 latest added
    • MooTools EDGE added
    • JQuery 1.6 added
    • JQuery v1 latest added
    • Updated MooTools and JQuery test engines to use google api's. As new subversions (1.6.x) become available they are automatically used.
  • 12

    Zip file invalid (website)

    The zip file downloaded from the website (http://selectivizr.com/downloads/selectivizr-1.0.2.zip) results in an "invalid" error message when extracting.

    Tried on Windows 10 and Ubuntu.

    Zip file from GitHub works fine.

  • 13

    support of `:before`, `:after` and direct child `>` selectors

    Please add support of :before, :after and direct child > selectors. They are more common in css relative to other ones which are supported like as nth-of-type. I think it should not be so hard to include in this good utility and extend important basic css for IE6/7. Thanks in advance

  • 14

    :empty:after has no effect and console will get error when using IE8.

    Selector '.SELECT>dt:empty:after' threw exception 'Error: Syntax error, unrecognized expression: unsupported pseudo: after' will appear in the console.

  • 15

    Make CSS dynamic instead of static

    Hi, do you have any plans of joining forces with philipwalton's polyfill library to make selectivizr run dynamically time instead of being a 1 time run for each page load? In my opinion, that would be a great addition and it is what is, currently, preventing me from using this for my own websites.

  • 16

    “Stop running this script?” error

    In IE8 when page loads i am able to see this particular error image attached "http://www.picnet.com.au/blogs/guido/files/2010/03/iestopscript.png"

    I have checked many articles , based on that i mentioned set timeout for those repeating instructions . But still i am able to see that error.

    Can you please let me know which is the best solution for this, Can you please solve this issue in selectivizr end itself by using set Timeout. giving me new file.

    Regards, Sheikh Mohammed Shamnoon

Popular Tag

Related