3

Alright, so I recently found this script called "Selectivizr" and I was really excited, but I plugged it into my project, set it up just as it said, and it didn't work.

So, what I am looking for is any sort of JavaScript library/script that will allow me to use CSS3 selectors (especially :checked) in IE8.

Selectivizr seems broken, and hasn't been updated in over a year. Has anybody else had luck with it?

Does anybody know of any other scripts that will allow for use of CSS3 selectors in IE8?

Not looking for CSS3 stylings like border radius, shadows, etc. Just looking for the selectors, like :before, :after, :checked, etc...

ndugger
  • 7,373
  • 5
  • 31
  • 42

2 Answers2

1

Dean Edward's IE9.js is pretty solid, though I have heard of some incompatibility problems when using other libraries as well. Never experienced them myself, but haven't used the library too often in the wild for a long time. Plug it and play, and if it doesn't break then you're all set.

Link: http://code.google.com/p/ie7-js/

Demos: http://ie7-js.googlecode.com/svn/test/index.html

amustill
  • 5,274
  • 23
  • 15
  • Just making sure, but this will work for ie8? The names confuse me, lol. I just wanna make sure because :checked is only shown under ie9.js, but that works for ie8 too? – ndugger Oct 08 '12 at 02:06
  • All versions are compatible from IE6+. The naming convention follows the pattern that IE7.js polyfills IE7's features to IE6, IE8.js polyfills IE8's features to IE6-7, etc. – amustill Oct 08 '12 at 02:12
  • Ah, well I will have to give this a go then! I'll have to ask around again if it doesn't work, but it looks promising! – ndugger Oct 08 '12 at 02:14
  • Does not support ajax loaded CSS – Alex G May 07 '14 at 02:39
0

With jQuery code, you can use these few lines to toggle a class on all your checkboxes (or on it's container) any time it's checked or unchecked. This then lets you use regular CSS code in all browsers.

$("input[type='checkbox']").click(function() {
    $(this).parent().toggleClass("checked", this.checked);
});​

Working example here: http://jsfiddle.net/jfriend00/7jA5r/.

If you dynamically create checkboxes, then you could use the dynamic form of .on() to make sure to catch them.

I would personally rather use a solution with a few lines of code like this than use a heavy library that tries to add CSS style file capabilities. If you were going to use that, make sure you understand what's really going on under the covers before you adopt it.

If you just wanted a selector libraryby itself, the Sizzle selector library works across a wide variety of browsers including all the way back to IE6. It will adapt to the capabilities of the host browser, using as many built-in capabilities as are present and using it's own code when the host browser does not support an explicit capability.

You can use just the selector library itself from here or it is also the selector library inside of jQuery.

It's extremely simple to use. You just do something like this:

var items = Sizzle(":checked");

and you will have an array of DOM elements that match the selector.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • The thing with this is, you need to write JS instead of just writing CSS, which is what selectivizr and IEX.js are supposed to do. Personally I've had very little success with either of those, IEX.js especially is bloated and buggy. Also with `:checked`, it needs to update live, when the input is checked or unchecked. – Wesley Murch Oct 08 '12 at 02:53
  • @WesleyMurch - yes, this is for javascript code - that's what I thought the OP was asking for - the ability to use CSS3 selectors with javascript. If they want to use CSS3 selectors in a CSS style file with older versions of IE - good luck. That's going to be difficult to make practical. – jfriend00 Oct 08 '12 at 02:56
  • So are you saying IEx.js should be frowned upon? I am not opposed to writing some jQuery, as I'm just learning it, but any pointers? I am just trying to change the style if the check/radio is checked. I can do this all in CSS3, but no IE8 then. – ndugger Oct 08 '12 at 02:59
  • @NickDugger: If it works for you, then by all means. It didn't work for me, I just gave up on those CSS selectors. I actually "favorited" this question in hopes of finding a better solution, you should make sure answers work for you first before accepting them IMO. – Wesley Murch Oct 08 '12 at 03:05
  • @NickDugger - It takes only a couple lines of jQuery to add/remove a class to a checkbox when it's checked or unchecked. It takes a gazillion lines of a hack to try to make CSS3 selectors work in CSS style files in browsers that don't support them. I know which I'd rather put in my code. – jfriend00 Oct 08 '12 at 03:08
  • Yeah, but I won;t have time to test this for a couple weeks, and I didn't want to leave a question open. I will leave them open until I test from now on though. – ndugger Oct 08 '12 at 03:08
  • @NickDugger - you should leave a question open until you're sure which answer is best. Many other's who might have ideas won't even post if you've already indicated a best answer and that would be a disservice to you if the answer you selected isn't the best answer available. There's zero harm in waiting some number of days for the best solicited answer as long as you engage in questions that might arise along the way. – jfriend00 Oct 08 '12 at 03:11
  • I have unchecked his answer, which I feel a jerk about, but I shall let this open for a couple days. As it seems, though, doing it manually via jquery may just be the only way. – ndugger Oct 08 '12 at 03:16
  • @NickDugger - I modified my answer to illustrate the few lines of jQuery alternative. – jfriend00 Oct 08 '12 at 03:39
  • I can't just use whether it's been clicked or not, though. I need it to check to see if it's checked. would that be something like as follows: if($("input[type='checkbox']").is(':checked') { }) but then your toggle in there, made to work? Or how do I check if its checked correctly? I am only guessing, as I am new to jQuery and all. – ndugger Oct 08 '12 at 04:00
  • Oh, I see you have something about .on()? Could you briefly explain that? – ndugger Oct 08 '12 at 04:02
  • @NickDugger - I'm having a hard time GUESSING what problem you're really trying to solve here. Maybe if you take some time and describe in your question what problem you're really trying to solve, I could help better. My proposed jQuery code already responds to whether the checkbox is checked or not (see the `this.checked` that is passed to `toggleClass()` and look up `toggleClass()` in the jQuery doc. – jfriend00 Oct 08 '12 at 04:08
  • Ah, I see it now. I've been staring at CSS all days so I mistook it for a class. Since I'm new to jQuery, it slipped my mind. Yeah, this will work just fine. I would much rather have a way where I do not have to add a class, but instead just change the css via it's checked status, but I can figure that out from here. Not ideal, but this is only for ie8. My css3 will still exist for Chrome/Safari/FF. Thanks! – ndugger Oct 08 '12 at 04:14