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

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

Однак деякі розробники придумали суб'єктивні, концептуальні аргументи на захист моделі IE box. Вони заявляли, що модель коробки IE є більш "інтуїтивно зрозумілою", ніж модель W3C, оскільки модель W3C вимірює вміст коробки, тоді як модель IE вимірює саму коробку:

Я бачу їхню точку зору, але це в основному суб'єктивний аргумент, і найголовніше - це відповідність стандартам .

Однак останнім часом я віддаю перевагу моделі IE box з серйозних практичних причин. Модель коробки W3C утрудняє динамічний розмір елемента до точної ширини пікселя на екрані іншого елемента. Причина полягає в тому, що style.widthвластивість елемента не враховує загальний екранний розмір елемента: вам також потрібно враховувати будь-які додаткові рамки та прокладки. Це не проблема, якщо обидва елементи використовують один і той же клас CSS, але якщо вони мають різні класи CSS, це може стати надзвичайно складним.

Припустимо, у нас є дві діви: A і B. A жорстко кодується в HTML як 400px div, тоді як 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. Це може бути особливо складно, якщо межі та прокладки вказані в непослідовних одиницях (поширене явище, оскільки межа часто є 1px лінією, тоді як прокладка може бути вказано в ems). Тоді перед нами стоїть квазінеможливе завдання перетворення на загальну одиницю (em в px або px в em). Все це лише для того, щоб отримати дві діви, щоб вирівнятись точно на екрані.

Таким чином, модель коробки W3C змушує нас враховувати проблеми CSS з облямівкою та накладкою при встановленні розміру елемента, тоді як модель коробки IE - ні, оскільки ширина вимірює весь розмір коробки (від кінця до -закінчення), а не вміст поля. Це значно спрощує динамічно розмір елементів по відношенню один до одного.

Все це здається досить вагомою причиною віддати перевагу IE box-моделі перед моделлю W3C (принаймні, концептуально - звичайно, на практиці модель IE box мертва).

Питання : Чому 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.