În dezvoltarea web clasică, asigurarea compatibilității dintre browserele moderne și Internet Explorer 6 a reprezentat una dintre cele mai mari provocări. Deoarece motorul de randare Trident din IE 6 nu oferea suport nativ pentru proprietăți CSS2 fundamentale precum max-height, min-height, max-width sau min-width, dezvoltatorii erau nevoiți să recurgă la diverse artificii tehnice și hack-uri CSS.
Problema suportului pentru dimensiuni maxime și minime în IE 6
În timp ce browserele conforme cu standardele web (precum Firefox sau Opera) interpretau corect proprietățile max-height și max-width, Internet Explorer 6 le ignora complet. Soluția găsită la acea vreme de comunitate se baza pe mecanismul proprietar Microsoft numit CSS Expressions (Dynamic Properties), combinat cu hack-ul clasic * html, recunoscut exclusiv de IE 6.
Cum se emulează proprietatea max-height
Dacă ai nevoie să limitezi înălțimea maximă a unui container pentru utilizatorii de IE 6, poți folosi următoarea regulă:
/* Regula standard și hack-ul specific pentru Internet Explorer 6 */
* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* Setează max-height pentru IE 6 */
}
div#division {
max-height: 333px; /* Valoarea standard pentru browserele moderne */
}
Cum funcționează acest cod:
Proprietatea expression() evaluează un fragment de cod JavaScript direct în interiorul fișierului de stiluri. Practic, browserul verifică dacă înălțimea totală a conținutului derulabil (scrollHeight) depășește pragul de 332 de pixeli. Dacă această condiție este adevărată, se aplică o înălțime fixă de 333 de pixeli; în caz contrar, valoarea rămâne auto.
Emularea proprietăților de lățime: min-width și max-width
Un mecanism similar poate fi utilizat și pentru gestionarea lățimii minime sau maxime a unui element. De exemplu, pentru a preveni colapsarea unui container sub o anumită dimensiune (emulând min-width):
* html div#division {
width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* Emulare min-width pentru IE 6 */
}
div#division {
min-width: 333px; /* Sintaxa standard pentru browsere compatibile */
}
Deși expresiile CSS generau un consum suplimentar de memorie și procesor deoarece erau recalculate la fiecare redimensionare a ferestrei sau eveniment de scroll, ele au constituit o punte tehnologică esențială pentru dezvoltatori într-o eră în care Internet Explorer domina încă piața desktop.
