Siti web mobili per cellulari e tablet pc come iPhone, Android o iPad con CSS3
Vediamo cosa sono e come utilizzare le CSS3 Media Queries. Ecco alcuni esempi.
Uno degli scogli più aguzzi dello sviluppo web è rappresentato dal rendere compatibile il prodotto da creare per ogni browser e dispositivo mediatico di fruizione (Desktop monitor, tablet PC, smartphone, eccetera). In tempi passati non erano rari i siti nel cui footer veniva indicato “sito ottimizzato per browser X e Y ad una risoluzione massima X e Y”. Il ridisegno degli standard e dei browser stessi ha permesso di migliorare sensibilmente la situazione, anche se alcune problematiche persistono.
Una delle soluzioni di bypass del problema visualizzazione è rappresentata, di solito, dalla creazione di un sito ad hoc ottimizzato per dispositivi mobili: attività spesso dispendiosa in termini di tempo e risorse. Tuttavia, è possibile usare alcuni “trucchi” che permettono un risparmio in termini di codifica.
Stiamo parlando delle CSS3 Media Queries, una tecnica che consente di “riconoscere” il media operativo in quel momento e di impostare o caricare delle regole CSS precise settate in precedenza, richiamate dai fogli di stile appositamente creati per ogni strumento di riproduzione (un CSS per i tablet, uno per gli smartphone, un altro per i monitor PC eccetera).
Il primo modo di usare le CSS3 Media Queries è la creazione di un markup alternato nel foglio di stile, specificamente creato per una risoluzione. In particolare:
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body { background: black; }} // Un css per una risoluzione smartphone, dove max-width controlla la dimensione dell’area visibile e max-devixe-widht controlla la risoluzioneOra, salviamo il nostro foglio di stile dedicato, implementiamolo in HTML tra i tag <head><head/> e indichiamo in quali condizioni caricarlo, ben specificate dal tag “media”:
<link href='cartella-stili/css-per-smartphone.css' media='only screen and (max-width: 480px), only screen and (max-device-width: 480px)'rel='stylesheet' type='text/css'>
Al markup creato sopra possiamo aggiungere il meta tag “viewport”:
<meta name="viewport" content="width=device-width" />
Serve a “garantire” l’ottimizzazione per iPhone.
- Articolo precedente Transizioni con CSS3 come dissolvenza o effetti sullo sfondo di una immagine senza JavaScript
- Articolo successivo CSS3 background: sfondi multipli con più di una immagine