Модель коробки: Internet Explorer против W3C

Сегодня проблема блочной модели Internet Explorer по большей части не является проблемой. Большинство веб-разработчиков размещают <!DOCTYPE>тег для обеспечения соответствия стандартам, и никто больше не заботится о поддержке Internet Explorer 5.5.

Тем не менее, некоторые разработчики выдвигают субъективные, концептуальные аргументы в защиту блочной модели IE. Они утверждают, что блочная модель IE более «интуитивна», чем модель W3C, потому что модель W3C измеряет содержимое блока, тогда как модель IE измеряет сам блок:

Я могу видеть их точку зрения, но в основном это субъективный аргумент, и самое главное - это соответствие стандартам .

Тем не менее, в последнее время я предпочел коробочную модель IE по серьезным практическим причинам. Блочная модель W3C затрудняет динамическое изменение размера элемента до точной ширины пикселя на экране другого элемента. Причина в том, что style.widthсвойство элемента не учитывает общий размер элемента на экране: вам также необходимо учитывать любые дополнительные границы и отступы. Это не проблема, если оба элемента используют один и тот же класс CSS - но если у них разные классы CSS, это может стать невероятно сложной задачей.

Предположим, у нас есть два div: A и B. A жестко запрограммирован в html как div 400px, тогда как B динамически создается с использованием Javascript. Визуально мы хотим, чтобы B была точной шириной A. В старой модели IE Box это тривиально. Мы просто говорим: B.style.width = A.style.widthили даже B.style.width = A.offsetWidth + "px".

Но с блочной моделью W3C это не так просто. Теперь нам также нужно беспокоиться о таблицах стилей. Если B имеет тот же класс CSS, что и A, мы можем просто сказать B.style.width = A.style.width. Но если этого не произойдет - а мы можем этого не хотеть по эстетическим причинам - у нас проблемы. Теперь мы должны принять во внимание общее количество пикселей на границе и заполнении как A, так и B. Это может быть особенно сложно, если граница и заполнение заданы в непоследовательных единицах (обычное явление, поскольку border часто представляет собой линию 1px, тогда как padding может быть указан в EMS). Затем мы сталкиваемся с практически невозможной задачей преобразования в общую единицу измерения (em в px или px в em). Все это только для того, чтобы два элемента div выстроились точно на экране.

Таким образом, в основном, блочная модель W3C вынуждает нас принимать во внимание проблемы с границами CSS и заполнением, когда мы устанавливаем размер элемента, тогда как блочная модель IE не делает этого, так как ширина измеряет весь размер блока (от конца до -конец), а не содержимое коробки. Это значительно упрощает динамический размер элементов по отношению друг к другу.

Все это кажется довольно веской причиной, чтобы отдать предпочтение блочной модели IE над моделью W3C (по крайней мере, концептуально - конечно, на практике блочная модель IE мертва).

Вопрос : Почему W3C выбрал эту модель коробки? Есть ли какие-то преимущества у блочной модели W3C, которых я просто не вижу? Или я просто преувеличиваю проблему здесь?

Выбор, включать ли отступ и границу в ширину или нет, был произвольным. Единственное, что имело значение, это создание многоколоночных макетов. Однако вы должны учитывать тот факт, что в то время люди использовали таблицы для макетов в любом случае. Таким образом, эта забота не казалась достаточно важной, и они считали, что возможность указать точную ширину, которую сам контент будет занимать в CSS, кажется гораздо более ценной.

Для современных разработчиков ситуация выглядит совершенно иначе, поскольку они используют CSS для макетов и им приходится иметь дело с CSS-моделью бокса. К счастью, у нас есть возможность переопределить правила бокса, поэтому в большинстве случаев простое правило в верхней части таблицы стилей работает невероятно:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

Цитирую Джеффа Кауфмана на эту тему :

Однако, учитывая, что спецификация определила его иным способом, сигнал, который он послал бы Microsoft, чтобы принять их неверное толкование, был бы плох для сети. Microsoft уже использовала подход «охватывать, расширять и тушить», когда они намеренно создавали продукты, которые действовали не так, как их конкуренты, чтобы запереть пользователей в версиях Microsoft. Они очень близко подошли к успеху в Интернете: примерно с 2000 по 2005 год IE был настолько популярен, что многие сайты создавались именно для него. Тогда принятие подхода IE могло бы сказать Microsoft: «Вы можете делать с IE все, что захотите, и мы изменим стандарты, чтобы сделать его легальным».

Таким образом, блочная модель стала жертвой борьбы за власть между W3C и Microsoft.