Ciao, e benvenuto nella terza puntata dell'ottava stagione. Nella scorsa puntata abbiamo raccontato il caos della guerra dei browser e l'era delle tabelle. Oggi zoomiamo su una battaglia specifica di quel caos, forse la più famosa e istruttiva di tutte, una di quelle che hanno fatto disperare un'intera generazione di sviluppatori: la guerra del box model, il modello a scatole. Sembra un dettaglio tecnico, ma racconta perfettamente perché quegli anni furono così difficili.
Riprendiamo un concetto della settima stagione, perché ci serve. Avevamo detto che, nel CSS, ogni elemento della pagina è in sostanza una scatola, un rettangolo. E ogni scatola ha delle parti: il contenuto al centro, uno spazio interno tra il contenuto e il bordo, il bordo stesso, e uno spazio esterno che la separa dalle altre. Fin qui, semplice. Il problema, negli anni bui, era una domanda apparentemente banale: quando dico che questa scatola è larga così, cosa intendo esattamente? Solo il contenuto, o anche lo spazio interno e il bordo?
E qui sta il dramma: i browser dell'epoca rispondevano a questa domanda in due modi diversi e incompatibili. Un modo diceva: la larghezza che indichi è quella del solo contenuto, e lo spazio interno e il bordo si aggiungono in più, allargando la scatola totale. L'altro modo diceva: la larghezza che indichi è quella dell'intera scatola, bordo compreso, e lo spazio interno mangia verso l'interno. Due interpretazioni opposte della stessa identica istruzione. La conseguenza era devastante: la stessa pagina, con le stesse misure, appariva con scatole di dimensioni diverse a seconda del browser, e i layout si rompevano.
Immagina la frustrazione. Costruivi con cura una pagina, la sistemavi al pixel perfetta nel tuo browser, e poi la aprivi in un altro e tutto era sballato: elementi che sforavano, colonne che andavano a capo, spazi sbagliati. E non perché avessi commesso un errore, ma perché i due browser interpretavano le tue misure in modo opposto. Dovevi far quadrare i conti per due matematiche diverse contemporaneamente. Era una delle esperienze più esasperanti del costruire per il Web in quell'epoca, e generò una quantità industriale di imprecazioni.
Come se ne uscì, in mancanza di un accordo? Con i cosiddetti trucchi, i piccoli espedienti scritti nello stile per aggirare le differenze tra browser. Gli sviluppatori impararono sfruttare piccole imperfezioni e bug dei browser per indirizzare istruzioni diverse all'uno o all'altro. Scrivevano una versione delle misure pensata per un browser, e nascondevano una versione diversa, con una sintassi speciale, che solo l'altro browser leggeva. In pratica, mantenevano due verità contemporaneamente, una per ciascun browser. Funzionava, ma era fragile, oscuro, e riempiva i fogli di stile di magie incomprensibili il cui unico scopo era ingannare un browser specifico.
C'è un altro pezzo di questa storia che vale la pena raccontare, perché è geniale nel suo tentativo di rimettere ordine: l'idea di far dichiarare alla pagina secondo quali regole voleva essere interpretata. Nacque un meccanismo per cui una pagina poteva segnalare, in cima, "io seguo le regole moderne e corrette", oppure, se non lo diceva, veniva trattata secondo le vecchie regole sbagliate, per non rompere i siti antichi già esistenti. Si crearono così due modalità: una moderna e conforme, e una che imitava i vecchi comportamenti difettosi per compatibilità. Fu un modo intelligente per traghettare il Web verso la correttezza senza distruggere tutto ciò che era stato costruito prima.
Cosa ci insegna, oggi, questa vecchia guerra del box model? Alcune cose preziose, che vanno oltre il dettaglio tecnico. La prima: quanto è importante che chi costruisce gli strumenti si accordi su regole comuni. Tutta questa sofferenza nasceva da una mancanza di accordo su una cosa piccola. La seconda: quanto valga uno standard rispettato. La differenza tra l'incubo di allora e la serenità di oggi non è che il CSS sia diventato più potente, è soprattutto che i browser hanno smesso di litigare e hanno cominciato a rispettare le stesse regole. Gran parte del progresso del Web è stato proprio questo: passare dal caos di ognuno-a-modo-suo all'ordine delle regole condivise.
E c'è un lieto fine, che anticipa il resto della stagione. Quella guerra, oggi, è finita. Il modo di interpretare le scatole si è standardizzato, i browser si sono allineati, e anzi, il comportamento che un tempo era motivo di lite oggi si può scegliere con una semplice istruzione, in modo prevedibile e uguale ovunque. Ciò che faceva impazzire intere generazioni di sviluppatori è diventato un non-problema. È la dimostrazione concreta che il Web, faticosamente, è migliorato: le battaglie di ieri sono le comodità di oggi.
Per oggi ci fermiamo qui. La guerra del box model nasceva da una domanda semplice, cosa comprende la larghezza di una scatola, a cui i browser rispondevano in modi opposti e incompatibili, facendo esplodere i layout e disperare gli sviluppatori, che sopravvivevano con trucchi fragili. Se ne uscì con l'idea delle modalità di interpretazione e, soprattutto, con la lenta convergenza verso regole comuni. La lezione è il valore immenso degli standard condivisi. Nella prossima puntata raccontiamo proprio la rivoluzione che portò gli standard al centro. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.