Regole di sintassi dei WAP CSS
- un selettore;
- una proprietà;
- un valore.
Il selettore specifica l'elemento (o gli elementi) interessato/i dalla regola di stile. Tipicamente il selettore è l'elemento XHTML MP al quale applicare lo stile. La proprietà consente di specificare lo stile che si desidera impostare. Il valore della proprietà è il valore che si assegna a una certa proprietà. La sintassi di una dichiarazione WAP CSS è simile alla seguente:
Un esempio di una dichiarazione WAP CSS:
La dichiarazione di stile appena vista, chiede al browser WAP di allineare il testo racchiuso all'interno di tutti i paragrafi (<p></p>) a sinistra. Ovviamente, come avviene nei CSS per il web, è possibile racchiudere più proprietà all'interno delle parentesi graffe, separate da virgole; vediamo un esempio:
Vediamo un altro esempio di dichiarazione WAP CSS. Lo stile che verrà assegnato chiede al browser WAP di allineare i testi, racchiusi nei paragrafi, a sinistra e di assegnare loro un colore grigio:
E' anche possibile specificare più di un selettore utilizzando una virgola. La sintassi è come nell'esempio seguente:
Vediamo un esempio concreto di quanto appena visto. La dichiarazione di stile farà sì che tutti i titoli h1 ed i paragrafi saranno allineati a sinistra ed avranno un colore arancio:
I commenti nei fogli di stile WCSS
Nei WAP CSS i commenti sono racchiusi all'interno di slash (/) ed asterisco (*), scritti senza parentesi. Abbiamo il commento di apertura (/*) e quello di chiusura (*/). Il seguente è un esempio perfettamente funzionante di dichiarazione in un foglio di stile:
/* commento su una line */
/* commento su
più
linee
*/
text-align: left; /* il commento deve essere posto alla fine della dichiarazione */
color: orange;
}
Applicare gli stili WCSS ad un documento XHTML MP
Ci sono tre modi per applicare stili WCSS a un documento XHTML MP:
- link ad un foglio di stile esterno;
- dichiarazioni poste nella head del documento XHTML MP;
- indicare gli stili WCSS con l'attributo style.
Se si volesse separare uno stile WAP CSS da un documento XHTML MP, si dovrebbe usare il primo mmetodo. Per la seconda e la terza soluzione, gli stili WCSS sono inseriti all'interno del documento XHTML e non è possibile usufruire dei benefici per la separazione dei contenuti dalla presentazione, come trattato in precedenza quando sono stati trattati i vantaggi nell'utilizzo dei WCSS nei siti web per dispositivi mobili.
Link ad un foglio di stile WAP CSS esterno
L'elemento <link> è usato per fare riferimento ad un foglio di stile CSS e lo si deve mettere nella <head> di un documento XHTML MP. La sua sintassi è simile al seguente codice:
L'attributo href specifica l'URL del foglio di stile WAP CSS. I valori degli altri due attributi (stylesheet e text/css) rimangono così come sono. Per curiosità: l'attributo rel specifica il rapporto tra il documento XHTML MP e il documento di riferimento (in questo caso stylesheet) in quanto trattasi di un foglio di stile; l'attributo type specifica il MIME Type del documento a cui si riferisce.
Cominciamo a mettere in pratica quanto spiegato sino ad ora, realizzando una semplicissima pagina XHTML MP e linkando ad essa un foglio di stile esterno. A tal proposito va fatta una importante precisazione: come ho avuto modo di scrivere nell'articolo sulla visualizzazione di un documento XHTML MP, la pagina stessa deve essere a tutti gli effetti una pagina con sintassi uguale ad un documento XHTML ed avente estensione .xhtml.
Grazie all'enorme sforzo fatto dal Developer Team di Opera, è possibile collegarsi alla demo di Opera Mini Features e provare le pagine che verranno realizzate nel seguente tutorial. Ovviamente si dovrebbe disporre di uno spazio web sul quale uplodare i files XHTML MP e richiamarli attraverso il simulatore presente nel sito, di cui riporto una schermata:
Diversamente, aprire 2 tabs del browser, collegarsi alla demo di Opera e digitare l'URL che di volta in volta scriverò per visualizzare le pagine XHTML MP.
Come primo esempio, realizziamo una pagina contenente un titolo e qualche paragrafo. Possiamo vedere la pagina di esempio, collegandoci al sito di Opera, inserendo nel simulatore il seguente url: http://www.extrowebsite.com/lab/xhtml-mobile-profile/prima-pagina.xhtml.
Possiamo ritenerci soddisfatti, anche se si tratta di una semplice pagina, in quanto non è stata riscontrata nessuna differenza di visualizzazione tra il simulatore di Opera ed un Nokia N95 8GB.
Inserire gli stili WCSS tra i tag head del documento
L'elemento style dei WCSS può esere usato nella head di un documento XHTML MP. Un foglio di stile usato in questo modo viene definito "WCSS interno" al documento stesso. In questo modo, a differenza di quanto scritto più su, gli stili si applicano solo al singolo documento interessato dalle dichiarazioni dei CSS. La sintassi è come l'esempio seguente:
dichiarazioni CSS...
</style>
Se volessimo replicare il primo esempio, che avera un foglio di stile WAP CSS esterno, con dichiarazioni WAP CSS interne, dovremmo scrivere nel seguente modo:
body{
font-family:tahoma, verdana, arial, sans-serif;
background:#ddd;
}
h1{
color:#808080;
border-bottom:1px solid #333;
padding:0 0 3px;
}
p{color:#555;}
</style>
La seconda pagina di esempio che abbiamo ottenuto (si richiami dal simulatore di Opera - o di un altro device mobile - il seguente URL: http://www.extrowebsite.com/lab/xhtml-mobile-profile/seconda-pagina.xhtml) non è per nulla dissimile dalla prima, con una differenza molto importante: se si è in presenza di un sito di pochissime pagine potrebbe andar bene una soluzione del genere; se, invece, raggiunge un numero di pagine importanti, allora comincia ad essere molto dispendioso (oltre che una perdita di tempo) aprire ogni documento XML MP ed apportare le modifiche al colore del testo o voler inserire nuove dichiarazioni CSS ecc...
Specificare gli stili WCSS direttamente negli elementi XHTML MP (Inline Styles)
Un altro metodo è quello di dichiarare in ogni singolo elemento del documento XHTML MP, la formattazione che si vorrebbe dare attraverso i CSS. Un classico esempio è:
Personalmente lo escluderei, come anche il metodo visto più su, in quanto appesantirebbe, seppur di poco, tutte le pagine del sito, olre al solito discorso di manutenibilità delle singole pagine.
| < Prec. | Succ. > |
|---|
