Как использовать modernizr для border-image

Question

Мне нужно поддерживать IE10 и на моем CSS. Я использую border-image, что на IE10 < не поддерживается. У моего модернизатора уже есть поддержка border-image, но я не могу понять, как его использовать для моего класса. Например, если у меня есть класс, как

.funz__box { border-style: solid; 
border-width: 30px 30px 30px 25px; 
-moz-border-image: url(../i/tmp/border_funz.png) 30 30 30 25; 
-webkit-border-image: url(../i/tmp/border_funz.png) 30 30 30 25; 
-o-border-image: url(../i/tmp/border_funz.png) 30 30 30 25; 
border-image: url(../i/tmp/border_funz.png) 30 30 30 25 fill; } 

Для поддержки IE 10 мне просто нужно создать класс, как:

.no-borderimage .funz__box { /* my stile */ } 

Или есть что-то еще, что я должен делать?

Answer 1

Вот простой пример с JQuery:

CSS:

.borderimage_class{ 
    border-style: solid; 
    border-width: 30px 30px 30px 25px; 
    -moz-border-image: url(../i/tmp/border_funz.png) 30 30 30 25; 
    -webkit-border-image: url(../i/tmp/border_funz.png) 30 30 30 25; 
    -o-border-image: url(../i/tmp/border_funz.png) 30 30 30 25; 
    border-image: url(../i/tmp/border_funz.png) 30 30 30 25 fill; 
} 

.no_borderimage_class{ 
    //styles 
} 

JS:

if(Modernizr.borderimage){ 
    //true - supports 
    $('.some_element_class').addClass('borderimage_class'); 
} 
else{ 
    //false - doesn't support 
    $('.some_element_class').addClass('no_borderimage_class'); 
} 

JSFiddle - <p> меняет цвет на основе поддержки borderimage. Проверьте его в IE10 и другом браузере, поддерживающем borderimage, и вы увидите изменение.

Answer 2

Вам совсем не нужно прикасаться к JQuery - вы можете сделать все это в CSS, вам просто нужно добавить .borderimage и .no-borderimage перед тем, что вы хотите по стилю. Например:

.borderimage #header_right{ 
//the CSS you want to apply to element ID header_right when border-image IS supported 
} 

.no-borderimage #header_right{ 
//the CSS you want to apply to element ID header_right when border-image is NOT supported 
} 

.no-borderimage #header_logo{ 
//some more CSS that I only want applied to element ID header_logo when border-image is NOT supported 
} 

Я просто использовал это на моем сайте, и она прекрасно работает