Modernizer Polyfill vs Prefixed CSS3

Question

I am using a polyfill so that box-sizing should work with all JS enabled browsers to prevent the layout problems which looks like this:

<script type="text/JavaScript">
//extend modernizer
Modernizr.addTest("boxsizing", function() {
    return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
    });
$(function(){
    if( !($('html').hasClass('boxsizing')) ){
        $('.boxSized, .boxSized *').each(function(){
            var fullW = $(this).outerWidth(),
                actualW = $(this).width(),
                wDiff = fullW - actualW,
                newW = actualW - wDiff;

            $(this).css('width',newW);
        });
    }
});

</script>

However looking at this code when ever a browser doesn't have box-sizing: enabled it will resort to the use of this short polyfill which I don't think should impact site performance to much ?

My problem is as follows at the moment I am using prefixed elements e.g.

-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

I am wondering if the prefixed elements are now redundant as the polyfill overrides them or if there is still benefit to having them etc?

Answer 1

Modernizr will include those prefixed styles in its detection, so yes, you should keep them.

If you drop them, then your site will break because browsers which require a prefix will be detected by Modernizr as supporting the feature and thus and won't run the javascript code, so you won't have the style at all for those browsers.

The Javascript code will only be used by IE7^* or earlier, where the box-sizing style is not supported at all.

(^* ...or other really old browsers like Opera 9 or Firefox 1, but realistically no-one is using those)

Answer 2

the polyfill you using isn't really good for performance.. so you better use this polyfill for IE 6/7. and use this snippet for everything else since box-sizing is supported in every browser as you can see in this table.

* {
    -webkit-box-sizing: border-box; /* Webkit browsers chrome/safari */
    -moz-box-sizing: border-box; /* Firefox */
    box-sizing: border-box;
}

NOTE : box-sizing is supported in IE 6 and earlier in quirks mode.