In this second article I will break down the remainder of the CSS selector tests that I first discussed in part one of this mini series.
As I alluded to earlier, it is not all doom and gloom with respect to the support that IE7 has with CSS selectors. In fact, as we’ve seen in the results so far, the failures have been pretty minimal.
However, something tells me that this is all about to change…
:lang() selector (5 out of 11 failed)
As the results show, this one fails on just about half of the tests, and unfortunately on the ‘key’ ones, as follows:
:lang(en)does not match<div lang=”en”></div>
There are no workarounds for this and so this selector cannot be used within IE7.
:before, ::before, :after, ::after selectors (all fail)
Frustrating that IE7 does not support any of these selectors. In my opinion, these are the most useful and important selectors of the bunch. Think about it – how often has a design your working on called for rounded corner boxes? Using these selectors there is no need for extra (and messy) HTML elements to get the job done, as it can all be done with one HTML element. But alas, we’ll have to wait until IE8 becomes mainstream.
:first-letter, :first-line selectors (pass); ::first-letter, ::first-line selectors (fail)
I wouldn’t say these are useless selectors, but yah, come on, they’re pretty close to it. I’ve yet to find a need for using these in any project I’ve been a part of. I’m sure there are some good uses for them, and would love to see some nifty examples of how you incorporated them into your templates.
E[foo^=bar] selector (3 out of 20 failed)
an E element whose "foo" attribute value begins exactly with the string "bar"
Source: W3C Selected Level 3
Very good results for this test; only failures occur when you attempt to add multiple values to an attribute. Below are three examples of where this selector fails:
-
div[align^=left]will not match<div align='leftright'></div> -
div[align^=left]will not match<div align='left right'></div> -
div[align^=left]will not match<div align='left-right'></div>
I can see where this could lead to problems, but for the most part you should be able to use this selector without to many problems.
E[foo$="bar"] selector (3 out of 20 failed)
an E element whose "foo" attribute value ends exactly with the string "bar"
Source: W3C Selected Level 3
Basically the results for this selector are identical to the one above – with each of the three failures occurring in the same areas, so again, you are going to have very few issues with this selector once implemented.
E[foo*="bar"] selector (3 out of 16 failed)
an E element whose "foo" attribute value contains the substring "bar"
Source: W3C Selected Level 3
The three failures with this selector, although similar to the two selectors above, are a bit more serious and problematic in nature – to the point where I believe this selector is unusable in IE7. It will fail anytime an attribute has more than one value or if that value is a substring. In other words, although the test results look pretty good, the reality is that this selector is unusable in IE7.
E ~ F selector (pass)
Good to see, as this can be extremely useful – especially when dealing with varying margins between certain elements. I find that in a lot of the designs I work on that there is a greater margin space between an <h2> and a <p> or <ul> than there is between an <h2> and <h3>, as one of many examples.
Stay tuned as I wrap this series up with a third and final article. Unfortunately it will not be a case where I keep the best results for last – in fact its going to get downright ugly, but hopefully there’ll be a small ray of light somewhere in there 
