Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   box-sizing: padding-box (https://javascript.ru/forum/xhtml-html-css/50961-box-sizing-padding-box.html)

bes 19.10.2014 00:08

box-sizing: padding-box
 
Почему поддерживается только в FF и потенциально может быть удалено из спецификации?
Кому мешает?
Пусть возможно бесполезно (а может и нет), но для полноты картины реализует последнее из возможных сочетаний для получения ширины блока из width, padding и border.

<!--чтобы добавить красок-->
<style>
div {
	padding: 10px;
	height: 50px;
}
.parent {
	border: solid 5px red;
}
.child {
	border: solid 5px green;
}
</style>
<button>content-box</button>
<button>padding-box</button>
<button>border-box</button>
<div class="parent">
	<div class="child"></div>
</div>
<script>
(function () {
	var child = document.querySelector(".child");
	document.addEventListener("click", function (event) {
		var target = event.target;
		if (target.tagName == "BUTTON") {
			child.style.boxSizing = target.innerHTML;
		}
	});
})();
</script>

danik.js 19.10.2014 00:18

Цитата:

Сообщение от bes
потенциально может быть удалено из спецификации?
Кому мешает?

Может и не мешает, но отсутствие реализации со стороны вендоров - это повод для удаления, если не ошибаюсь.
А не реализуют потому что не очень то и нужно. Мне вот ни разу это не пригодилось..

Aetae 19.10.2014 00:32

Мне в скриптах-на-коленке пригождалось. Оч. удобно не париться о бордерах и паддингах и получать\изменять простосто width\height.

В продакшн понятное дело не проблема всё предусмотреть, но по-быстрому накидать - удобно.

bes 19.10.2014 00:43

Цитата:

Сообщение от danik.js
Может и не мешает, но отсутствие реализации со стороны вендоров - это повод для удаления, если не ошибаюсь.

а у тех (кроме мозиллы) причины видимо политические

Цитата:

Сообщение от danik.js
А не реализуют потому что не очень то и нужно. Мне вот ни разу это не пригодилось..

мне тоже, но на весах полный охват возможностей и вспоминание "а, бл-ть, опять это работает только в одном браузере" :)

Цитата:

Сообщение от Aetae
Мне в скриптах-на-коленке пригождалось. Оч. удобно не париться о бордерах и паддингах и получать\изменять простосто width\height.

В продакшн понятное дело не проблема всё предусмотреть, но по-быстрому накидать - удобно.

может не понял твою мысль, но я про padding-box, а не про box-sizing в целом :)

melky 19.10.2014 01:04

извиняюс. я вижу это дело впервые. есть ли рельные кейсы для него?

bes 19.10.2014 01:34

Цитата:

Сообщение от melky
извиняюс. я вижу это дело впервые. есть ли рельные кейсы для него?

для box-sizing: padding-box;
не знаю, разве что упростить расчёт, так как этом случае
width/height == clientWidth/clientHeight

для box-sizing: border-box;
это простота расчёта без выезжаний и создания дополнительных блоков
например, как в учебнике, для распахивания элемента на всю внутреннюю ширину/высоту родителя
http://learn.javascript.ru/box-sizing

здесь про меню, в котором происходит смещение блока, а также в комментах отмечено про возможность использовать не только пиксели для задания величин и не повредить расчёт
http://habrahabr.ru/post/149441/

про другие применения сам бы послушал


Часовой пояс GMT +3, время: 07:37.