測試CSS3徑向梯度供應商語法

我遇到了一個問題，我試圖使用基於指定值的JavaScript更新元素的背景漸變。測試CSS3徑向梯度供應商語法

我嘗試這條路線：

elem.style.backgroundImage = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 800, from(#ccc), to(#333)), -moz-radial-gradient('+x+'px '+y+'px, circle cover, #ccc 0, #333 100%)';

由於WebKit和壁虎有CSS3漸變兩種不同的語法，我需要同時指定。但是，上面的代碼不起作用。如果我只有Gecko語法或只是Webkit語法，而不是兩者都可以。

我想你可以檢查CSS漸變支持，但我的問題是，有沒有一種方法來檢查哪些語法需要使用沒有瀏覽器嗅探？請記住，我需要設置我的漸變這種方式，因爲梯度的x和y座標動態變化。

希望這是有道理的，謝謝。

來源

2010-05-22 Scott Christopherson

編輯以下是有用的其他原因，但事實上，我不認爲這有助於OP的問題知道是否使用WebKit或Firefox的symtax！（Doh）它有助於瞭解漸變是否可以使用。

再次編輯但是！看着Modernizr的資源向我們展示瞭如何通過功能測試來做到這一點（他們聰明，那些人）。你也許可以搞清楚自己查看源，但這裏有一個快速砍死在一起例如：

function testGradientSyntax() { 
    var element; 

    element = document.createElement("testsyntax"); 
    element.style.cssText = 
     "background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62))"; 
    if (element.style.background.indexOf("-webkit") >= 0) { 
     // It's WebKit syntax 
     log("This supports WebKit syntax"); 
    } 
    else { 
     // It's not WebKit syntax 
     log("This doesn't support WebKit syntax"); 
    } 
}

您可能需要使用Modernizr這一點。它檢測到relevant syntax，併爲您提供一種使用兩種語法使用單個CSS文件的方法。從文檔

樣品梯度代碼：

button.glossy { 
    background: #ccc url(gloss.png) 50% 50% repeat-x; 
} 
.cssgradients button.glossy { 
    background: #ccc -webkit-gradient(linear, left top, left bottom, 
     from(rgba(255,255,255, .4)), 
     color-stop(0.5, rgba(255,255,255, .7)), 
     color-stop(0.5, rgba(0,0,0, .2)), 
     to(rgba(0,0,0, .1))); 
} 
.cssgradients button.glossy:hover { 
    background-color: #fff; 
}

（編輯在上面，我已經移除了.cssgradients button.glossy規則，看起來對我來說，在文檔中的錯誤年底的線。）

請參見.cssgradients類？當您運行Modernizr時，它會檢測這是否是相關語法，如果是，則將該類添加到您的html元素中，該元素打開後代選擇器.cssgradients button.glossy以便應用規則。

不幸的是，這一切都依賴於啓用了Javascript的瀏覽器。

來源

2010-05-22 07:46:37

感謝T.J.，Modernizer是門票。它並沒有完成我需要完成的任務，但它讓我朝着正確的方向前進，從而獲得我所需要的東西。 – 2010-05-22 08:14:04

@斯科特克里斯托弗森：很好，這很有幫助。我認爲在查看源代碼的同時，我一定在看Modernizr，看看他們是如何進行測試的，所以我的更新可能爲時已晚，但我添加了一個更新，顯示WebKit語法的功能測試。同樣的概念可以應用於'-moz'等。 – 2010-05-22 08:33:23

哈哈耶不久後你張貼Modernizer我去爬過它的源找到漸變部分。 – 2010-05-22 09:04:14

如果有人有興趣，這是我想出的。我相信它可以使用很多改進，但它的工作到目前爲止。

var syntax; 
var syntaxCheck = document.createElement('syntax'); 
var syntaxFound = false; 
while(!syntaxFound) { 

    syntaxCheck.style.backgroundImage = '-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white))'; 
    if(syntaxCheck.style.backgroundImage.indexOf('webkit') !== -1) { 
      syntax = 'webkit'; 
      syntaxFound = true; 
      break; 
    } 

    syntaxCheck.style.backgroundImage = '-moz-linear-gradient(left top,#9f9, white)'; 
    if(syntaxCheck.style.backgroundImage.indexOf('moz') !== -1) { 
      syntax = 'moz'; 
      syntaxFound = true; 
      break; 
    } 
} 

if(syntax == 'webkit') // use -webkit syntax 
else if(syntax == 'moz') // use -moz syntax

來源

2010-05-22 08:21:01

哈哈！偉大的頭腦，我認爲我們都在同一時間這樣做。 :-) – 2010-05-22 08:34:22

哈哈哈不錯！感謝T.J.的幫助。 – 2010-05-22 09:02:59

你根本不需要做任何檢測。只要連續兩次設置element.style.backgroundImage，那些不解析的就會被忽略。

來源

2010-05-22 23:52:15

啊，那是真的。我認爲這樣做會導致問題，但我只是嘗試了它，它仍然有效。那麼我現在的情況不再需要檢測正確的語法，但如果有人有將來會做，他們可以看看這裏。 – 2010-05-23 00:35:12

謝謝，沒有意識到這一點。 – 2014-02-24 11:29:57

測試CSS3徑向梯度供應商語法

回答

相關問題