Установка префикса -os - / - ms для градиента фона в jQuery не работает? - PullRequest
Новая
       17

Установка префикса -os - / - ms для градиента фона в jQuery не работает?

2 голосов
/ 16 февраля 2012

Я видел несколько других постов, касающихся jQuery .css(), не работающих с -webkit-gradient, однако мне еще не удалось найти ни одного, относящегося к -ms-linear-gradient, -o-linear-gradient и linear-gradient.

Короче говоря, я создал функцию, которая устанавливает градиент фона на основе #hex для элемента, используя все самые популярные свойства CSS для кросс-браузерной совместимости, взятые непосредственно из ColorZilla .

Вот фрагмент кода, о котором я говорю: 

$(elem).css({
        'background': b,
        'background': '-moz-linear-gradient(top,  '+a+' 0%, '+b+' 100%)', 
        'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))',
        'background': '-webkit-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
        'background': '-o-linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'background': '-ms-linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'background': 'linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0 )'
        });

Я разместил комментарий //breaks execution рядом с каждым изсвойства, которые, когда активны (или коллективно, или индивидуально), нарушают выполнение скрипта (никакие другие свойства, например, background: b (b, конечно, является переменной), не установлены.

Я абсолютно озадачен какпочему это так.

Пока я пробовал:

  • Использование двойных кавычек вместо одинарных.
  • Замена переменнойиспользование (+a+, +b+) с фактическими гексами.

Я думаю,Возможно, в этих трех есть персонаж, которого нужно убежать или что-то в этом роде?

Любая помощь в выяснении, почему это так, будет принята с благодарностью!

1 Ответ

6 голосов
/ 16 февраля 2012

Вы устанавливаете и повторно устанавливаете свойство background объекта JavaScript снова и снова.

В конце концов, если вы попытаетесь зарегистрировать объект, который вы передаете .css(), вы увидите, что он содержит только 2 свойства: последнее значение background в списке и filter.

Ваш код эквивалентен: 

$(elem).css({
    'background': 'linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0 )'
});

Вместо этого вы можете попробовать что-то подобное ( jsfiddle demo ): 

var i, l, backgrounds = [
    '-moz-linear-gradient(top,  '+a+' 0%, '+b+' 100%)', 
    '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))',
    '-webkit-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    '-o-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    '-ms-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    'linear-gradient(top,  '+a+' 0%,'+b+' 100%)'
];

// Try each background declaration, one at a time
// Like in a stylesheet, the browser should(!) ignore those
// it doesn't understand.
for( i = 0, l = backgrounds.length ; i < l ; i++ ) {
    $(elem).css({ background: backgrounds[i] });
}

$(elem).css({
    'filter': "progid:DXImageTransform.Microsoft.gradient( startColorstr='"+a+"', endColorstr='"+b+"',GradientType=0 )"
});

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

...