CSS: Box Model Hack

[The coding examples in this article may be considered obsolete. I've yet to update my 2003-ish knowledge.]

Consorţiul W3C încearcă să uniformizeze practicile în web design sub umbrela gândirii de tip "creează o dată, publică oriunde". Cu alte cuvinte, produsul muncii unui web developer, creat sub auspiciile standardelor web propuse de organismul sus-menţionat, poate fi utilizat cu (aproape) orice agent utilizator, trecut ori preconizat. Dacă în trecut opţiunea de a face mai multe variante ale aceluiaşi site era considerată practică firească, astăzi această manieră de gândire e considerată o blasfemie a bunelor practici web, păguboasă pentru timpul şi resursele implicate într-un proiect.

Şi, cum caracteristicile browserelor existente sunt de multe ori contradictorii şi reciproc eliminatorii, developerii au scornit o serie de ocolişuri menite să le uşureze munca. Unul dintre aceste hack-uri este cel propus de către Tantek Celik, nume important pentru industria de software, prin implicarea sa în dezvoltarea Internet Explorer pentru Mac şi prin multe alte contribuţii referitoare la XHTML şi CSS. Al său Box Model Hack vine în întâmpinarea bug-ului box model întâlnit în Internet Explorer pentru Windows, până la versiunea 5 inclusiv.

În ce constă acesta, pe scurt? Întâi trebuie să înţelegem ce este de fapt box model -- anume, o manieră de reprezentare grafică, ce permite elementelor block-level, precum p sau blockquote, să conţină padding, margini sau borduri. Problema apare în momentul în care browserele interpreteaza în mod diferit dimensiunile menţionate în codul CSS. De o parte sunt cele care implementează modelul propus de W3C, care consideră că atributul width se referă la lăţimea conținutului celulei, iar padding la spaţiul dintre conţinut şi bordură, de cealaltă parte sunt browserele (mă rog, browser-ul..) care au rămas fidele modelului tradiţional, care consideră că dimensiunile de lăţime şi înălţime se aplică dintr-o bordură în cealaltă. Astfel că, acolo unde marea parte a browserelor stabilesc dimensiunile conţinutului - care ulterior sunt fixe, aplicând apoi padding şi borduri, IE aplică padding şi borduri în spaţiul definit de width, ceea ce conduce la diminuarea spaţiului menit conţinutului.

Tantek Celik a venit cu o soluţie elegantă care șuntează această problemă: în definirea unui element box-level, se menţionează dimensiunea celulei dorit a fi preluată şi folosită de către IE, urmând să se aplice 2 reguli pe care IE nu le recunoaşte, însă care sunt familiare celorlaltor browsere, şi să se rescrie regula referitoare la width, de data aceasta cu dimensiunea pe care o dorim a fi aplicată în browserele ce funcţionează după modelul W3C.

div.content {

width: 400px; // dimensiune pentru versiunile problematice IE

voice-family: "\"}""; // IE5 se opreşte aici

voice-family: inherit;

width: 300px; // regula pentru browserele supuse standardelor

}

Totodată, se menţionează şi o regulă pentru browserul Opera, "Be kind to Opera rule", întrucât acest browser, deşi aplică modelul box model W3C, nu înţelege cele două reguli voice-family:

html>body .content {

width: 300px;

}

There you have it. Box Model Hack. Pentru un Internet curat şi developeri fericiţi.