css – 如何测试剪辑路径支持?

前端之家收集整理的这篇文章主要介绍了css – 如何测试剪辑路径支持?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
clip-path:shape()似乎不适用于IE(毫不奇怪)和Firefox(有点惊讶).有没有办法测试剪辑路径支持?我用的是modernizr. (顺便说一句,我知道我可以使用SVG和-webkit-clip-path:url(#mySVG)来使用它

解决方法

你刚才问过这个问题,说实话,我不确定Modernizr是否还没有为此添加支持,但在这种情况下你很容易推出自己的测试.

步骤是:

>创建但不附加DOM元素.
>通过检查新创建的元素的JS样式属性来检查它是否支持任何类型的clipPath(如果它可以支持,则为element.style.clipPath ===”).
>通过使element.style.clipPath等于某些有效的CSS剪辑路径形状,检查它是否支持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;
};

这是一个代码概念验证:http://codepen.io/anon/pen/YXyyMJ

猜你在找的CSS相关文章