jQuery: cosa fare quando la proprietà box-sizing non è supportata

Una prassi comune nel layout con i CSS è aggiungere dello spazio tra il testo di un elemento ed i suoi limiti esterni. Il problema sorge quando l'elemento ha già una larghezza dichiarata. In questo caso aggiungere del padding distruggerebbe il box model dell'elemento. I CSS3 forniscono la proprietà box-sizing, ma questa proprietà non è supportata da tutti i browser. In questo caso possiamo usare jQuery.

Di solito creiamo manualmente la seguente struttura HTML:

<div class="box">
	<div class="gutter"><!-- testo --></div>
</div>

Possiamo automatizzare questo processo con jQuery:

(function ($) {
    $.fn.gutter = function (options) {
        var settings = {
            tag: 'div',
            className: 'gutter'
        };

        options = $.extend(settings, options);

        return this.each(function () {
            var $element = $(this),
                element = $element[0];
            if (element.firstChild.nodeType == 3) {
                var wrapper = '<' + options.tag + ' class="' + options.className + '"></' + options.tag + '>';
                $element.wrapInner(wrapper);
            }

        });

    };


})(jQuery);

Esempio:

$(function () {
    $('div.box').gutter();

});