jQuery 1.8 box-sizing: width (), css ("width") and outerWidth ()

One of the great new features in jQuery 1.8 is the built-in understanding of the box-sizing: border-box property, which is supported by all modern browsers. (IE6 and IE7, smoke on the sidelines, as I said, with modern browsers.)

Note: The box-sizing CSS property is introduced in the CSS3 standard, and can have two values: the content-box corresponds to the CSS2 standard and is the default value, while the width and height properties specify the width and height of the content and do not include the values indents, margins and borders, the new value of the border-box tells the browser that the width and height properties should include the values ​​of the margins and borders, but not the margins.

If you show people with borders on the screen and ask them to indicate the width of the element, then they naturally consider it from the outer borders of the border. But this is not how it works in CSS in the default content-box mode. Normally, the width and height in CSS only include the width and height of the content inside the borders and padding . As a result, when layout (and using jQuery), it is often necessary to add left / right margins and borders to get the “real” width of the element.
')
Using box-sizing: border-box , the width representation in CSS is changed, in this mode it includes the width of the margins and borders, it looks more natural. jQuery before version 1.8 did not respond to the use of the border-box , but we fixed this bug.

However, the value that the .width() method returns has not changed. As indicated in the documentation, it returns / sets the width of the content of the element, and this is regardless of which box-sizing will be specified for the element. However, jQuery 1.8 should now check the value of the box-sizing property each time you use .width() to determine when you need to subtract field and border values. This can be an expensive operation - up to 100 times more expensive in Chrome! Fortunately, most of the code does not use .width() so often that it is worthy of special attention, but code that gets a dozen widths at a time can have a negative effect.

There is a fairly simple way to avoid the effect of this feature on the performance of your code. Simply use .css("width") instead of .width() to set the "actual" width of the element in accordance with the applicable CSS rules. It does not require jQuery to check the value of the box-sizing property. But remember that calling .css("width") returns a string value with "px" at the end, so you should use something like parseFloat( $(element).css("width") ) when you want to get a numeric value as a result.

And of course, everything described above fully applies to .height() , use .css("height") to avoid performance problems.

Using the setter .outerWidth()

Another important news: the .outerWidth() and .outerHeight() methods were updated in version 1.8 so that they can now be used as setters. (The jQuery UI supports this feature since version 1.8.4, but now it is available in the kernel.) To use the .outerWidth() setter, you need to pass a number as an argument indicating the required "full" width of the element (content width plus width plus border widths). And yes, this method also takes into account the value of box-sizing: border-box , it just comes down to using .css("width") in this case.

We received feedback from some people who had problems using .outerWidth() in jQuery 1.8 because the method returned a jQuery object instead of a numeric value. This can happen if you call $(element).outerWidth(0) , for example. In previous versions, this is an erroneous use of the method, because only the use of a boolean argument was documented and the method returned a width. In the new version, jQuery understands the value 0 as a settable value for the width and therefore returns a jQuery object as the result of the operation of the setter.

The API documentation is currently being updated to reflect all the changes in jQuery 1.8, but you can already see a list of changes in the jQuery 1.8 announcement.