Model pudełkowy: Internet Explorer vs. W3C

Obecnie problem modelu pudełkowego programu Internet Explorer jest w większości nieistotny. Większość twórców stron internetowych umieszcza <!DOCTYPE>znaczniki w celu egzekwowania zgodności ze standardami i nikt tak naprawdę nie dba już o obsługę programu Internet Explorer 5.5.

Jednak niektórzy programiści wymyślili subiektywne, konceptualne argumenty w obronie modelu pudełkowego IE. Twierdzili, że model pudełka IE jest bardziej „intuicyjny” niż model W3C, ponieważ model W3C mierzy zawartość pudełka, podczas gdy model IE mierzy samo pudełko:

Widzę ich punkt widzenia, ale jest to w zasadzie subiektywny argument, a najważniejsze jest przestrzeganie standardów .

Jednak ostatnio zdecydowałem się na preferowanie modelu pudełkowego IE z poważnych powodów praktycznych . Model pudełkowy W3C utrudnia dynamiczną zmianę rozmiaru elementu do dokładnej szerokości pikseli innego elementu na ekranie. Powodem jest to, że style.widthwłaściwość elementu nie uwzględnia całkowitego rozmiaru elementu na ekranie: należy również wziąć pod uwagę wszelkie dodatkowe obramowanie i wypełnienie. Nie stanowi to problemu, jeśli oba elementy używają tej samej klasy CSS - ale jeśli mają różne klasy CSS, może to stać się niezwykle trudne.

Załóżmy, że mamy dwa div: A i B. A jest na stałe zakodowane w html jako div 400px, podczas gdy B jest dynamicznie tworzony przy użyciu Javascript. Wizualnie chcemy, aby B była dokładną szerokością A. W starym modelu IE Box jest to trywialne. Po prostu mówimy: B.style.width = A.style.widthlub nawet B.style.width = A.offsetWidth + "px".

Ale w przypadku modelu pudełkowego W3C nie jest to takie proste. Teraz musimy również martwić się o arkusze stylów. Jeśli B ma tę samą klasę CSS co A, możemy po prostu powiedzieć B.style.width = A.style.width. Ale jeśli tak nie jest - a może nie chcemy tego ze względów estetycznych - mamy kłopoty. Teraz musimy wziąć pod uwagę całkowitą liczbę pikseli w ramce i wypełnienie zarówno A, jak i B. Może to być szczególnie trudne, jeśli ramka i wypełnienie są określone w niespójnych jednostkach (częste zjawisko, ponieważ ramka jest często linią 1px, natomiast wypełnienie może być określony w ems). Następnie stajemy przed quasi-niemożliwym zadaniem konwersji na wspólną jednostkę (em na px lub px na em). Wszystko po to, aby dwa divy ustawiły się dokładnie na ekranie.

Zasadniczo więc model pola W3C zmusza nas do uwzględnienia problemów z ramkami CSS i dopełnianiem, gdy ustawiamy rozmiar elementu, podczas gdy model pola IE nie, ponieważ szerokość mierzy cały rozmiar pola (od końca do -end), a nie zawartość pudełka. Ułatwia to dynamiczne wymiarowanie elementów względem siebie.

Wszystko to wydaje się dość silnym powodem, aby faworyzować model pudełkowy IE nad modelem W3C (przynajmniej koncepcyjnie - oczywiście w praktyce model pudełkowy IE jest martwy).

Pytanie : Dlaczego W3C wybrał ten model skrzynki? Czy są jakieś zalety modelu pudełkowego W3C, których po prostu nie widzę? Czy po prostu przesadzam z problemem?

Wybór, czy dołączyć dopełnienie i obramowanie do szerokości, czy nie, był arbitralny. Jedyne, co miało znaczenie, to budowanie układów wielokolumnowych. Należy jednak wziąć pod uwagę fakt, że i tak ludzie używali tabel do układów. Dla nich obawa ta nie wydawała się wystarczająco ważna i uważali, że możliwość określenia dokładnej szerokości, jaką sama treść zajmie w CSS, wydaje się o wiele bardziej wartościowa.

Dla dzisiejszych programistów sytuacja wydaje się zupełnie inna, ponieważ używają CSS do układów i mają do czynienia z modelem boksu CSS. Na szczęście mamy możliwość zastąpienia reguł bokserskich, więc w większości przypadków prosta reguła u góry arkusza stylów działa bajecznie:

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

Cytując Jeffa Kaufmana na ten temat :

Biorąc pod uwagę, że specyfikacja zdefiniowała to w inny sposób, sygnał wysłany do Microsoft w celu przyjęcia ich błędnej interpretacji byłby zły dla sieci. Microsoft już stosował podejście obejmujące, rozszerzające i gasnące, w którym celowo tworzył produkty, które działały inaczej niż produkty konkurencji w celu zablokowania użytkowników w wersjach Microsoft. Internet był bardzo bliski sukcesu: od około 2000 do 2005 roku IE był tak popularny, że wiele witryn zaprojektowanych właśnie dla niego. Przyjęcie podejścia IE mogłoby wtedy powiedzieć Microsoftowi: „możesz zrobić co chcesz z IE, a my dostosujemy standardy, aby było to zgodne z prawem”.

Model pudełkowy padł więc ofiarą walki o władzę między W3C a Microsoftem.