Although the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.
No surprise that the biggest selector problems occur in connection with IE6.
| CSS Selector | Incompatible Browser(s) | jQuery/CSS Syntax |
|---|---|---|
| Chained classes | IE6 (no support) | $(“p.one.two.three”) |
| ID and class on the same element | IE6 (buggy support) | $(“#one.two”) |
| Attribute Selector | IE6 (no support) All Other Browsers (buggy) |
$(“p[style]”) |
| CSS3 Attribute Selectors | IE6 (no support), IE7/8 (buggy) |
$(“a[href^=’http:’]”) $(“a[href$=’pdf’]”) $(“div[style*=’border’]”) |
| Child Selector | IE6 (no support) | $(“div>span”) |
| Adjacent Sibling Selector | IE6 (no support), Safari (buggy) |
$(“p+span”) |
| General Sibling Selector (CSS3) | IE6 (no support), IE7/8 (buggy) |
$(“p~span”) |
| First Child pseudo-class | IE6 (no support), Some Other Browsers (buggy) |
$(“li:first-child”) |
If you want detailed information on what each selector is supposed to do, see the selector section in the SitePoint CSS Reference.
Great, very useful.
Yes we must stop supporting ie6.
Danke für diesen nützlichen Artikel.
I sense a trend in this chart, like all of the problems are coming from one company…
Anyway, I like this very much. I would only advise that, for essential styles, you rely on non-javascript methods. In particular, I give form elements a classname that matches the “type” attribute. Then I base the css on the classname, not the “type” attibute. For example,
Okay, no angle brackets. Gotcha. Here’s my example again: <input type=”checkbox” class=”checkbox” />
That’s actually a very interesting idea. The only problem is that if you do that for all your elements, then it adds way too much clutter to your HTML.
Also, there are some cases where you only want to target elements with user-created inline styles, so in that case, the element couldn’t have the class added to it.
That’s very smart. I knew this JQuery synthax but I had never thought of using it to make buggy selectors work on IE6 :)
I like it, as well the comment rule too :)
what about Opacity ? when using $(div).css(‘opacity’,’0.5′), it works in all browsers and no need filter also, very important.
Opacity is a CSS property. The chart in this article is dealing with CSS “selectors”.
I seen many people not using >, [attr] and multiple classes in jQuery, because they not using it in css, because ie6 does not support these css rules (though it works in jquery).
You’re absolutely right. Yesterday at work, I was talking to a developer who is MUCH better at JavaScript and jQuery than I am, and he had no idea you could use the direct child selector (>). This despite that he can run circles around me in any code/language (except HTML/CSS, of course).
Have any ideia of how make jQuery check browser, read css and get ‘unssuported’ rules and run “.css” on every rule inside {}
At all, how to read css files? Will be very cool add an script on end of page to read all CSS files and fix all rules
That sounds like a very interesting solution, because it would keep your CSS in the stylesheet, where it belongs. Then, later, when the unsupporting browsers fall out of use, you could just delete the jQuery code, and everything would still work fine.
I’m sure there are scripts available that accomplish something like this. Would definitely be worth looking into.
There is this mighty js library called ie-7.js :
http://code.google.com/p/ie7-js/
It gives both ie6, 7, 8 and future ie9 a normal modern web broswer rendering and support all these css features, even more !
I’m sorry, but I don’t see the advantage of using jQuery to fix web browsers’ CSS support that way.
Well, you address specific items with jQuery which can not be achieved with pure CSS. Now what do you do next? Add inline CSS rules? Bad. Add a certain class to the item and attach rules to it in your CSS file? In that case you might as well attach this class to your item “by hand”, writing it in your HTML code.
So what’s the use?
Christian,
You’re right, it takes away a lot of practicality, and it forces you to put CSS in your JavaScript. But it’s just an option to consider.
For example you could do something like this:
$("div>span").css("width", "100px");So, while this sounds good in theory, you’re absolutely right, it’s not the most practical solution, and could cause more trouble than it’s worth.