Простое определение градиента CSS

Question

Поэтому мне нужно определить, поддерживает ли браузер пользователя градиенты CSS, вот и все. Я бы использовал Modernizr, но даже с учетом обнаружения градиента, это было бы расточительно по сравнению с тем, чтобы просто сделать это самостоятельно.

Как я понимаю, это было бы, как это сделать;

1. Создание элемента, который не добавляется к DOM
2. Установка background-image в linear-gradient со всеми префиксы
3. Чтение background-image и проверка gradient, чтобы увидеть, если он все еще там

Я не мог понять, источник Истории, хотя, в чем суть того, что они делают в этом? Поэтому я могу сделать это сам.

Answer 1

Их испытание действительно основная, и вы можете просто извлечь его:

function supports_gradients() { 
    /** 
    * For CSS Gradients syntax, please see: 
    * webkit.org/blog/175/introducing-css-gradients/ 
    * developer.mozilla.org/en/CSS/-moz-linear-gradient 
    * developer.mozilla.org/en/CSS/-moz-radial-gradient 
    * dev.w3.org/csswg/css3-images/#gradients- 
    */ 

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

    setCss(
     // 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) 
    ); 

    return contains(mStyle.backgroundImage, 'gradient'); 
}; 

Для этой работы вы также должны извлечь и setCss(), если вы не получили свои собственные версии этих методов (скажем, из jQuery).

Answer 2

Просто для того, чтобы добавить точный код, который я использовал для справки. Вот оно:

var mElem = document.createElement('modern'), 
    mStyle = mElem.style; 

mStyle.backgroundImage = "linear-gradient(left top, #9f9, white)"; 
mStyle.backgroundImage = "-o-linear-gradient(left top, #9f9, white)"; 
mStyle.backgroundImage = "-moz-linear-gradient(left top, #9f9, white)"; 
mStyle.backgroundImage = "-webkit-linear-gradient(left top, #9f9, white)"; 
mStyle.backgroundImage = "-ms-linear-gradient(left top, #9f9, white)"; 
mStyle.backgroundImage = "-webkit-gradient(linear, left top, right bottom, from(#9f9), to(white))"; 

if (mStyle.backgroundImage.indexOf("gradient") == -1) alert("Gradients are not available. Get a better browser and try again."); 

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