Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Last-child pseudo selector test #304

Merged
merged 2 commits into from Jun 20, 2012

Conversation

Projects
None yet
10 participants
Contributor

laustdeleuran commented Jun 16, 2011

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.

Owner

paulirish commented Jun 17, 2011

Cool! LGTM.

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

Owner

ryanseddon commented Jun 17, 2011

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?

Owner

paulirish commented Jun 17, 2011

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

Owner

paulirish commented Jun 17, 2011

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?

Owner

ryanseddon commented Jun 17, 2011

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

Owner

ryanseddon commented Jun 17, 2011

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

Contributor

laustdeleuran commented Jun 17, 2011

@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.

@laustdeleuran laustdeleuran reopened this Jun 17, 2011

Contributor

emilchristensen commented Jun 18, 2011

@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

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

Contributor

emilchristensen commented Jun 18, 2011

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)

Owner

paulirish commented Jun 18, 2011

:) no worries, emil.

getdave commented Sep 29, 2011

What happened to this test? Will it be included?

Owner

paulirish commented Sep 29, 2011

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.

Contributor

laustdeleuran commented Sep 29, 2011

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

Contributor

laustdeleuran commented Oct 27, 2011

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".

Owner

ryanseddon commented Oct 27, 2011

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

Contributor

laustdeleuran commented Oct 28, 2011

@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 commented Jan 29, 2012

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

trev commented Apr 2, 2012

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

Owner

paulirish commented May 11, 2012

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

Contributor

laustdeleuran commented May 11, 2012

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

Contributor

emilchristensen commented May 22, 2012

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

Owner

paulirish commented Jun 20, 2012

awesome. pulling.

@paulirish paulirish added a commit that referenced this pull request Jun 20, 2012

@paulirish paulirish Merge pull request #304 from laustdeleuran/master
Last-child pseudo selector test
8818a27

@paulirish paulirish merged commit 8818a27 into Modernizr:master Jun 20, 2012

@SlexAxton SlexAxton added a commit to SlexAxton/Modernizr that referenced this pull request Jul 12, 2012

@SlexAxton SlexAxton Merge branch 'master' of github.com:Modernizr/Modernizr
* 'master' of github.com:Modernizr/Modernizr: (256 commits)
  adding metadata for lastchild selector test. ref #304
  death to the URL scheme!
  update Modernizer.flexbox to support both WD and LC implementations. fixes #611
  Revert "new flexbox test got shuffled because the property was renamed. fixes #611" reverting so i can accept myakura's patch instead.
  whitespace changes in unit tests. thank you editorconfig.
  new flexbox test got shuffled because the property was renamed. fixes #611
  phantomjs toString()s a window different than Chrome does..
  adding .editorconfig to normalize on whitespace standards.
  Don't assume injected style elem is always the last, fixes #588
  Function.prototype.bind polyfill tests.
  whitespace in test suite
  improve fn.bind polyfill formatting. fix linting error.
  whitespace fixes
  Add backgroundPositionXY check
  optimizing test using Modernizr.testStyles() as suggested by @ryanseddon
  removing unneccessary variable and declaration
  Adding test for SubPixel Font Rendering
  update documentation and remove buggyinteractivevalidation flag (fixes Issue #584)
  Updated to new version, ref. Modernizr#304 (comment)
  Removing the `testBundle` method fixes #585  - Affects fontface, touch, csstransforms3d and generatedcontent tests  - Changed csstransforms3d to only inject an element an media query if needed and only have webkit and non prefixed values, see line 646.  - Touch test only injects and element if first statement fails, see line 439.
  ...
e543a2c

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this pull request Feb 22, 2015

@laustdeleuran laustdeleuran Updated to new version, ref. Modernizr#304 (comment) 3087755

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this pull request Feb 22, 2015

@paulirish paulirish Merge pull request #304 from laustdeleuran/master
Last-child pseudo selector test
6b03d8c

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this pull request Feb 22, 2015

@paulirish paulirish adding metadata for lastchild selector test. ref #304 5e7e30a

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this pull request Feb 22, 2015

@SlexAxton SlexAxton Merge branch 'master' of github.com:Modernizr/Modernizr
* 'master' of github.com:Modernizr/Modernizr: (256 commits)
  adding metadata for lastchild selector test. ref #304
  death to the URL scheme!
  update Modernizer.flexbox to support both WD and LC implementations. fixes #611
  Revert "new flexbox test got shuffled because the property was renamed. fixes #611" reverting so i can accept myakura's patch instead.
  whitespace changes in unit tests. thank you editorconfig.
  new flexbox test got shuffled because the property was renamed. fixes #611
  phantomjs toString()s a window different than Chrome does..
  adding .editorconfig to normalize on whitespace standards.
  Don't assume injected style elem is always the last, fixes #588
  Function.prototype.bind polyfill tests.
  whitespace in test suite
  improve fn.bind polyfill formatting. fix linting error.
  whitespace fixes
  Add backgroundPositionXY check
  optimizing test using Modernizr.testStyles() as suggested by @ryanseddon
  removing unneccessary variable and declaration
  Adding test for SubPixel Font Rendering
  update documentation and remove buggyinteractivevalidation flag (fixes Issue #584)
  Updated to new version, ref. Modernizr#304 (comment)
  Removing the `testBundle` method fixes #585  - Affects fontface, touch, csstransforms3d and generatedcontent tests  - Changed csstransforms3d to only inject an element an media query if needed and only have webkit and non prefixed values, see line 646.  - Touch test only injects and element if first statement fails, see line 439.
  ...
8cab977

es6Test commented Dec 22, 2015

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

Contributor

phistuck commented Dec 22, 2015

@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 commented Dec 22, 2015

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

Contributor

phistuck commented Dec 22, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment