Как я могу проверить поддержку клипа?

Question

clip-path:shape(), похоже, не работает в IE (неудивительно) и Firefox (немного удивлен). Есть ли способ проверить поддержку клипа? Я использую modernizr. (Кстати, я знаю, что могу заставить это работать с помощью SVG и -webkit-clip-path:url(#mySVG))

Answer 1

Вы задали вопрос об этом некоторое время назад, и, честно говоря, я не уверен, что Modernizr еще не добавил поддержку для этого, но в этом случае довольно легко свернуть собственный тест.

Шаги:

1. Создать, но не добавлять, а DOM элемент.
2. Убедитесь, что он поддерживает любой вид clipPath, проверяя атрибут JS style только что созданного элемента (element.style.clipPath === '', если он может его поддерживать).
3. Убедитесь, что он поддерживает формы пути клипа CSS, делая element.style.clipPath равным некоторой допустимой форме пути клипа CSS.

Конечно, это немного сложнее, так как вам нужно проверить префиксы для конкретных поставщиков.

Вот это все вместе:

var areClipPathShapesSupported = function() { 

    var base = 'clipPath', 
     prefixes = [ 'webkit', 'moz', 'ms', 'o' ], 
     properties = [ base ], 
     testElement = document.createElement('testelement'), 
     attribute = 'polygon(50% 0%, 0% 100%, 100% 100%)'; 

    // Push the prefixed properties into the array of properties. 
    for (var i = 0, l = prefixes.length; i < l; i++) { 
     var prefixedProperty = prefixes[i] + base.charAt(0).toUpperCase() + base.slice(1); // remember to capitalize! 
     properties.push(prefixedProperty); 
    } 

    // Interate over the properties and see if they pass two tests. 
    for (var i = 0, l = properties.length; i < l; i++) { 
     var property = properties[i]; 

     // First, they need to even support clip-path (IE <= 11 does not)... 
     if (testElement.style[property] === '') { 

      // Second, we need to see what happens when we try to create a CSS shape... 
      testElement.style[property] = attribute; 
      if (testElement.style[property] !== '') { 
       return true; 
      } 
     } 
    } 

    return false; 
}; 

Вот codepen доказательство правильности концепции: http://codepen.io/anon/pen/YXyyMJ

Answer 2

Вы можете проверить с Modernizr.

(function (Modernizr) { 

    // Here are all the values we will test. If you want to use just one or two, comment out the lines of test you don't need. 
    var tests = [{ 
      name: 'svg', 
      value: 'url(#test)' 
     }, // False positive in IE, supports SVG clip-path, but not on HTML element 
     { 
      name: 'inset', 
      value: 'inset(10px 20px 30px 40px)' 
     }, { 
      name: 'circle', 
      value: 'circle(60px at center)' 
     }, { 
      name: 'ellipse', 
      value: 'ellipse(50% 50% at 50% 50%)' 
     }, { 
      name: 'polygon', 
      value: 'polygon(50% 0%, 0% 100%, 100% 100%)' 
     } 
    ]; 

    var t = 0, name, value, prop; 

    for (; t < tests.length; t++) { 
     name = tests[t].name; 
     value = tests[t].value; 
     Modernizr.addTest('cssclippath' + name, function() { 

      // Try using window.CSS.supports 
      if ('CSS' in window && 'supports' in window.CSS) { 
       for (var i = 0; i < Modernizr._prefixes.length; i++) { 
        prop = Modernizr._prefixes[i] + 'clip-path' 

        if (window.CSS.supports(prop, value)) { 
         return true; 
        } 
       } 
       return false; 
      } 

      // Otherwise, use Modernizr.testStyles and examine the property manually 
      return Modernizr.testStyles('#modernizr { ' + Modernizr._prefixes.join('clip-path:' + value + '; ') + ' }', function (elem, rule) { 
       var style = getComputedStyle(elem), 
        clip = style.clipPath; 

       if (!clip || clip == "none") { 
        clip = false; 

        for (var i = 0; i < Modernizr._domPrefixes.length; i++) { 
         test = Modernizr._domPrefixes[i] + 'ClipPath'; 
         if (style[test] && style[test] !== "none") { 
          clip = true; 
          break; 
         } 
        } 
       } 

       return Modernizr.testProp('clipPath') && clip; 
      }); 
     }); 
    } 

})(Modernizr); 

Check this codepen для просмотра в действии.