New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

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

@paulirish

This comment has been minimized.

Member

paulirish commented Jun 17, 2011

Cool! LGTM.

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

@ryanseddon

This comment has been minimized.

Member

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?

@paulirish

This comment has been minimized.

Member

paulirish commented Jun 17, 2011

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

@paulirish

This comment has been minimized.

Member

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?

@ryanseddon

This comment has been minimized.

Member

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.

@ryanseddon

This comment has been minimized.

Member

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.

@laustdeleuran

This comment has been minimized.

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.

@emilchristensen

This comment has been minimized.

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

@BrunoDeBarros

This comment has been minimized.

BrunoDeBarros commented Jun 18, 2011

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

@emilchristensen

This comment has been minimized.

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)

@paulirish

This comment has been minimized.

Member

paulirish commented Jun 18, 2011

:) no worries, emil.

@getdave

This comment has been minimized.

getdave commented Sep 29, 2011

What happened to this test? Will it be included?

@paulirish

This comment has been minimized.

Member

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.

@laustdeleuran

This comment has been minimized.

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 :)

@laustdeleuran

This comment has been minimized.

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

@ryanseddon

This comment has been minimized.

Member

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?

@laustdeleuran

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

trev commented Apr 2, 2012

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

@paulirish

This comment has been minimized.

Member

paulirish commented May 11, 2012

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

@laustdeleuran

This comment has been minimized.

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

@emilchristensen

This comment has been minimized.

Contributor

emilchristensen commented May 22, 2012

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

@paulirish

This comment has been minimized.

Member

paulirish commented Jun 20, 2012

awesome. pulling.

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

Merge pull request #304 from laustdeleuran/master
Last-child pseudo selector test

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

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

Merge branch 'master' of github.com:Modernizr/Modernizr
* 'master' of github.com:Modernizr/Modernizr: (256 commits)
  adding metadata for lastchild selector test. ref Modernizr#304
  death to the URL scheme!
  update Modernizer.flexbox to support both WD and LC implementations. fixes Modernizr#611
  Revert "new flexbox test got shuffled because the property was renamed. fixes Modernizr#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 Modernizr#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 Modernizr#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 Modernizr#584)
  Updated to new version, ref. Modernizr#304 (comment)
  Removing the `testBundle` method fixes Modernizr#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.
  ...

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

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

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

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

Merge branch 'master' of github.com:Modernizr/Modernizr
* 'master' of github.com:Modernizr/Modernizr: (256 commits)
  adding metadata for lastchild selector test. ref Modernizr#304
  death to the URL scheme!
  update Modernizer.flexbox to support both WD and LC implementations. fixes Modernizr#611
  Revert "new flexbox test got shuffled because the property was renamed. fixes Modernizr#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 Modernizr#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 Modernizr#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 Modernizr#584)
  Updated to new version, ref. Modernizr#304 (comment)
  Removing the `testBundle` method fixes Modernizr#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.
  ...
@es6Test

This comment has been minimized.

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.

@phistuck

This comment has been minimized.

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

This comment has been minimized.

es6Test commented Dec 22, 2015

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

@phistuck

This comment has been minimized.

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