Check, if css3 selector nth-child(odd) is supported

[Peter]

How can I check, using JavaScript, if the CSS3 selector nth-child(odd)
is supported by the browser?

 

[RobG]

How can I check, using JavaScript, if the CSS3 selector nth-child(odd)
is supported by the browser?

Assign a specific value to an element's style property using it, then
check to see if it's been applied using getComputedStyle (or similar
depending on supported features).

 

[RobG]

I don't see how assigning to an element's style property can help here.

You missed the phrase "using it", in other words, use the CSS 3
selector to apply a rule, then check to see if it "worked".

What about inserting a rule (containing selector in question) into a
document; then testing whether an element matched by rule's selector is
affected by declaration?

Yes, that's what I meant.

 

[Thomas 'PointedEars' Lahn]

You missed the phrase "using it", in other words, use the CSS 3
selector to apply a rule, then check to see if it "worked".


Yes, that's what I meant.

That is not "an element's style property", though. Hence the confusion.


PointedEars

 

[RobG]

RobG pisze:



Thank you for your advice. Now I'll write some code to this and see how
this works.

The following, using David Mark's MyLib.js[1] seems to do the job in
Safari, Firefox and IE at least.

<style type="text/css">
tr:nth-child(odd) {
background-color: red;
}
</style>
<script type="text/javascript" src="mylib.js"></script>
<script type="text/javascript">

window.onload = function() {

var r = document.getElementById('table0').rows;
alert(
'row 0: ' + API.getComputedStyle(r[0], 'backgroundColor')
+ '\n'
+ 'row 1: ' + API.getComputedStyle(r[1], 'backgroundColor')
);

}
</script>

<table id="table0">
<tr><td>cell
<tr><td>cell
<tr><td>cell
<tr><td>cell
</table>


1. <URL: http://www.cinsoft.net/mylib.html >

 

[David Mark]

RobG pisze:

Thank you for your advice. Now I'll write some code to this and see how
this works.

The following, using David Mark's MyLib.js[1] seems to do the job in
Safari, Firefox and IE at least.

Cool! AFAIK, it works in virtually everything (and has sat virtually
untouched for 2 years.) Ironic that so many other people see endless
compatibility problems *despite* thousands of patches as progress.

And get that thing while it lasts. I'm getting ready to close that
server down. Most of the best of that code will be in the next Dojo.

<style type="text/css">
  tr:nth-child(odd) {
    background-color: red;
  }
</style>

Can add this dynamically with the addStyle method if needed.

[snip]

 

[SAM]

Le 7/6/09 7:17 PM, David Mark a écrit :

RobG pisze:

The following, using David Mark's MyLib.js[1] seems to do the job in
Safari, Firefox and IE at least.

Cool! AFAIK, it works in virtually everything (and has sat virtually
untouched for 2 years.) Ironic that so many other people see endless
compatibility problems *despite* thousands of patches as progress.

I'm getting ready to close that server down.

Et voilà !
We do not have time to take a look as it disappears from birth!

 

[David Mark]

Le 7/6/09 7:17 PM, David Mark a écrit :

RobG pisze:
The following, using David Mark's MyLib.js[1] seems to do the job in
Safari, Firefox and IE at least.

Cool!  AFAIK, it works in virtually everything (and has sat virtually
untouched for 2 years.)  Ironic that so many other people see endless
compatibility problems *despite* thousands of patches as progress.  

I'm getting ready to close that server down.

Et voilà !
Huh?

We do not have time to take a look as it disappears from birth!

Oh. That's some succinct language you've got. And downloads last
forever. As for the site; it has served its purpose and I don't need
that domain anymore (though I'll keep it for email for the moment at
least.)

 

[RobG]

The following, using David Mark's MyLib.js[1] seems to do the job in
Safari, Firefox and IE at least.

Cool!  AFAIK, it works in virtually everything (and has sat virtually
untouched for 2 years.)  Ironic that so many other people see endless
compatibility problems *despite* thousands of patches as progress.  

And get that thing while it lasts.  I'm getting ready to close that
server down.  Most of the best of that code will be in the next Dojo.

Thanks for the warning, I've grabbed your (sparse) documentation too -
I've been adding a little more detail and am happy to give it back,
but I guess you aren't interested in that now. ;-)

Can add this dynamically with the addStyle method if needed.

Perhaps with MyLib.js, but in general I'd need to determine whether
the library had actually added it as a style rule and let the browser
do the rest, or worked out that the UA didn't support nth-child() and
applied it using its own method.

But that leads to a whole new discussion...

 

[David Mark]

The following, using David Mark's MyLib.js[1] seems to do the job in
Safari, Firefox and IE at least.

Cool!  AFAIK, it works in virtually everything (and has sat virtually
untouched for 2 years.)  Ironic that so many other people see endless
compatibility problems *despite* thousands of patches as progress.  

And get that thing while it lasts.  I'm getting ready to close that
server down.  Most of the best of that code will be in the next Dojo.

Thanks for the warning, I've grabbed your (sparse) documentation too -
I've been adding a little more detail and am happy to give it back,
but I guess you aren't interested in that now. ;-)

Seems a lot of people would miss it. I'm considering leaving it up
another year, but you are right that my interest in it has waned
(years ago.) Hard to believe so many people are still praying to the
jQuery Gods when they (and the jQuery team) had virtually all of the
answers under their noses. Just goes to show that delusions and
programming do not mix (and reading for comprehension is a requirement
for this discipline.)

Thanks for working on the docs. I'll let you know what I decide with
regard to the site (if I keep it online, I'll add your changes.)

Perhaps with MyLib.js, but in general I'd need to determine whether
the library had actually added it as a style rule and let the browser
do the rest, or worked out that the UA didn't support nth-child() and
applied it using its own method.

I forgot the name of the method as well (addStyleRule.) I do agree
that it would add lots of variables. A simple document.write in the
head (or static markup as in your example) would be better for this
test.

But that leads to a whole new discussion...

No, you are right.