Il modello box: Internet Explorer vs. W3C

Oggi, il problema del modello box di Internet Explorer è principalmente un problema. La maggior parte degli sviluppatori Web inserisce un <!DOCTYPE>tag per imporre la conformità agli standard e nessuno si preoccupa più del supporto di Internet Explorer 5.5.

Tuttavia, alcuni sviluppatori hanno escogitato argomentazioni soggettive e concettuali a difesa del modello di scatola IE. Hanno affermato che il modello di box IE è più "intuitivo" rispetto al modello W3C, perché il modello W3C misura il contenuto del box, mentre il modello IE misura il box stesso:

Posso vedere il loro punto di vista, ma è fondamentalmente un argomento soggettivo e la cosa più importante è la conformità agli standard .

Tuttavia, recentemente sono venuto a preferire il modello di scatola IE per serie ragioni pratiche . Il modello di scatola W3C rende difficile ridimensionare dinamicamente un elemento alla larghezza esatta dei pixel sullo schermo di un altro elemento. Il motivo è che la style.widthproprietà di un elemento non tiene conto della dimensione totale su schermo dell'elemento: è inoltre necessario tenere conto di eventuali bordi e imbottiture aggiuntivi. Questo non è un problema se entrambi gli elementi usano la stessa classe CSS - ma se hanno classi CSS diverse , questo può diventare incredibilmente impegnativo.

Supponiamo di avere due div: A e B. A è codificato nel codice HTML come div 400px, mentre B viene creato dinamicamente usando Javascript. Visivamente, vogliamo che B sia la larghezza esatta di A. Sotto il vecchio modello di IE Box, questo è banale. Diciamo semplicemente: B.style.width = A.style.widtho anche B.style.width = A.offsetWidth + "px".

Ma con il modello di scatola W3C, questo non è così semplice. Ora dobbiamo anche preoccuparci dei fogli di stile. Se B ha la stessa classe CSS di A, possiamo solo dire B.style.width = A.style.width. Ma se non lo fa - e potremmo non volerlo per motivi estetici - siamo nei guai. Ora dobbiamo prendere in considerazione i pixel totali nel bordo e nell'imbottitura di A e B. Questo può essere particolarmente difficile se il bordo e il riempimento sono specificati in unità incoerenti (un evento comune poiché il bordo è spesso una linea di 1 pixel, mentre il riempimento potrebbe essere specificato in EMS). Quindi ci troviamo di fronte al compito quasi impossibile di convertire in un'unità comune (em in px o px in em). Tutto questo solo per fare in modo che due div si allineino esattamente sullo schermo.

Quindi, fondamentalmente, il modello di scatola W3C ci costringe a tenere conto dei problemi di bordo e di riempimento CSS quando impostiamo la dimensione di un elemento, mentre il modello di scatola IE non lo fa, poiché la larghezza misura l' intera dimensione della scatola (end-to -end), piuttosto che il contenuto della scatola. Questo rende molto più facile dimensionare dinamicamente gli elementi uno rispetto all'altro.

Tutto ciò sembra una ragione abbastanza potente per favorire il modello box IE rispetto al modello W3C (almeno concettualmente - ovviamente in pratica il modello box IE è morto).

Domanda : Perché il W3C ha scelto questo modello di scatola? Ci sono alcuni vantaggi del modello di scatola W3C che semplicemente non vedo? O sto semplicemente esagerando il problema qui?

La scelta se includere o meno l'imbottitura e il bordo nella larghezza era arbitraria. L'unica cosa che contava era costruire layout multi-colonna. Tuttavia, dovresti comunque tenere conto del fatto che le persone hanno usato le tabelle per i layout in quel momento. Quindi per loro quella preoccupazione non sembrava abbastanza importante e ritenevano che essere in grado di specificare la larghezza esatta che il contenuto stesso avrebbe occupato nei CSS sembrava molto più prezioso.

Per gli sviluppatori di oggi la situazione sembra totalmente diversa poiché usano i CSS per i layout e devono fare i conti con il modello di boxe CSS. Per fortuna abbiamo la possibilità di sovrascrivere le regole di boxe, quindi nella maggior parte dei casi la semplice regola nella parte superiore del foglio di stile funziona in modo favoloso:

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

Per citare Jeff Kaufman sull'argomento :

Dato che le specifiche l'hanno definita diversamente, il segnale che avrebbe inviato a Microsoft per adottare la loro interpretazione errata sarebbe stato negativo per il web. Microsoft stava già utilizzando un approccio di abbraccio, estensione ed estinzione, in cui creava intenzionalmente prodotti che si comportavano diversamente da quelli della concorrenza per bloccare gli utenti nelle versioni di Microsoft. Si avvicinarono molto al successo con il web: da circa 2000 al 2005 IE fu così popolare che molti siti pensarono proprio per questo. Adottare l'approccio di IE qui potrebbe aver detto a Microsoft "puoi fare quello che vuoi con IE e noi adegueremo gli standard per renderlo legale".

Quindi il modello di scatola cadde vittima della lotta per il potere tra W3C e Microsoft.