Benvenuti su Vivacity Design

Credo che pochissimi programmatori della vecchia scuola (e quasi nessuno delle nuove leve) conoscano la versione alternativa di stilizzazione proposta nel 1996 da Nestcape Communications nella versione Navigator 4. Si tratta dei JSSS, o JavaScript Style Sheets, implementati soltanto nei Navigator da 4.01 a 4.8 e poi abbandonati perchè non accettati dal consorzio W3C. Subito dopo il rilascio di Netscape Communicator nel 1997, Netscape smise di promuovere JSSS, concentrandosi invece sullo standard CSS rivale, che era supportato anche da Internet Explorer e aveva un'accettazione molto più ampia da parte del settore. I JSSS usavano la sintassi DOM JavaScript abbinata alle definizioni tipiche di CSS, e venivano inseriti nelle pagine tra i tag . Un tipico esempio di struttura JSSS é il seguente:

tags.H3.color = "blue"; 
tags.H3.fontSize = "24pt";

Che corrisponde al CSS:

H3 { color : blue; font-size : 24pt } 

Come evidente, la struttura JSSS é molto verbosa, e richiede più caratteri rispetto a CSS, ma JSSS prevedeva anche, in piena conformità con la sintassi JavaScript, la capacità di associare più definizioni tramite la parola chiave WITH:

with (tags.H3) { 
        color = "blue"; 
        fontSize = "24pt"; 
        } 

Si possono impostare gli attributi di tutti i tag usando il la parola chiave ALL:

     tags.all.color = "verde";

JSSS supportava i selettori contestuali proprio come CSS, dando la possibilità di definire gli stili solo per i tag nidificati in determinati modi.

     tags.contextual(OL, OL, LI).listStyle = "upper-roman"; 

Corrispondente alla definizone CSS:

 OL OL LI { list-style : upper-roman }  
 

JSSS, al momento del rilascio, prevedeva anche la definizione di stili per gli ID, non solo per le classi (caratteristica implementata in CSS solo più tardi). Definendo un tag con ID:

<p class=abstract id=1A> 
 

Si poteva definire lo stile sia per la classe 'abstract' generica, sia per il particolare paragrafo con ID = 1A all' interno della classe, procedura molto utile per definire 'eccezioni' allo stile della classe:

classes.abstract.P.color = "red"; 
ids.1A.color = "blue"; 
 

La definizione sopra assegnava il colore Rosso a tutti i paragrafi della classe 'abstract', ma tra questi assegnava al paragrafo con ID=1A il colore Blu.
L' utilizzo della struttura JavaScript permetteva di effettuare scelte e porre condizioni all' interno dello stile, come per esempio:

 with (tags.BODY)  
        if (visual.colorDepth > 2) { 
           bgColor = "yellow"; 
           color = "blue"; 
           } 
        else { 
           bgColor = "white"; 
           color = "black"; 
           } 

L' esempio qui sopra era un ottimo metodo per 'reagire' al tipo di monitor: fa sì che il documento utilizzi testo blu su sfondo giallo se il display supporta più colori, e testo nero su sfondo bianco in caso contrario (monitor monocromatico).
Gli stili JSSS sono associati a un documento esattamente come CSS: come foglio di stile eterno (external, o 'linked'), come stile a livello di documento (internal, o 'embedded') e come stile in linea (inline) all'interno di un tag.
Per fare riferimento a un foglio di stile esterno nel documento HTML, basta includere un link tag nel documento:

  <link rel=stylesheet type="text/Javascript" href="styles.jss">

Per l' utilizzo 'internal', invece, all'interno del documento bastava usare la stuttura:

     <style type="text/Javascript">  
     <!--  
     tags.H3.color = "blu";  
     -->  
     </style> 
     

nella sezione Head del documento HTML.