Add feature detect for checked pseudo selector #879

Merged
merged 4 commits into from Mar 27, 2013

Projects

None yet

4 participants

@vpegado
Contributor
vpegado commented Mar 26, 2013

When using input elements to store the state of your css classes it is very useful to know if you can use the feature or not.

@stucox
Member
stucox commented Mar 26, 2013

Duplicate of #767 - could you comment on differences between the two implementations?

@vpegado
Contributor
vpegado commented Mar 26, 2013

I couldn't find #767 when looking for this feature test.
The only differences are:

  • in testStyles() #767 uses 2 unnecessary nodes while this don't.
  • in testStyles() #767 checks the value of elem.lastChild.offsetLeft while this checks the appended element directly with cb.offsetWidth

Except for implementation details the tests are equivalent.

@stucox stucox commented on an outdated diff Mar 26, 2013
feature-detects/css/checked.js
@@ -0,0 +1,23 @@
+/*!
+{
+ "name": "CSS :checked pseudo-selector",
+ "caniuse": "css-sel3",
+ "property": "checked",
+ "tags": ["css"],
+ "notes": [{
+ "name": "Related Github Issue",
+ "href": "https://github.com/Modernizr/Modernizr/pull/879"
+ }]
+}
+!*/
+define(['Modernizr', 'createElement', 'testStyles'], function( Modernizr, createElement, testStyles ) {
+ Modernizr.addTest('checked', function(){
+ return Modernizr.testStyles('#modernizr input {width:100px} #modernizr :checked {width:200px;display:block}', function(elem, rule){
@stucox
stucox Mar 26, 2013 Member

Don't need Modernizr. here, can just use return testStyles(... because it's being passed into the module as a dependency

@stucox stucox commented on an outdated diff Mar 26, 2013
feature-detects/css/checked.js
+/*!
+{
+ "name": "CSS :checked pseudo-selector",
+ "caniuse": "css-sel3",
+ "property": "checked",
+ "tags": ["css"],
+ "notes": [{
+ "name": "Related Github Issue",
+ "href": "https://github.com/Modernizr/Modernizr/pull/879"
+ }]
+}
+!*/
+define(['Modernizr', 'createElement', 'testStyles'], function( Modernizr, createElement, testStyles ) {
+ Modernizr.addTest('checked', function(){
+ return Modernizr.testStyles('#modernizr input {width:100px} #modernizr :checked {width:200px;display:block}', function(elem, rule){
+ var cb = document.createElement('input');
@stucox
stucox Mar 26, 2013 Member

Don't need document. here - as above.

@stucox
Member
stucox commented Mar 27, 2013

Great, thanks!

@stucox stucox merged commit af5f597 into Modernizr:master Mar 27, 2013

1 check passed

default The Travis build passed
Details
@adrianjacob-o2

Why cant i see css-checked in the custom build options?

@patrickkettner
Member

It is in master, which is 3.0. It hasn't been added to the 2.7 branch
because it is not a bug fix, but rather a new feature.

If you need it, you will either need to manually edit your modernizr, or
download this repo, and build it yourself.

really sorry for the inconvenience :/

On Tue, Jan 7, 2014 at 10:14 AM, adrianjacob-o2 notifications@github.comwrote:

Why cant i see css-checked in the custom build options?


Reply to this email directly or view it on GitHubhttps://github.com/Modernizr/Modernizr/pull/879#issuecomment-31745326
.

patrick

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