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

Original author: dmethvin
  • Transfer
One of the great new features of jQuery 1.8 is its built-in understanding of the property box-sizing: border-box , which is supported by all modern browsers. (IE6 and IE7, smoke on the sidelines, I said, modern browsers.)
Note .: CSS-property box-sizing introduced in CSS3 standard, and can have two meanings: content-box - corresponds CSS2 standard, and is the default value, and the properties width and height set the width and the height of the content and does not include the values of padding, margins and borders, the new value border-box tells the browser that the properties width and height should include field values and borders, but no margins ( margin ).

If you show people an element with borders on the screen and ask them to indicate the width of the element, then, of course, they consider it from the outer borders of the border. But this does not work in CSS in default mode content-box . Typically, width and height in the CSS only include the width and height of the content within the borders and fields ( padding ). As a result, when layout (and using jQuery) it is often required to add the width of the left / right margin and the border to get the "real" width of the element.

Using the box-sizing: border-box width representation in CSS changes, 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 use border-box , but we fixed this bug.

At the same time, the value returned by the method has not changed .width() . As indicated in the documentation, it returns / sets the width of the content of the element, and this does not matter what box-sizing is specified for the element. However, jQuery 1.8 should now check the value of the property box-sizing every time you use .width() it to determine when you need to subtract the values ​​of the fields and borders. This can be an expensive operation - up to 100 times more expensive in Chrome! Fortunately, used on most of the code is not used .width() to so often that it is worthy of special attention, but the code that gets the width of a dozen items at a time, can have a negative impact.

There is a fairly simple way to avoid the impact of this feature on the performance of your code. Just use .css("width") instead .width() to set the “actual” width of the element in accordance with the applicable CSS rules. This does not require jQuery to check the value of a property box-sizing . But remember that the call .css("width") returns a string value with “px” at the end, i.e. 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 setter .outerWidth()

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

We received feedback from some people who have 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 an argument of type boolean was documented and the method returned the width. In the new version, jQuery understands the value 0 as the set value for the width, and therefore the jQuery object is returned as a result of the setter.

The API documentation is being updated now in accordance with all the changes in jQuery 1.8, but you can already see the list of changes in the jQuery 1.8 announcement.