How to use modernizr for border-image

Question

I need to support IE10 and on my CSS i'm using the border-image that on IE10< isn't supported. My modernizr already has the support for border-image but I can't understand how to use it for my class. For example if I have a class like

 .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; }

In order to support IE 10 do I just need to create a class like:

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

Or is there something else I should do?

Answer 1

Here's an simple example with 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 - the <p> changes color based on borderimage support. Test it in IE10 and some other browser that supports borderimage and you'll see the change.

Answer 2

You don't need to touch JQuery at all - you can do it all in CSS, you just need to add .borderimage and .no-borderimage before what you want to style. For example:

.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 
}

I just used this on my website and it works perfectly