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