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

Original author: dmethvin
  • Translation
Одна из отличных новых возможностей 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.
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 11

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

    Правда в этом случае сарказм в сторону IE6 и 7 как-то тускнеет.
      0
      да вообще тускнеет — я, если честно, до сих пор не пойму, почему логически правильная ширина, включающая в себя паддинги и бордеры, пришлась не ко двору в «современных браузерах»(=
      0
      Мне тоже подумалось что стоит указывать content-box и поддержка IE6-7 будет автоматической
        0
        Только в quirks mode же
        –5
        про IE вообще лучше забыть и нигде не упоминать «это»
          +4
          Уже не круто постоянно ругать IE. Версии 9, 10 вполне адекватны, а поддержка 6-8 постепенно уходит в небытие.
            –6
            Не круто ругать IE? Смысл существования IE? Где статьи про то какой он крутой и какие новые фишки разработчики IE преподнесли нам? Их нет, а все потому что IE — просто убожество (надеюсь холивар не прольется на эту страницу)
              +6
              Разработчики браузеров должны делать браузеры, которые соответствуют стандартам w3c и whatwg и точка. IE9, IE10 вполне им соответствуют.
                +1
                да, но репутация уже изрядно подпорчена.
                сам, как верстальщик, очень сильно не люблю все семейство IE, всем друзьям, знакомым и клиентам настоятельно рекомендую переход на Хром и Фаерфокс.
                на всех своих проектах наблюдаю нечто подобное: clip2net.com/s/2dwyn
                и это очень, ОЧЕНЬ радует (хотя и не репрезентативно для рунета, конечно).
          0
          Отлично! Давно пора считать размеры с поребриками.
            0
            Всмысле, с бордюрами?

          Only users with full accounts can post comments. Log in, please.