CSS  »  Articoli  »  Responsive Design 

Molti browser per il mobile hanno implementato questa funzionalità, ma in modi diversi:

1. Alcuni leggono solo il CSS handheld.
2. Alcuni leggono solo il CSS handheld se ce n'è uno, ma leggono quello screen nel caso contrario.
3. Alcuni leggono sia quello handheld sia quello screen.
4. Alcuni leggono solo il foglio screen.

L'ultima di queste situazioni non è certo una buona interpretazione delle specifiche. Da quello che ho capito in seguito a delle discussioni che ho avuto con alcuni produttori, essi hanno seguito questo approccio perché credevano che i fogli di stile handheld non fossero ben progettati e mantenuti rispetto a quelli screen, e perché, quindi, fornivano un'esperienza inferiore agli utenti.

Di recente, i browser per il mobile di Opera (Mobile e Mini), che implementavano la seconda opzione, sono passati di default a ad usare il foglio di stile screen, lasciando all'utente di scegliere il precedente comportamento.

La maggior parte (se non tutti) i nuovi browser, in omaggio al motto del "full web", semplicemente ignorano il foglio di stile handheld, lasciando per strada quelli che ancora sperano in un approccio fondato sui CSS. O almeno così sembra.

Le Media Queries: una nuova speranza

Le versioni recenti di Opera e Safari implementano le Media Queries CSS, uan specifica che è ancora in fase di sviluppo presso il W3C. Le Media Queries offrono più di una semplice lista di Media Type CSS. Consentono agli autori di personalizzare un foglio di stile in base ad alcune proprietà note come la misura dello schermo su cui viene resa la pagina.

Un esempio. Il codice che segue specifica un foglio di stile da usare sul browser dell'iPhone e non sul browser che gira su un PC usando (come mostrato da Craig Hockenberry su A List Apart):

<link rel="stylesheet" href="handheld.css" 
media="only screen and (max-device width:480px)"/>

Ci sono buon ragioni per sperare che il numero di browser che supportano le Media Queries andrà a crescere, magari grazie alla visibilità ottenuta dall'iPhone su scala mondiale.

Come si comportano i browser

La tabella che segue mostra come vari popolari browser per il mobile si comportano. La maggior parte delle informazioni proviene dai dati grezzi raccolti per i test del W3C sul modo in cui i browser reagiscono di fronte alle Media Queries e ai Media Type dei CSS.

Data questa diversità, potreste subito chiedervi quanti fogli di stile dovrete creare per ottenere un'esperienza mobile usabile. E come uno potrebbe adattarsi al gran numero di utenti che accedono al web con dispositivi mobili che in qualche modo implementano le tecniche dei Media Type CSS?

"Questi non sono i fogli di stile che cerchi"

Propongo una tecnica per usare i fogli di stile che assicura che la maggior parte dei browser useranno le regole specifiche per i dispositivi mobili ed eviteranno le regole che non siano mobile-friendly. I browser per PC leggeranno i fogli di stile concepiti per loro. Attenzione: rispetto al primo obiettivo, si tenga presente che non funzionerà con i browser mobili che applicano solo i fogli di stile screen e non implementano le Media Queries CSS. Funziona con tutte le versioni di Opera (Mobile e Mini), su Safari (iPhone), il browser Palm Blazer, IEMobile e con un buon numero di altri browser (si veda la tabella riassuntiva qui sotto).

Altri articoli

Altre guide

Altre newsletter