Revised version of nativeCSSDetect - this time only allows `(prop, va…

…lue)` interface, because it's probably more common. Also updated `flexbox` and `flexboxlegacy` tests to show how it could be used.
Modernizr · Feb 19, 2013 · 82c9a43 · 82c9a43
1 parent 90b1874
commit 82c9a43
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/feature-detects/css/flexbox.js b/feature-detects/css/flexbox.js
@@ -1,5 +1,12 @@
-define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
+define(['Modernizr', 'testAllProps', 'nativeCSSDetect'], function( Modernizr, testAllProps, nativeCSSDetect ) {
   // The *new* flexbox
   // dev.w3.org/csswg/css3-flexbox
-  Modernizr.addTest('flexbox', testAllProps('flexWrap'));
+  Modernizr.addTest('flexbox', function () {
+    var result = nativeCSSDetect('flex-wrap', 'wrap', true);
+    if (typeof result !== 'undefined') {
+        return result;
+    }
+    // Failing that, do it the old way
+    return testAllProps('flexWrap');
+  });
 });
diff --git a/feature-detects/css/flexboxlegacy.js b/feature-detects/css/flexboxlegacy.js
@@ -1,5 +1,12 @@
-define(['Modernizr', 'testAllProps'], function( Modernizr, testAllProps ) {
+define(['Modernizr', 'testAllProps', 'nativeCSSDetect'], function( Modernizr, testAllProps, nativeCSSDetect ) {
   // The *old* flexbox
   // www.w3.org/TR/2009/WD-css3-flexbox-20090723/
-  Modernizr.addTest('flexboxlegacy', testAllProps('boxDirection'));
+  Modernizr.addTest('flexboxlegacy', function () {
+    var result = nativeCSSDetect('box-direction', 'reverse', true);
+    if (typeof result !== 'undefined') {
+        return result;
+    }
+    // Failing that, do it the old way
+    return testAllProps('boxDirection');
+  });
 });
diff --git a/src/nativeCSSDetect.js b/src/nativeCSSDetect.js
@@ -1,17 +1,35 @@
-define(['injectElementWithStyles'], function ( injectElementWithStyles ) {
+define(['injectElementWithStyles', 'prefixes'], function ( injectElementWithStyles, prefixes ) {
     // Function to allow us to use native feature detection functionality if available.
-    // Only accepts the string notation, i.e.: `nativeCSSDetect('(display:flex)')`, not
-    // `nativeCSSDetect('display', 'flex')`
-    function nativeCSSDetect ( str ) {
-        // Start with the W3C version: http://www.w3.org/TR/css3-conditional/#the-css-interface
+    // Follows `(DOMString property, DOMString value)` interface
+    function nativeCSSDetect ( property, value, isPropPrefixed, isValuePrefixed ) {
+        var propPrefixes = isPropPrefixed ? prefixes : [''],
+            valuePrefixes = isValuePrefixed ? prefixes : [''],
+            i = propPrefixes.length;
+        // Start with the JS API: http://www.w3.org/TR/css3-conditional/#the-css-interface
         if ('CSS' in window && 'supports' in window.CSS) {
-            return window.CSS.supports(str);
+            // Try every prefixed variant, of both property and value
+            while (i--) {
+                j = valuePrefixes.length;
+                while (j--) {
+                    if (window.CSS.supports(prefixes[i] + property, prefixes[j] + value)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
         }
-        // Otherwise fall back to the at-rule for Opera: they made a bit of a hash of
-        // `window.CSS.supports()`, by implementing it as `window.supportsCSS()` which
-        // only supported f(property, value) calls rather than f(conditionText)
+        // Otherwise fall back to at-rule
         else if ('CSSSupportsRule' in window) {
-            return injectElementWithStyles('@supports ' + str + ' { #modernizr { position: absolute; } }', function( node ) {
+            // Build a condition string for every prefixed variant
+            var conditionText = [];
+            while (i--) {
+                j = valuePrefixes.length;
+                while (j--) {
+                    conditionText.push('(' + prefixes[i] + property + ':' + prefixes[j] + value + ')');
+                }
+            }
+            conditionText = conditionText.join(' or ');
+            return injectElementWithStyles('@supports (' + conditionText + ') { #modernizr { position: absolute; } }', function( node ) {
                 return (window.getComputedStyle ?
                         getComputedStyle(node, null) :
                         node.currentStyle)['position'] == 'absolute';