Corsi on-line

GMail supporta le media query CSS

Come spiegato di recente da Pierce Vollucci, Associate Product Manager presso GMail e Steve Bazyl, Developer Programs Engineer di Google Apps, i messaggi di posta elettronica inviati tramite il client di Mountain View possono essere letti in diverse tipologie di dispositivi; è quindi necessario garantire un livello di rendering ottimale al di là del device di riferimento, realizzando delle email quanto più possibile responsive.mqDa qui l’esigenza di introdurre in GMail il supporto per le media query, cioè quei filtri che quando vengono applicati alle regole di stile di un progetto ne consentono la visualizzazione su un’ampia platea di display e diagonali, da quelli per i computer Desktop agli smartphone, dai tablet alle Smart TV. L’idea è quindi quella di garantire un’esperienza utente ottimale che si adatti ma non dipenda dallo schermo utilizzato per la lettura o dalle sue dimensioni.

Grazie al supporto per le media query in GMail, e per l’inserimento di stili CSS aggiuntivi in generale, si potranno confezionare messaggi che siano leggibili senza alcuna difficoltà su un terminale da scrivania così come su un cellulare in modalità portrait (quindi in verticale) o su un tablet in modalità landscape (quindi in orizzontale). Le regole utilizzate potranno essere modificate in base a criteri come la larghezza, la rotazione e la risoluzione.

Si tratta quindi di una novità dedicata in particolare agli sviluppatori e ai Web designer che per introdurre le media query nei messaggi non dovranno ricorrere a configurazioni particolari, si potrà utilizzare infatti la comune sintassi CSS. Il codice seguente mostra per esempio come applicare un colore specifico (nel nostro caso il verde)  quando la larghezza di uno schermo supera i 450px:

@media screen and (min-width: 450px) {
  .colored {
    color:green;
  }
}

Per maggiori informazioni riguardo all’utilizzo delle media query in GMail è possibile consultare la documentazione ufficiale presente nel sito Web della piattaforma.

Via Google Apps Developers Blog

Post correlati
I più letti del mese
Tematiche