Tôi làm cách nào để thử nghiệm hỗ trợ clip-path?

Question

clip-path:shape() dường như không hoạt động trong IE (không có gì ngạc nhiên) và Firefox (hơi ngạc nhiên). Có cách nào để kiểm tra hỗ trợ clip-path không? Tôi sử dụng modernizr. (Nhân tiện, tôi biết tôi có thể làm việc này bằng cách sử dụng SVG và -webkit-clip-path:url(#mySVG))

Answer 1

Bạn đã hỏi điều này một thời gian trước đây, và thành thật mà nói, tôi không chắc liệu Modernizr chưa thêm hỗ trợ cho điều này, nhưng nó khá dễ dàng để cuộn thử nghiệm của riêng bạn trong trường hợp này.

Các bước thực hiện:

1. Tạo, nhưng không thêm, một phần tử DOM.
2. Kiểm tra xem nó có hỗ trợ bất kỳ loại ClipPath nào không bằng cách kiểm tra thuộc tính JS style của phần tử mới được tạo (element.style.clipPath === '' nếu nó có thể hỗ trợ nó).
3. Kiểm tra xem nó có hỗ trợ hình dạng đường dẫn clip CSS hay không bằng cách tạo element.style.clipPath bằng một số hình dạng đường dẫn clip CSS hợp lệ.

Tất nhiên, nó phức tạp hơn một chút so với khi bạn phải kiểm tra tiền tố của nhà cung cấp cụ thể.

Dưới đây là tất cả với nhau:

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; 
}; 

Dưới đây là một bằng chứng-of-concept codepen: http://codepen.io/anon/pen/YXyyMJ

Answer 2

Bạn có thể thử nghiệm với 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 để xem nó hoạt động.