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

Related tags

CSS selectivizr
Overview

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.

Comments
  • Incompatible with media queries

    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...

    opened by pyrsmk 17
  • onready fix

    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.

    opened by ZeeAgency 16
  • Fix potential

    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!

    opened by gcpantazis 15
  • White Screen of Death

    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.

    opened by tobysteward 11
  • Added bower support

    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.

    opened by benschwarz 6
  • hover broken for newly loaded dom elements

    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)

    opened by jessehart 6
  • getXHRObject throws error in ie8

    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;
        }
    
    opened by bendavies 6
  • explore other (non-doc.write) dom ready solutions

    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.

    opened by paulirish 5
  • Fix bug in IE8 when loading empty stylesheets

    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.

    opened by KeesCBakker 4
  • Library agnostic

    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.

    opened by Integralist 4
  • MooTools and JQuery updated to latest versions

    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.
    opened by mlebarron 4
  • Zip file invalid (website)

    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.

    opened by mdsimmo 0
  • support of `:before`, `:after` and direct child `>` selectors

    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

    opened by sserp 0
  • :empty:after has no effect and console will get error when using IE8.

    :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.

    opened by vrbvillor 1
  • Make CSS dynamic instead of static

    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.

    opened by brunoais 0
  • “Stop running this script?” error

    “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

    opened by shamnoon 0
Owner
Keith Clark
Front-end developer · 2015 JS1k winner · 2014 Net award winner · Creator of GA Debugger & CSS Feature Toggle devtools extensions. Selectivizr.
Keith Clark
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
Grid based on CSS3 flexbox

Flexbox Grid flexboxgrid.com Grid based on the flex display property. Install npm npm i flexboxgrid --save bower bower install flexboxgrid cdn CDNJS <

kj 9.3k Jan 2, 2023
A collection of CSS3 buttons implemented in Sass.

CSS3 Buttons This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possi

Chad Mazzola 1.3k Nov 8, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Jan 1, 2023
Small utility for react-redux's `useSelector` that allows passing args.

use-selector-with Monorepo for the following two packages: use-selector-with: Small utility for react-redux's useSelector that allows passing args. es

Codecademy 5 Jan 28, 2022
A utility library to lookup TailwindCSS Heroicons by their name

Welcome to heroicons-lookup ?? A utility library to lookup TailwindCSS Heroicons by their name. Based on @jsmith's gist ?? Homepage ✨ Demo(coming soon

Nicolás Quiroz 8 Oct 3, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

JSS 6.9k Dec 31, 2022
Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

react-with-styles Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or Reac

Airbnb 1.7k Dec 8, 2022
A simple javascript calendar with a glassmorphic UI

Calendar A simple javascript calendar with a glassmorphic UI Techs Used: HTML 5 CSS 3 Vanilla JavaScript Purpose: The javascript file contains the log

MAINAK CHAUDHURI 26 Dec 17, 2022
A JavaScript API for drawing unconventional text effects on the web.

A JavaScript API for drawing unconventional text effects on the web. Home — Help Overview When applying effects to text on the web, designers have tra

Bradley Griffith 2.9k Jan 4, 2023
Giggy is a collection of a few fun jokes related to Coding & Dark Humor - Created using HTML, JavaScript, CSS & Webpack.

Giggy A Collection of some of the best jokes. This is a Web Application with some jokes related to coding & Dark Humor. Created with data from the Jok

Awais Amjed 7 Jul 28, 2022
A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

null 17.7k Jan 8, 2023
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Tahmid (Halfmoon UI) 2.8k Dec 26, 2022
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 2022