Last-child pseudo selector test

[laustdeleuran]

I don't know how this is merged into Modernizr, but I've added the last-child pseudo selector test the feature-detection folder. The script has been tested in FireFox 3.0+, Chrome 7, 10, 11,12, IE6-9, Safari 4.0+ and Opera 11.

It would probably be a good idea to test the script in FireFox 1.0-2.0 and Safari 1.3-2.0. I haven't been able to perform test in those browsers.

[paulirish]

Cool! LGTM.

i'll pull once this gets a few more eyes.

[ryanseddon]

This could be shortened quite a bit by using the exposed methods, you could write it like this:

Modernizr.testStyles("#modernizr :last-child{width:200px;display:block}",function(elem){
    return elem.lastChild.offsetWidth === 200;
},1);

I haven't thoroughly tested it but it could be a start?

[paulirish]

is that ,1 arg necessary? i dont really get it.

[paulirish]

also i guess you're lucky since #modernizr has a child of the style attribute, right? thats why this children-dependent thing works with this api?

[ryanseddon]

Yeah you're right can probably scrap that last arg, it's injecting an extra div but we don't really need it.

[ryanseddon]

yeah style is a child of the #modernizr element, that's why I add display:block so offsetWidth will return an actual value.

[laustdeleuran]

@ryanseddon you need to children to test against each other, as the :last-child slector selects ALL chiildren in Safari up to and including 3 (see http://reference.sitepoint.com/css/pseudoclass-lastchild).

EDIT: Oops, hit the close button by mistake.

[emilchristensen]

@ryanseddon As @laustdeleuran said, we need multiple children in order to prevent a false positive in Safari 3.0 and below. Without having the ability to test in Safari 3.0 or less I can't say for sure, but in theory this could work:

    Modernizr.testStyles("#modernizr div {width:100px} #modernizr :last-child{width:200px;display:block}", function(elem) {
        return elem.lastChild.offsetWidth > elem.firstChild.offsetWidth;
    }, 1);

As @paulirish established modernizr injects a style element. This is done in the end just before the innerHTML, making the style tag the last child. The idea is that if we put in a div that will become a child of #modernizr too, and thus will get selected by Safari 3.0 and less.

EDIT: Fixed codeblock

[BrunoDeBarros]

@emilchristensen Codeblocks are done with four spaces preceding each line of code! :)

[emilchristensen]

Doesn't work for me :(
The standard examples in the help for "Github Flavored Markdown" doesn't work either. Everything renders as if it's inline.

But it seems 4 spaces works.

EDIT: Now it works! Just had to play around with it abit! 4 spaces before each line inside the 3 backticks seemed to do the trick :) (Sry I'm new on the comments section on GitHub)

[paulirish]

:) no worries, emil.

[getdave]

What happened to this test? Will it be included?

[paulirish]

we are waiting for this PR to be updated with the new revised (and smaller) test.. emil and laust were looking to tackle it this weekend i believe.

[laustdeleuran]

Yeah. Heading off to london in a minute, tho, so wont get around to test till mid next week. Hope that's sufficient :)

[laustdeleuran]

Sry - bad craziness all around when I got back from London (both personal and work). I've ported the above test to

http://jsfiddle.net/laustdeleuran/3rEVe/

We've tested all modern browsers on both PC and Mac (Chrome, FireFox, Opera, Safari, IE9), and the test work perfectly. Also works in Chrome 7, FireFox 3.6 IE7 and IE8 on Windows. Edge-cases (Safari 2, FireFox2 and IE6) haven't been tested yet in this new version, but how thorough do you need me to be? There's a bit of work involved getting near those version, as I don't have them "at hand".

[ryanseddon]

Awesome, I just tested in IE6 and FF2 and the test is returning what I expected. Have you updated the pull request?

[laustdeleuran]

@ryanseddon perfect! Haven't updated the request yet, but will (hopefully today) - I just need to get @emilchristensen to help me with this Github thing (which kind of challenges my nerdiness :))

[hron]

Any updates on this test? I would like to have this included in Modernizr and happy to help with it.

[trev]

I'll chuck a vote in favour of this as well.

[paulirish]

@laustdeleuran and @emilchristensen can we get this PR updated? thanks!

[laustdeleuran]

Yeah. Will talk to emil about it on monday. Sorry. Have been swanped with
regular work.

fredag den 11. maj 2012 skrev Paul Irish :

@laustdeleuran and @emilchristensen can we get this PR updated? thanks!

---

Reply to this email directly or view it on GitHub:
#304 (comment)

Mvh. Laust Johan Deleuran
Designer & Webudvikler
E-mail: ljd@ljd.dk
Web: http://ljd.dk

[emilchristensen]

Test in Opera 9 (first version of Opera 9) and correctly fails.

[paulirish]

awesome. pulling.

[es6Test]

If I just include modernizr will :last-child just work on a ie8 stylesheet? I done that and it didn't work.

[phistuck]

@es6Test -
Modernizr does not add features to the browser, it only detects whether the features are supported.

If you selected HTML5Shiv, though, HTML5Shiv (not Modernizr) makes the browser recognize HTML5 elements as unknown elements (as opposed to empty nodes that cannot be laid out using CSS).

[es6Test]

I see, I usually just do that by checking if the api is not undefined with vanillajs.

[phistuck]

@es6Test - for JavaScript features, this is pretty easy, yes. For prefixed CSS properties, for example, it gets trickier.