2015-01-22 3 views
8

Я хочу использовать свойство CSS в:Тестирование CSS "микс-совмещенного режима"

mix-blend-mode: soft-light; 

И я испытает на Modernizr для запасной вариант бла-бла ...

Испытано:

Modernizr.mixblendmode //undefined 
Modernizr.testProp('mixblendmode'); //false 
Modernizr.addTest('mixblendmode'); // no-mixblendmode 

Что мне не хватает?

Протестировано на Firefox, CSS его работа, но как протестировать с помощью Modernizr?

+0

Пожалуйста скажите почему -1 и вне темы? – l2aelba

ответ

11

Понял:

Modernizr.addTest('mix-blend-mode', function(){ 
    return Modernizr.testProp('mixBlendMode'); 
}); 

(или без Modernizr)

if('CSS' in window && 'supports' in window.CSS) { 

    var support = window.CSS.supports('mix-blend-mode','multiply'); 

    /* Add class like Modernizr */ 
    /* -- jQuery -- */ 
    $('html').addClass(support?'mix-blend-mode':'no-mix-blend-mode'); // jQuery 
    /* -- Pure JS -- */ 
    document.getElementsByTagName('html')[0].className += support ? ' mix-blend-mode' : ' no-mix-blend-mode'; 
    /* -- Pure JS (IE9+) -- */ 
    document.querySelector('html').classList.add(support ? 'mix-blend-mode' : 'no-mix-blend-mode'); 
} 

(или CSS)

@supports(mix-blend-mode:multiply) { 

} 

Ref: https://dev.opera.com/articles/getting-to-know-css-blend-modes/

Могу ли я использовать: http://caniuse.com/#feat=css-mixblendmode

3

Modernizr не поддерживает это в настоящее время. Из Modernizr/issues/1388:

Unfortunatly, «[...] в некоторых браузерах, смешивать-смесь-режим реализован, свойство действительно, автоматизированные тесты проходят, но не смешивание на самом деле не происходит» - http://blogs.adobe.com/webplatform/2013/09/12/browser-support-matrix-for-css-blending/

+0

:(aha .... большое спасибо, но любая альтернатива? – l2aelba

+0

@ l2aelba не очень. Вы можете создать тест, подобный [background-blend-mode] (https://github.com/Modernizr/Modernizr/pull/ 1392/files), но вы все равно не знаете наверняка, действительно ли браузер что-то делает. – Stijn

+0

'window.CSS.supports ('mix-blend-mode', 'soft-light');'? – l2aelba

 Смежные вопросы

  • Нет связанных вопросов^_^