"I love Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8"

2022-05-15 17:25:12

Follow on TwitterGet support using Google GroupsContribute fork with githubDonate £5 buy me a beerCSS3 selectors for IEselectivizr 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 selectivizrwill do the rest.DOWNLOAD v1.0.2 - (4k .ZIP archive)Enhancing IE's selector engineSelectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers nativeselector implementations.JavaScript-knowledge: noneSelectivizr works automatically so you don't need anyJavaScript knowledge to use it — you won't even have to modify your style sheets. Just start writing CSS3 selectors and they will work in IE.Works with existing toolsSelectivizr requires a JavaScript library to work.If your website already uses one of the 7 supported libraries you just need to add the selectivizr script toyour pages. If not, you will need to pick a library too.How does it work?Just include this script in your page's tag.If you're not already using a JavaScript library, you'll need to choose one from the table below.A table of JavaScript libraries that are compatible with selectivizr and CSS selector support they offer.† = only available in IE8 standards mode.1.3 / 1.41.5.01.6.12.8.02.8.01.31.2.3[attr]YesYesYesYesYesYesYes[attr=]YesYesYesYesYesYesYes[attr~=]YesYesYesYesYesYesYes[attr|=]YesYesYesYesYesYesYes[attr^=]Fails to identify [attr^=""]Fails to identify [attr^=""]Fails to identify [attr^=""]YesFails to identify [attr^=""]YesYes[attr$=]Fails to identify [attr$=""]Fails to identify [attr$=""]Fails to identify [attr$=""]YesFails to identify [attr^=""]YesYes[attr*=]Fails to identify [attr*=""]Fails to identify [attr*=""]Fails to identify [attr*=""]YesFails to identify [attr*=""]YesYes:nth-childYesYesYesYesYesYesYes:nth-last-childSelector not supportedSelects incorrect elementsYesYesYesYesYes:nth-of-typeSelector not supportedSelects incorrect elementsYesYesYesYesYes:nth-last-of-typeSelector not supportedSelects incorrect elementsYesYesYesYesYes:first-childYesYesYesYesYesYesYes:last-childYesYesYesYesYesYesYes:only-childYesYesYesYesYesYesYes:first-of-typeSelector not supportedSelects incorrect elementsYesSelects incorrect elementsYesYesYes:last-of-typeSelector not supportedSelects incorrect elementsYesSelects incorrect elementsYesYesYes:only-of-typeSelector not supportedSelects incorrect elementsYesSelects incorrect elementsYesYesYes:emptyFails if element contains a HTML commentYesFails if element contains a HTML commentFails if element contains a HTML commentFails if element contains a HTML commentYesYes:enabledYesYesYesYesYesYesYes:disabledYesYesYesYesYesYesYes:checkedYesYesYesYesYesYesYes:hoverYesYesYesYesYesYesYes:focusYesYesYesYesYesYesYes:target †YesYesYesYesYesYesYes:notYesYesYesYesYesYesYes:rootSelector not supportedSelector not supportedSelector not supportedYesSelector not supportedYesYes::first-lineYesYesYesYesYesYesYes::first-letterYesYesYesYesYesYesYeswebsitewebsitewebsitewebsitewebsitewebsitewebsiteWho's using it?Selectivizr is adding advanced CSS selector support to a vast range of websites, from e-commerce projects includingHewlett-Packard's MagCloud, social media websites such as AudioBoo and Tweetment to personal portfolios and blogs — and everything in between.You need to knowselectivizr was written to make using CSS3 selectors in Internet Explorer completely seamless, but as with many JavaScript solutions to browser shortcomings, there are a few caveats and limitations you need to be aware of…Selectivizr will automatically detect the best JavaScript library for the job. If you're already using a library and itdoesn't support the selectors you need - just include anotherone.Style sheets MUST be added to the page using a tag but you can still use @import in your style sheets. Styles defined in tags won't be parsed.Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, stylesheets loaded using the file: protocol willnot work.The emulation is not dynamic. Once the styles areapplied they are fixed so changes to the DOM won't bereflected.If JavaScript isn't available, you can include a fallbackstyle sheet. Just add it to the tag as shown in the code sample.For Selectivizr to work IE must be running in standards mode — so make sure you have a DTD at the top of yourpages.Selectivizr is a project.Free to use under the terms of the MIT license.