Internet Explorer support for nth-child selector - javascript

I am using IE9.js from this project.
For the most part it works well, enabling support for css such as opacity in Internet Explorer 7. However it doesn't support the :nth-child() selector. Is there a way around this purely using javascript? By that I mean my CSS would be read by the javascript and the css attributes applied to the matching elements.
I am aware that this problem can be solved by using classes on the elements or using jQuery (or other frameworks) to select the elements. However this is not ideal.
Ideally I want to have my presentation code in one place (css) not scattered around my project.
Edit Looks like this IE library might do it: link.

For non-IE6 browsers, you can use the adjacent sibling selector, if the type of child elements are always the same. For example, if you want select the 5th child li element in a list:
ul:first-child > li+li+li+li+li
{
...
}

There are a lot of ways to accomplish this but the easiest would be to adopt a helper library like jQuery. It supports those selectors across all browsers and also gives you a lot more tools.
If you can't add the dependency, just choose a similar library and extract that particular implementation (make sure the license allows it).
Sorry but I didn't see your reference to jQuery in the post... Please disregard the above. http://selectivizr.com/ seems a nice tool, though.

Related

Can I force jQuery to use Sizzle to evaluate a selector without using non-standard selectors?

In modern browsers, jQuery makes use of document.querySelectorAll() to boost performance when valid CSS selectors are used. It falls back to Sizzle if a browser doesn't support the selector or the document.querySelectorAll() method.
However, I'd like to always use Sizzle instead of the native implementation when debugging a custom selector. Namely, I'm trying to come up with an implementation of :nth-last-child(), one of the CSS3 selectors that are not supported by jQuery. Since this selector is natively supported by modern browsers, it works as described in the linked question. It is precisely this behavior that's interfering with debugging my custom selector, though, so I'd like to avoid it.
A cheap hack I can use is to drop in a non-standard jQuery selector extension, thereby "invalidating" the selector so to speak. For example, assuming every li:nth-last-child(2) is visible, I can simply drop that in, turning this:
$('li:nth-last-child(2)').css('color', 'red');
Into this:
$('li:nth-last-child(2):visible').css('color', 'red');
This causes it to always be evaluated by Sizzle. Except, this requires that I make an assumption of my page elements which may or may not be true. And I really don't like that. Not to mention, I dislike using non-standard selectors in general unless absolutely necessary.
Is there a way to skip the native document.querySelectorAll() method in browsers that support it and force jQuery to use Sizzle to evaluate a selector instead, that preferably doesn't employ the use of non-standard selectors? Likely, this entails calling another method instead of $(), but it's much better than a selector hack IMO.
You could just set it to null before jQuery loads so it thinks it's not supported:
document.querySelectorAll = null;
//load jquery, will trigger not supported branch
//Optionally restore QSA here (save a reference) if needed
This is supposed to make this evaluate to false
Demo: http://jsbin.com/asipil/2/edit
Comment out the null line and rerun, and you will see it will turn red.
Since you're developing the code for the selector yourself, could you not simply give it a custom name for the duration of the development cycle? Maybe give it your own vendor prefix or something? -bolt-nth-last-child()
That way, you'll know the browser definitely won't support it, so it should always fall into using Sizzle.
When you're done with the development cycle, you can drop the -bolt- prefix.
I know that's more of a work-around than an answer to the question, but it seems like the simplest solution to me.
It looks to be that jQuery.find defaults to sizzle. This will save you from destroying your environment by setting a native function to null.
https://github.com/jquery/jquery/blob/master/src/sizzle-jquery.js#L3
So you should be able to do the following and it will always go through sizzle.
$.find('li:nth-last-child(2)')

jQuery performance - select by data-attr or by class?

Which is faster and why? Selecting div (for plugin needs) by $('div[data-something]') or $('div.something')? I lean towards the former since it's "cleaner".
Based on this SO question I know I shouldn't be using both. However I didn't find out whether there is a difference between these.
In Chrome 16 at least, there is no difference. However, if you make the class selector less specific ($(".test") for example), it does outperform the other methods:
That was somewhat unexpected, because as ShankarSangoli mentions, I thought the div.test class selector would be faster.
It will vary by browser. Nearly all browsers now support querySelectorAll, and jQuery will use it when it can. querySelectorAll can be used with attribute presence selectors, so if it's there jQuery doesn't have to do the work, it can offload it to the engine.
For older browsers without querySelectorAll, jQuery will obviously have to do more work, but even IE8 has it.
As with most of these things, your best bet is:
Don't worry about it until/unless you see a problem, and
If you see a problem, profile it on the browsers you intend to support and then make an informed decision.
Selecting by class is always faster than attribute selector because jQuery tries to use the native getElementByCalssName first if supported by browsers. If not it uses the querySelector which uses css selectors to find the elements within the page.

CSS / JavaScript: Make :nth-child(n) work in IE with jQuery script?

I’m trying to get the CSS pseudo :nth-child(n) function to work in Internet Explorer and that isn’t an easy task.
I founded some JavaScript in jQuery to get the job done in IE but I can’t seem to get it to work. The examples I’ve tried is with unsorted lists (ul and li’s) but my CSS code (which works well in all other browsers) looks like this:
#portfolio div:nth-child(4) { some styling }
#portfolio div:nth-child(3) { some styling }
#portfolio div:nth-child(2) { some styling }
The javascript I tried to run by appending it to my existing script.js file is:
$('div#portfolio div:nth-child(4)').css({' filter:' : progid:DXImageTransform.Microsoft.Matrix(M11=0.99984770, M12=-0.01745241, M21=0.01745241, M22=0.99984770); ‘});
But that does not work. I’ve tried to remove the “div#portfolio” and retype it but nothing I do will make it work in IE.
Any help would be appreciated.
Sincere
- Mestika
here's sample fiddle I did for an earlier example, link
I would suggest you maybe use the jQuery to add a class to the nth-child (I've done so for the "yellow" class), then add the rules to the CSS with the others, though note that the classed rule can't be grouped with the nth-child original selector which may not be a duplication problem if you're using it for a filter anyway ;)
You could try IE9.js: http://code.google.com/p/ie7-js/
Just include the Javascript file in your page, and your nth-child CSS should work properly in IE.
Someone else has already mentioned Dean Edwards' ie7/ie8/ie9.js, which tries to retro-fit a whole range of broken and missing features into IE.
You could also try Selectivizr, which concentrates on adding advanced CSS selector support to IE. It requires another library such as JQuery to do the heavy lifting of the working with the selectors, but since you specified that in the question anyway, it should be a good fit for you.
Is that the exact code you are using, because the nth-childpart is ok, the syntax for the .css() call is completely wrong.
Drop the space and the colon from the first parameter ('filter') and the second parameter has to be a string to.

CSS2 selectors and IE

I'd like to use CSS2 selectors ( parent > child, element:first-child, etc) in my stylesheet but IE6 doesn't seem to recognize those. Is there any plugin (jQuery preferably) that would allow me to use pseudo-selectors freely without worrying about the damned IE6?
UPDATED:
The Super Selectors jQuery plugin scans the page's styles for selectors which aren't supported by all browsers and then adds apropriate classes to elements that those CSS3 selectors are targeting.
You can also look at this CSS3 selectors for IE5/IE8 called ie-css3.js
I'd recommend against using javascript to fix those kind of problems.
The best approach I've found is using conditional comments and create a IE only CSS file, optimized for that hellish browser.
In the long run, the small duplication of work is compensated by the smaller amount of incompatibilities that you'd have to correct between sane browsers and IE.
As a rule, I go with adding classNames to the body tag via conditional comments as my preferred method to deal with cross-browser difficulties.
However, if that's out and if performance is not a concern, you can always give Dean Edwards's excellent IE7.js a try. It will parse and grok your stylesheet, picking out and implementing those unsupported selectors.
Beware that, as your stylesheets increase and size and complexity, the script's (and your site's) performance will suffer in IE6. However, in a lot of cases things should run just fine. Make sure to conditionally comment it in for IE6 and below and you'll be set.

need a javascript or jquery library to convert xpath to selectable CSS3 format in jquery

how can i convert xpath like
/html/body/div[3]/ul/li[1]/a[5]
html > body > div[3] > ul > li[1] > a[5]
i believe, index is not supported with CSS3 selectors....so how to deal with this ?
If you find that Sizzle/jQuery can't apply your CSS3 selector it might be better to use the XPath plugin which was part of the original release of jQuery (and then removed since few people actually used it).
XPath implementations in browsers tends to be much faster than the CSS engines. Also having JS parse & convert an XPath expression into CSS3 then having jQuery munge that into something the browser can implement (generally CSS2.1 selectors with a bit of JS assistance) is going to be much slower than executing the XPath directly in the browser.
Not only that, but there are things that XPath can do that CSS can't. For example:
//h3[class="blog-title"]/../../div[class="blog-entry"]//input[fn:floor(value) > 3]
which isn't overly complex for XPath to execute, but impossible for CSS alone - moving back up the DOM and executing a function as part of the expression can't (to my knowledge) be done yet, even in CSS3.
Selenium 1′s CSS locator engine moved from CSSQuery to Sizzle, jQuery’s CSS selector library.
So you can convert
div[3]/ul/li[1]/a[5]
to
css=div:nth(3)>ul>li:nth(1)>a:nth(5)
and
//h3[class="blog-title"]/../../div[class="blog-entry"]//input[#value=3]
can be converted to
css=h3.blog-title:parent(div.blog-entry) input[value=3]
however //input[#value>3] cannot be possible or be tricky
For more info visit: https://github.com/jquery/sizzle/wiki/Sizzle-Home
the xpath implementation in IE is very, very slow. even terrifying slow in IE6 thats why most tend to use CSS selectors based on regex etc. like sizzle or the newest is qwery.
for a index select you use in CSS the selector :nth-child(n)
a[5] = :nth-child(5)
i cant remember if it starts with 0 or 1 so it could also be 4.
also if you have different types of children within the parent you are selecting in, you can use :nth-of-type() which selects only the given type. in your case:
a:nth-of-type(5)
Searched for quite a bit and finally found these 2 libraries. Hope it helps someone as lost as me:
James Padolsey's CSS2XPATH that was used by YQL HTML at one point of
time
css2xpath - A generic CSS to XPath transformer
As this is quite a niche area, I welcome the community to make edits to this.

Categories