Nella lezione precedente abbiamo osservato come i documenti scritti in XHTML MP richiedano di eliminare dal codice quasi ogni riferimento al modo in cui i contenuti saranno visualizzati, concentrando i comandi sulla strutturazione dell'informazione. Non significa, tuttavia, che le pagine del mobile web debbano essere anonime e prive di qualità grafica. È infatti possibile ricorrere ai fogli di stile CSS per l'aggiunta di istruzioni relative all'aspetto dell'informazione. Per i dispositivi mobili è in via di definizione - da parte del W3C - uno standard denominato CSS Mobile Profile ( http://www.w3.org/TR/css-mobile ).
Le specifiche di questo linguaggio, che è costituito da un sotto-insieme del linguaggio CSS 2.1 - consentono di associare i fogli di stile in tutti e quattro i modi previsti:
- Mediante l'elemento <link> nella parte iniziale ( <head> ) del documento, per fare riferimento ad un foglio di stile esterno;
- Utilizzando la regola @import all'interno dell'elemento <style> , sempre in riferimento ad un CSS esterno;
- Scrivendo le regole di stile direttamente nella parte <head> del documento all'interno del tag <style> (foglio di stile interno e relativo alla singola pagina);
- Inserendo le proprietà stilistiche in linea all'interno dell'attributo style (previsto da tutti i tag);
Tra le varie possibilità offerte si consiglia di adottare la prima, ossia l'uso di fogli di stile esterni collegati mediante l'elemento <link> . È una soluzione che appare la più compatibile tra ai vari dispositivi in commercio rispetto all'uso di @import. Inoltre scrivere regole di stile all'esterno del documento XHTML MP garantisce un codice più leggero, lo sfruttamento degli eventuali sistemi di caching delle pagine messe a disposizione da alcuni browser ed evita ai dispositivi non capaci di interpretare i CSS di scaricare informazioni inutilizzabili. Osservazioni, queste, che vanno sfruttate anche nel caso di adattamento a dispositivi mobili di un sito web esistente.
La scrittura delle regole CSS MP segue le medesime regole previste da CSS 2.1. È possibile definire classi e selezionare elementi mediante il loro identificatore univoco (specificato mediante l'attributo XHTML "id"). Per le sintassi più complesse si consiglia tuttavia di far riferimento alle specifiche del linguaggio.
A causa delle limitate capacità di elaborazione dei dispositivi è opportuno evitare istruzioni troppo elaborate che potrebbero diminuire l'efficienza dei browser meno performanti. Le istruzioni di stile dovrebbero essere contenute anche per non rallentare eccessivamente il trasferimento dei dati. Si consiglia, quindi, di alleggerire i CSS sfruttando la logica della cascata e raggruppando i selettori che condividono lo stesso stile. Un metodo ulteriore per ottimizzare le dimensioni - valido anche per le piattaforme PC - consiste nell'eliminare i commenti e ridurre il più possibile le interruzioni di riga e gli spazi bianchi (a discapito - tuttavia - della leggibilità del codice).
L'insieme di proprietà CSS Mobile Profile comprende la gestione di:
- Background degli elementi (colore, immagini di sfondo, posizione, ripetizione);
- Bordo degli elementi (colore, tratteggio, spessore)
- Colore del testo;
- Carattere (tipo, dimensioni, stili corsivo e obliquo, grassetto);
- Liste (immagine in luogo del punto, posizionamento della lista, tipo di contatore);
- Testo (allineamento, decorazione, indentazione, maiuscolo/minuscolo, allineamento verticale del testo, trattamento dello spazio bianco)
- Box model (larghezza, altezza, margine, padding interno, floating)
- Visualizzazione degli elementi (proprietà "display" e "visibility");
Come si può notare è possibile intervenire sia sulla formattazione del testo che sull'impaginazione degli elementi, Tuttavia CSS MP non consente l'uso di tutti i valori possibili per le proprietà elencate. Per informazioni più dettagliate è opportuno far riferimento alle specifiche ufficiali e testare i propri CSS sui dispositivi reali. Le proprietà e i valori non supportati saranno semplicemente ignorate dal browser.
Adattando un sito web dovremmo cercare di avere cura che la presentazione della pagina si trasformi elegantemente mantenendo il CSS pensato per il desktop. Le istruzioni più rischiose, in tal senso, sono spesso quelle relative alle dimensioni e al posizionamento degli elementi sulla pagina. Nel primo caso è possibile che esse siano state calcolate in pixel avendo in mente lo schermo di un PC, chiaramente più grande del un display di uno smartphone o di un palmare. Il posizionamento mediante CSS può invece condurre a inopportuni effetti di sovrapposizione tali da nascondere completamente i contenuti o i menu di navigazione.
Le specifiche di XHTML MP consentono, in realtà, di ovviare a questo problema associando al documento un foglio di stile redatto appositamente per i dispositivi mobili. Tecnicamente, questa opportunità si può sfruttare mediante l'attributo media, disponibile per gli elementi <link> e <style> : utilizzando il valore "handheld" si potrà così indicare al browser che quel particolare foglio di stile va richiamato se il dispositivo è un cellulare o un palmare. Per esempio le istruzioni:
<link rel="stylesheet" href="all.css" type="text/css" media="all" />
<link rel="stylesheet" href="pc.css" type="text/css" media="screen" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />
Indicano rispettivamente l'associazione di un foglio di stile valido per tutti i dispositivi (all.css), uno pensato per una visualizzazione su schermo tradizionale (pc.css) e uno che contiene istruzioni dedicate a chi utilizza un dispositivo mobile (mobile.css). Sfruttando un simile meccanismo è teoricamente possibile servire ai vari dispositivi lo stile di presentazione appropriato.
Al momento, tuttavia, diversi browser non sono ancora in grado di interpretare correttamente queste istruzioni. Spesso vengono recepite anche le istruzioni pensate per il media "screen", creando così una sovrapposizione di regole di difficile gestione.
In questa fase di transizione un metodo rapido per uscire da simile impasse consiste, semplicemente, nel suddividere il proprio css in più file e sfruttare a proprio vantaggio l'interpretazione sequenziale dei CSS da parte dei browser:
- In un primo file saranno inserite le regole comuni a tutti i dispositivi, relative - per esempio - alla formattazione del testo, al trattamento del carattere e alla gestione delle liste;
- In un secondo file potremo inserire, (con metodo @import per evitare che i dispositivi meno performanti scarichino anche queste informazioni) le regole per il controllo dell'impaginazione su pc desktop;
- In un terzo file, infine, inserire le istruzioni che gestiscono la presentazione su mobile, andando a riscrivere le regole che potrebbero creare problemi.
In questo modo si sacrifica un po' di efficienza (vengono trasmessi più dati) ma si hanno maggiori probabilità di fornire agli utenti una presentazione gradevole e fruibile.
Il file CSS dedicato ai dispositivi mobili può essere anche utilizzato per gestire la quantità di informazione visualizzata dall'utente finale. In diversi punti delle precedenti lezioni abbiamo potuto osservare che un limite all'esperienza utente può provenire dall'eccessiva quantità di informazione. I fogli di stile possono fornire - in tal senso - una tecnica molto utile. La proprietà "display: none" consente di nascondere quegli elementi che sono ritenuti inopportuni per l'utente. Per esempio si potrebbero occultare i banner o altre aree giudicate di minore importanza.
Un'operazione più efficiente ma che richiede un'intervento lato server (mediante linguaggi come ASP, PHP o JSP) consiste nel tentare di riconoscere lo strumento che sta richiedendo una determinata pagina e fornire in risposta solo il CSS ottimizzato. Il metodo più semplice per ottenere questo risultato consiste nel recuperare la stringa identificativa del browser richiedente. Si tratta tuttavia di un metodo che ha diversi inconvenienti, dal momento che esiste un'estrema variabilità nel settore e non è un approccio che offre garanzie nel lungo periodo (nuove versioni di un dato browser potrebbero usare una stringa radicalmente diversa). Dedicheremo una sezione della presente guida ad approfondire il tema del riconoscimento del device.
In riferimento all'uso dei fogli di stile per dispositivi mobili si consiglia infine di seguire alcuni accorgimenti di accessibilità:
- I colori specificati per testo e sfondo dovrebbero garantire una buon contrasto (si veda, a tal proposito, l'iniziativa http://www.contrastocolori.org );
- Verificare che il testo sia leggibile in assenza dei colori specificati sul foglio di stile: molti dispositivi possiedono ancora display in grado di rappresentare un gamma cromatica ridotta;
- Il documento HTML dovrebbe possedere un ordine logico coerente anche in presenza di fogli di stile. Si noti che alcuni operatori di telecomunicazione inseriscono un filtro (mediante un server proxy) che elimina del tutto il collegamento al CSS, rendendo così vano il lavoro dello sviluppatore;
- Se si costruiscono menu a comparsa mediante CSS e Javascript, assicurarsi che essi siano fruibili anche in assenza di queste due tecnologie;
- Indicare unità di misura relative (usando "em", valori percentuali o parole chiave come "small")
- Evitare di inficiare la leggibilità del testo (corsivo, liste senza punto, lampeggiamenti), e il testo dovrebbe di dimensioni tali da risultare leggibile senza ridimensionamento.
- Utilizzare sempre lo stile per imporre una presentazione al testo senza ricorrere all'uso di scritte all'interno di immagini.
