Проверка синтаксиса поставщика радиальных градиентов 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

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

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

Редактировать Нижеследующее полезно по другим причинам, но на самом деле, я не думаю, что это помогает решить проблему ОП, заключающуюся в том, использовать ли синтаксис WebKit или 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 для этого. Он обнаруживает соответствующий синтаксис и предоставляет вам возможность использовать один файл 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.