jQuery 1.8 box-sizing: width(), css(«width») и outerWidth()

Одна из отличных новых возможностей jQuery 1.8 — это встроенное понимание свойства box-sizing: border-box, которое поддерживается всеми современными браузерами. (IE6 и IE7, покурите в сторонке, я же сказал, современными браузерами.)

Прим.: CSS-свойство box-sizing введено в стандарте CSS3, и может иметь два значения: content-box — соответствует стандарту CSS2 и является значением по умолчанию, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ, новое значение border-box говорит браузеру о том, что свойства width и height должны включать в себя значения полей и границ, но не отступов (margin).

Если вы показываете людям на экране элемент с бордюрами и просите их указать ширину элемента, то они, естественно, считают её от внешних границ бордюра. Но это не так работает в CSS в режиме по умолчанию content-box. Обычно, width и height в CSS включают только ширину и высоту контента внутри бордюров и полей (padding). В результате при верстке (и использовании jQuery) часто требуется добавлять ширину левого/правого поля и бордюра, чтобы получить «настоящую» ширину элемента.

С использованием box-sizing: border-box меняется представление ширины в CSS, в таком режиме она включает в себя ширину полей и бордюров, это выглядит более естественно. jQuery до версии 1.8 не реагировал на использование border-box, но мы исправили этот баг.

При этом не изменилось значение, которое возвращает метод .width(). Как и указано в документации, он возвращает/устанавливает ширину контента элемента, и это независимо от того, какой box-sizing будет указан для элемента. Однако, jQuery 1.8 теперь должен проверять значение свойства box-sizing каждый раз, когда вы используете .width(), чтобы определить, когда требуется вычитать значения полей и бордюров. Это может быть дорогой операцией — до 100 раз дороже в Chrome! К счастью, большая часть кода не использует .width() на столько часто, чтобы это было достойно особого внимания, но код, который получает ширину дюжины элементов за раз, может оказать негативное влияние.

Есть довольно простой путь избежать влияния этой особенности на производительность вашего кода. Просто используйте .css("width") вместо .width(), чтобы установить «актуальную» ширину элемента в соответствии с применяемыми правилами CSS. Это не требует, чтобы jQuery проверял значение свойства box-sizing. Но помните, что вызов .css("width") возвращает строковое значение с «px» в конце, т.о. вы должны использовать что-то навроде parseFloat( $(element).css("width") ), когда хотите получить в результате числовое значение.

И конечно же, всё описанное выше в полной мере относится и к .height(), используйте .css("height"), чтобы избежать проблем с производительностью.

Использование сеттера .outerWidth()

Другая важная новость: методы .outerWidth() и .outerHeight() были обновлены в версии 1.8 таким образом, что теперь они могут быть использованы в качестве сеттеров. (jQuery UI поддерживает эту возможность начиная с версии 1.8.4, но теперь это доступно и в ядре.) Чтобы воспользоваться сеттером .outerWidth(), нужно передать в качестве аргумента число, указывающее требуемую «полную» ширину элемента (ширина контента плюс ширина полей плюс ширина бордюров). И да, этот метод также учитывает значение box-sizing: border-box, это просто сводится к использованию .css("width") в таком случае.

Мы получили отзывы от некоторых людей, у которых возникли проблемы с использованием .outerWidth() в jQuery 1.8, потому что метод возвращал jQuery-объект вместо числового значения. Это может произойти, если вы вызываете $(element).outerWidth(0), например. В предыдущих версиях это ошибочное использование метода, потому что документировано было лишь использование аргумента типа boolean и метод возвращал ширину. В новой же версии jQuery понимает значение 0 как устанавливаемое значение ширины и поэтому возвращается объект jQuery как результат работы сеттера.

Сейчас обновляется документация API в соответствии со всеми изменениями в jQuery 1.8, но вы уже можете увидеть список изменений в анонсе jQuery 1.8.