Espressioni css dinamiche

Le espressioni In questo articolo ti voglio parlare delle cosiddette “espressioni CSS” che consentono di inserire porzioni di codice javascript […]
Espressioni css dinamiche

Le espressioni

In questo articolo ti voglio parlare delle cosiddette “espressioni CSS” che consentono di inserire porzioni di codice javascript all’interno dei fogli di stile per gestire dinamicamente i valori delle proprietà css. Ormai non piu standard, e quindi deprecate, possono però risultare in alcuni casi (ma davvero pochi) comode per gestire alcune regole come max/min-width/height che IE6 non interpreta. Questa che segue è una parte tradotta in italiano dell’articolo in lingua inglese che è possibile trovare sul sito msdn microsoft a questo indirizzo.

Le Proprietà Dinamiche

Le proprietà css dinamiche sono state deprecate e sono attualmente supportate solo per le pagine Web visualizzate in IE5 (non standard) o in IE7 modalità standard. Microsoft Internet Explorer 5 offre una facile funzione che consente agli autori e sviluppatori Web di migliorare notevolmente l’aspetto e il rendering delle pagine web. Utilizzando la potenza della proprietà dinamiche, è possibile dichiarare i valori delle proprietà non solo come costanti, ma anche come formule. Le formule utilizzate in una proprietà dinamica possono ereditare i valori di riferimento della proprietà da altri elementi, consentendo in tal modo agli autori grande flessibilità nella progettazione delle loro pagine web.

In pratica…

Questo che segue invece è un piccolo esempio pratico per chiarire meglio il discorso e la differenza tra costanti e variabili. Entrambe le dichiarazioni portano allo stesso risultato! Nel primo caso imponiamo come valore di width la costante 100%, perchè sappiamo che se vogliamo che il div#container assuma una larghezza pari a quella del body, in assenza di altri valori che possano influenzarlo, tale larghezza deve essere pari al 100% del suo contenitore ed essendo, per facilità di esercizio, il div diretto discendente del body, tale valore sarà proprio pari al 100% del body. Nel secondo caso, otteniamo esattamente lo stesso risultato, con l’unica differenza che alla width non gli viene passato un valore statico ma bensì un valore dinamico ricavato tramite un espressione javascript che suonerebbe piu o meno cosi: “intercetta nell’albertatura del documento html il valore della larghezza del tag body e utilizza questo valore come larghezza del div#container”. Un passaggio molto complesso che in questo particolare caso sarebbe stato inutile, data la semplicità, ma come già ti dicevo prima, potrebbe essere utile calcolare valori come min-width o max-width, totalmente ignorati da IE6. Ma vediamo il tutto concretamente:

/*La larghezza del div#container deve essere pari alla larghezza del body*/
#container{
    width:100%;
}

/*La larghezza del div#container deve essere pari alla larghezza del body*/
#container{
    width: expression(document.body.clientWidth);
}

Chi le interpreta?

Le proprietà css dinamiche (chiamate anche “espressioni CSS”) non sono più supportate in Internet Explorer 8 e versioni successive ma solo in modalità IE7 dello stesso. Internet Explorer 8 in modalità IE8 è pienamente compatibile con i Cascading Style Sheets (CSS), Livello 2 revisione 1 (CSS2.1), le espressioni css per questa detrminata versione non dovrebbero essere più necessarie. Se ancora vi fosse la necessità, le proprietà css potranno essere sostituite con JavaScript standard. Questa decisione è stata presa per il rispetto prima di tutto degli standard stessi, perchè ovviamente i fogli di stili non passano la validazione, per le prestazioni dei browser in quanto sovraccaricano il motore del rendering sottoponendolo a calcoli inutili e pesanti e infine per ragioni di sicurezza; il tutto anche specificato nel blog di IE sotto la voce “Espressioni Ending”.

Riflessioni finali

Tali espressioni infatti se non strettamente necessarie, andrebbero sempre e comunque evitate. Ci sono casi particolari, in cui se sei impossibilitato ad agire sul markup e devi confrontarti con browser obsoleti come ie6 e necessiti per forza di regole particolari, forse le espressioni risultano essere l’ultima e l’unica spiaggia possibile. Prima di arrivare a questo però … pensa prima a tutte le possibili soluzioni css standard, fermati a riflettere, osserva e analizza il problema. Per giungere alla soluzione, basta spostare anche di poco il proprio metro di giudizio. La soluzione è sempre li, siamo noi che dobbiamo modificare la nostra forma mentis affinchè la stessa si palesi ai nostri occhi. Come si ottiene tutto questo? non mi stancherò mai di dirlo, con una forte base teorica e con tanto, tanto esercizio pratico.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github