CSS Expression, ovvero: integrare Javascript in un foglio di stile

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

I CSS mettono a disposizione dei Web designer il comando expression che, come il suo nome lascia ad intendere, accetta un'espressione dinamica che verrà scritta in Javascript.

In questo modo sarà possibile effettuare calcoli con Javascript, oppure valutare dinamicamente dei casi, quindi passare al comando expression il risultato, valorizzando quindi l'elemento CSS con cui si sta stilizzando un elemento HTML.

Per capirci, la sintassi è la seguente:

comandocss: expression(javascript);
Facciamo un esempio. Creiamo un livello a cui impostiamo un ID; attraverso expression coloriamo lo sfondo del colore definito in uno script e calcoliamo dinamicamente la sua larghezza, impostandola al 50% delle dimensioni dello schermo.

Ecco il codice HTML che va inserito nel corpo della pagina:
<div id="livello">Ciao, come stai?</div>
Come detto, nel codice Javascript (che inseriremo nell'intestazione della pagina) ci limitiamo ad impostare un colore di sfondo:
<script type="text/javascript">
var colore = "FF0000";
</script>
Segue il codice CSS da inserire nell'intestazione della pagina, dopo lo script:
<style type="text/css">
#livello
{
    background: expression("#" + colore);
    width: expression(window.screen.width / 2);
}
</style>
Coloriamo il background passando la variabile "colore" definita nello script, concatenandola al cancelletto. In fine calcoliamo la larghezza dello schermo e la dividiamo per 2 per ottenere il 50% desiderato.

Ovviamente si tratta solo di un esempio didattico finalizzato a comprendere il meccanismo, dato che per ottenere la larghezza al 50% potremmo scrivere direttamente:
width: 50%;

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (49.892)

:: Referenze dei fogli di stile Css (41.899)

:: Menu ad effetto mouseover con i Css (39.293)

:: Effetti sui link con i Css (30.281)

:: Testo verticale coi Css (20.096)

:: Angoli smussati in un box coi Css (18.978)

:: Box con effetto ombra con i CSS3 (16.386)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.290)

:: Stilizzare i form Html con i Css (16.102)

:: Colorare le barre di scorrimento del browser con i Css (14.399)

IN EVIDENZA
DOWNLOAD