檢查CSS線性漸變支持

支持CSS屬性（邊界半徑這裏）可以通過該代碼進行檢查：檢查CSS線性漸變支持

if(document.createElement('test').style.borderRadius===''){ 
//some code 
}

但什麼纔是我的線性漸變的情況下怎麼辦？聲明如下：

background:linear-gradient(top,bottom,#123,#456);

P.S.我不想使用Modernizr。我想學習如何做到這一點。

來源

2013-09-27 gargsms

燦」你優雅地降低它，所以你不需要檢查它？ – Huangism

你爲什麼不看看modernizr的源代碼..？ – adaam

我擡頭看了Modernizr的源代碼給你。它在嘗試設置漸變之後在backgroundImage上執行字符串搜索。那就是：

https://github.com/Modernizr/Modernizr/blob/dfb4cff564dabcdb65b5957b235c3fa3e5b164eb/feature-detects/css/gradients.js

var str1 = 'background-image:'; 
    var str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));'; 
    var str3 = 'linear-gradient(left top,#9f9, white);'; 

    var css = 
     // legacy webkit syntax (FIXME: remove when syntax not in use anymore) 
     (str1 + '-webkit- '.split(' ').join(str2 + str1) + 
     // standard syntax    // trailing 'background-image:' 
     prefixes.join(str3 + str1)).slice(0, -str1.length); 

    var elem = createElement('div'); 
    var style = elem.style; 
    style.cssText = css; 

    // IE6 returns undefined so cast to string 
    return ('' + style.backgroundImage).indexOf('gradient') > -1;

你或許應該只使用Modernizr的不是複製和或重寫這個自己。有時候人們從第三方那裏借用東西，如果許可證允許的話，這很好，只是試圖保持它與代碼分離，包括許可證和版權信息。

來源

2013-09-27 18:01:11

代碼： test = document.createElement（'test'）; test.style.cssText ='background：-webkit-linear-gradient（to top，＃123，＃456）; background：-moz-linear-gradient（to top，＃123，＃456）; background：-o線性漸變（頂部，＃123，＃456）;背景：-ms-linear-gradient（頂部，＃123，＃456）;背景：線性漸變（頂部，＃123，＃456）' ; if（！（test.style.cssText.indexOf（'gradient'）> - 1）） //代碼改變風格或任何爲我工作得很好。 :) – gargsms

所以它適合你？ –

是的，它的確如此。 @bjorn – gargsms

你絕對可以推出自己的窮人的Modernizr。然而，如果你走這條路線，我建議將所有檢查封裝在瀏覽器驗證對象中以便於使用。這是我做的：

// Check browser capabilities 
var browser = { 
    '3d': testCss('perspective', 'Perspective'), 
    'addEventListener': !!window.addEventListener, 
    'animations': testCss('animationName', 'AnimationName'), 
    'canvas': !!window.CanvasRenderingContext2D, 
    'gradients': testCss('backgroundImage', '', 'background-image:linear-gradient(black,white),radial-gradient(black,white)'), 
    'svg': !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect), 
    'touch': !!('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch) || navigator.msMaxTouchPoints), 
    'transitions': testCss('transitionProperty', 'Transition'), 
    'vw': testCss('width', '', 'width:100vw') 
    }; 

function testCss(sPropStandard, sPropPrefixed, sCss) { 
    var isSupported = false; 
    if (sCss===undefined) { 
    // Check property support 
    var aProps = [ 
     sPropStandard, 
     'Webkit' + sPropPrefixed, 
     'Moz' + sPropPrefixed, 
     'ms' + sPropPrefixed, 
     'O' + sPropPrefixed 
     ]; 
    for (var i=0; i<aProps.length; ++i) { 
     if (aProps[i] in document.documentElement.style) { 
     isSupported = true; 
     break; 
     } 
    } 
    } else { 
    // Check value support 
    var el = document.createElement('temp'); 
    el.style.cssText = sCss; 
    isSupported = el.style[sPropStandard]!==''; 
    delete el; 
    } 
    return isSupported; 
}

現在可以檢查瀏覽器是否支持CSS3漸變與此：

if (browser.gradients) { 
    // Do something with gradients here 
}

同樣，要檢查瀏覽器是否支持SVG：

if (browser.svg) { 
    // Do something with SVGs here 
}

來源

2016-01-30 07:49:30 10basetom

檢查CSS線性漸變支持

回答

相關問題