Тест для синтаксиса синтаксиса радиального градиента CSS3

Question

У меня возникла проблема, когда я пытаюсь обновить фоновый градиент элемента с помощью JavaScript на основе значений, которые я указываю.

Я попробовал этот маршрут:

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 и Gecko имеют два различных синтаксиса для CSS3 градиентов, мне нужно указать оба. Однако приведенный выше код не работает. Он работает, если у меня есть только синтаксис Gecko или просто синтаксис Webkit, а не оба.

Я думаю, вы можете проверить поддержку градиента CSS, но мой вопрос в том, есть ли способ проверить, какой синтаксис нужно использовать без браунинга? Имейте в виду, что мне нужно настроить мои градиенты таким образом, так как динамические изменения градиента x и y динамически изменяются.

Надеюсь, что это имеет смысл, спасибо.

Answer 1

Редактировать Ниже приведено полезное по другим причинам, но на самом деле, я не думаю, что это помогает с проблемой OP, чтобы знать, использовать ли WebKit или symatax Firefox! (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 с обоими синтаксисами.

Пример кода градиент от Docs:

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

(Edit В приведенном выше, я удалил линию от конца правления .cssgradients button.glossy, что казалось мне, как ошибки в документации.)

Посмотрите, что .cssgradients класс? Когда вы запускаете Modernizr, он определяет, является ли это соответствующим синтаксисом, и если это добавляет класс в ваш элемент html, который включает селектор потомков .cssgradients button.glossy, чтобы применить правило.

Это, к сожалению, зависит от браузера с включенным Javascript.

Answer 2

Если кому-то интересно, вот что я придумал. Я уверен, что он может использовать много улучшений, но он работает до сих пор.

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 

Answer 3

Вам вообще не нужно вообще обнаруживать. Просто установите element.style.backgroundImage дважды подряд, а те, которые не анализируются, будут проигнорированы.