Il presente articolo è stato tradotto automaticamente.

Creazione di applicazioni HTML5

Utilizzo delle CSS3 Media Queries per la creazione di pagine Web più reattive

Brandon Satrom

Scaricare il codice di esempio

Questo articolo discute Internet Explorer 10 Platform Preview. Tutte le informazioni sono soggette a modifiche.

A pochi anni fa, sono stato avvicinato da un client che hanno voluto costruire un sito Web mobile-solo per la sua base di utenti giovane, esperto di tecnologia. Il progetto è stato lanciato in realtà a noi come un "sito di iPhone" ed è venuto con un design completamente concepito. Eccitato per creare un mobile app all'avanguardia, abbiamo iniziato sul serio e compiuto progressi decenti — fino a quando è venuto il momento di prendere in considerazione altri dispositivi mobili sul mercato. Questo client ha voluto il supporto per quasi tutti loro. Iniziò così il nostro valoroso sforzo di rispondere a due del volto di sviluppatori Web domande più importante quando si tenta di costruire esperienze mobile su misura: Come fai a sapere quando per cambiare l'esperienza per un browser mobile e come fare si va di fare quel cambiamento quando uno è necessario?

Reattivo Web Design

Queste domande sono al centro della progettazione Web reattiva, un termine coniato da Ethan Marcotte (bit.ly/aO2cFa). Reattivo Web design è sull'utilizzo di indizi contesto dal browser per personalizzare il modo che un sito viene presentato ad un utente e anche il modo in cui che esso si comporta. Si tratta di rispondere alle informazioni presentate dal browser con un'esperienza personalizzata e avvincente che si adatta alle aspettative di interazione dell'utente sul dispositivo. Se il destro indizi rivelano abbastanza informazioni sul browser e il dispositivo in questione, diventa fattibile per fornire personalizzazioni, come supplente immagini e layout fluido.

Tradizionalmente, ottenere tali indizi di contesto analizzando la stringa agente utente presentata dal browser — una pratica chiamata browser o fiutando UA — e quindi utilizzare tali informazioni per determinare come procedere. Ho coperto UA fiutando nel mio articolo di settembre 2011 "nessun Browser lasciati alle spalle: Una strategia di adozione di HTML5"(msdn.microsoft.com/magazine/hh394148). Come osservato in poi, browser sniffing è inaffidabile ed essenzialmente è stata sostituita in favore di rilevamento caratteristica, che ti aiuta a prendere decisioni su markup, CSS e JavaScript, basato sulle funzionalità disponibili e non su un determinato browser e versione.

Nel contesto di reattivo, Web design, tutti i computer desktop e principali mobili browser moderni supportano una funzionalità denominata le query di mezzi di comunicazione, un modulo CSS3 che estende l'idea di tipi di supporto, introdotto nel CSS 2.1 — la possibilità di specificare i fogli di stile alternativi per la stampa, schermo e simili — con la capacità di determinare alcune delle caratteristiche fisiche di un dispositivo visitando un sito. Simile alla logica per l'utilizzo di rilevamento caratteristica, query supporti permettono di concentrarsi su come ottenere gli indizi di scelta rapida per un visitatore corrente, che è possibile utilizzare quindi funzionare personalizzare l'esperienza consegnato. Il potere delle query supporti è che essi forniscono tali indizi per fogli di stile.

In questo articolo, provvederemo a fornire una panoramica del modulo CSS3 query supporti. Ti discutere brevemente il suo uso e la sintassi e poi mostrare un semplice esempio che sfrutta le query supporti per creare visualizzazioni di smartphone e tavoletta friendly per una galleria di foto online. Infine, condivido una punta essenziale per tutte le forme di sviluppo mobile prima avvolgendo con una breve discussione su ascoltatori query di mezzi di comunicazione, una specifica separato del World Wide Web Consortium (W3C) (bit.ly/wyYBDG) che fornisce un'API per reagire ai cambiamenti nell'ambiente multimediale tramite JavaScript. Entro la fine di questo articolo, si dovrebbe avere una solida base per la creazione di reattivo di siti Web e applicazioni utilizzando solo CSS e alcuni stili su misura.

CSS Media query

Come accennato in precedenza, CSS 2.1 attualmente supporta i fogli di stile dipendenti multimediale basati su dichiarazioni "tipo di mezzi di comunicazione" (bit.ly/xhD3HD). Il codice riportato di seguito viene illustrato come utilizzare tipi di supporti per specificare i fogli di stile condizionale:

<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Con questi elementi sul posto, un sito caricherà un foglio di stile diverso dal foglio di stile predefinito (o "schermo") quando viene caricata una pagina in modalità di anteprima di stampa. Tanto utile quanto questa caratteristica è (anche se storicamente sottoutilizzato), essa non fornisce alcun indizio di contesto utile da utilizzare per la creazione di siti Web veramente reattive. E anche se i media tipi particolari specifica l'utilizzo di tipi di 10 supporti, fornitori di browser abbracciarono mai completamente tutti i tipi specificati.

L'attributo di "media" depone un fondamento solido, però, e il W3C ha deciso di creare query supporti (bit.ly/zbIeDg) proprio in cima. Come specificare un tipo di supporto (ad esempio, la stampa, schermo o tutte) le query supporti consentono di aggiungere espressioni per l'attributo media che verifica la presenza di alcune funzionalità multimediali, come ad esempio la larghezza, altezza, orientamento e anche la risoluzione dello schermo del dispositivo corrente. Ecco un esempio che carica il foglio di stile Main. css se il tipo di supporto è schermo e la larghezza del dispositivo è di almeno 800 pixel:

<link rel="stylesheet" media="screen and (min-width: 800px)" href="main.css" />

La query di mezzi di comunicazione è ciò che è all'interno delle parentesi. Sul lato sinistro specifica la proprietà di testare (larghezza), con un optional min - o max-modifier, e il lato destro specifica il valore di tale proprietà. Se il dispositivo o il browser in questione presenta la larghezza dello schermo di almeno 800 pixel, verranno applicati gli stili in Main. css. In caso contrario, essi non. Questo illustra come a query supporti dare agli sviluppatori indizi di contesto utile per la creazione di reattivo di siti Web e applicazioni.

Guida introduttiva

Come osservato, CSS3 media le query sono supportate nelle versioni più recenti di tutti i principali browser (bit.ly/wpamib), così dovrebbe stare tranquillo oggi li utilizzano. Ci sono tre modi per sfruttare le query supporti per i vostri siti. Il primo è per caricare in modo condizionale fogli di stile intera, come illustrato nell'esempio precedente. Il secondo metodo è quello di utilizzare le direttive @ import in fogli di stile. Ecco la prova stessa, questa volta come una direttiva di importazione:

@import url("main.css") screen and (min-width: 800px);

Proprio come nel primo esempio, questa affermazione valuterà la larghezza della periferica corrente e, se si tratta di almeno 800 pixel, caricare Main. css e applicare i suoi stili.

Infine, è possibile utilizzare supporti query inline nei CSS utilizzando le direttive @ media, in questo modo:

@media screen and (min-width: 800px) { ...
}

In questo caso, invece di definire gli stili in un file separato, metterli in linea in un foglio di stile esistente e avvolgere con una query supporti che assicura che questi stili vengono applicati solo quando appropriato.

Ora diamo un'occhiata alle query supporti in azione, partendo da un semplice esempio. Se volete provare questo a casa, controlla il codice sorgente dell'esempio per questo articolo, o aprire l'editor di testo o IDE preferito e aggiungere il markup in Figura 1.

Documento HTML di esempio nella figura 1

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="media.css">
  </head>
  <body>
    <article id="small">This is a small screen</article>
    <article id="medium">This is a medium screen</article>
    <article id="large">This is a large screen</article>
    <article id="landscape">...
and you're in landscape mode...</article> 
  </body>
</html>

Successivamente, creare un foglio di stile denominato media.css nella stessa cartella e aggiungere gli stili definiti in Figura 2. Si noti che ho definito tutte le mie direttive @ media nella parte inferiore del file; probabilmente si vorrà fare lo stesso in fogli di stile. Se si sceglie di definire più fogli di stile nel markup, ti consigliamo anche di inserire <link> elementi di fogli di stile specifici dopo i fogli di stile principale. A causa del comportamento della cascata di CSS, le regole specifiche saranno probabilmente necessario sostituiscono le regole primarie e devono essere definite in modo appropriato. Noterete che ho definito gli stili per gli elementi mio articolo e il corpo e poi seguito questi con query supporti (e le loro regole associate) per ogni esperienza che vorrei sostenere. Schermi più piccoli di 480 pixel riceveranno una serie di stili aggiuntivi; schermi tra 480 pixel e 1024 pixel riceveranno un altro; e schermi più grandi di quanto 1024 pixel ricevere un terzo set di stili. Ho anche aggiunto una query per l'orientamento e si applicherà un altro insieme di stili, se il dispositivo è in modalità orizzontale.

Figura 2 CSS Media una query Defined in linea con la direttiva @ media

article {
  display: none;
}
body {
  font-size: 24px;
  font-weight: 800;
  color: white;
}
@media screen and (max-width: 480px) {
  body {
    background-color: #ff2a18;
  }
  #small {
    display: inline;
  }
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  body {
    background-color: #00ff00;
  }
  #medium {
    display: inline;
  }
}
@media screen and (min-width: 1024px) {
  body {
    background-color: #0000ff;
  }
  #large {
    display: inline;
  }
}
@media screen and (orientation: landscape) {
  body {
    background-color: #ff7f00;
  }
  #landscape {
    display: inline;
  }
}

Dopo aver creato la pagina in Figura 1 e foglio di stile in Figura 2, aprire la pagina in qualsiasi browser. Test query supporti è semplice; si può anche farlo senza un dispositivo mobile. Basta ridimensionare la finestra del browser e guardare come a cambiare i colori di sfondo e del testo come contesto dei cambiamenti finestra visibile.

Ora che noi abbiamo gettato le basi per le query di mezzi di comunicazione, prendiamo le cose un passo ulteriore e camminare attraverso un esempio più realistico. In questo esempio ho intenzione di aggiungere query supporti per una galleria di foto online in modo posso appoggiare gli smartphone e compresse. Troverete il codice per questo esempio, che utilizza il modello di Galleria fotografica che le navi con WebMatrix (webmatrix.com), a archive.msdn.microsoft.com/mag201204HTML5.

Se si apre questa pagina in un mobile o tavoletta browser, si noterà la pagina appare "rimpicciolisci" ed è difficile da vedere o leggere, come Figura 3 mostra. Con pochi mezzi query e alcuni altri trucchi, possiamo creare un'esperienza su misura senza nuovo markup o browser sniffing di alcun tipo.

Figura 3 Mobile vista senza Media query

Nella parte inferiore del file desktop.css creato per questo esempio, iniziare con l'aggiunta di che file multimediali di query direttiva e condizione. Perché la mia preoccupazione attuale è il più piccolo degli schermi, creeremo la seguente definizione:

@media screen and (max-width: 480px) {}

Ora, all'interno di tale definizione, creiamo alcune regole per ridimensionare e riposizionare le immagini per schermi più piccoli. Tali regole sono mostrate in Figura 4.

Figura 4 modificando gli stili per i dispositivi mobili

body {
  min-width: 120px;
  max-width: 320px;
}
h1 {
  font-size: 1.5em;
}
img {
  width: 250px;
  height: 187.5px;
}
ul.thumbnails li {
  width: 265px;
    height: 200px;
    line-height: 200px;
}
ul.thumbnails li span.image-overlay {
    width: 265px;
}

Se si aggiorna la pagina dopo l'aggiunta di questi stili, si dovrebbe vedere qualcosa di simile a ciò che viene mostrato Figura 5. Le immagini un aspetto migliore, ma la navigazione principale è disallineata. Cosa c'è di più, la galleria utilizza un CSS: pseudo-selector di passaggio del mouse per visualizzare ulteriori informazioni su ogni immagine, come illustrato Figura 6. Poiché si tratta di un'esperienza utente che non ha senso in un ambiente dove librarsi eventi stiamo meno comune (smartphone e compresse), abbiamo bisogno di venire con una presentazione alternativa per quell'aspetto della pagina come bene. Sarò a farlo aggiungendo gli stili in Figura 7 all'interno dell'attuale direttiva @ media.

Figura 5 Vista Mobile con immagini migliorate

Nella figura 6 un'immagine con l'effetto Hover applicata

Figura 7 stili per la navigazione Mobile-Friendly e informazioni sull'immagine

#banner {
  height: 110px;
  background: #eaeaea;
}
#menu li {
  display: block;
  margin-top: 3px;
  margin-bottom: 3px;
}
#menu li.tags a,
#menu li.galleries a,
#menu li.account a {
  background: none; 
}
#menu li.login {
  display: none;
}
ul.thumbnails li span.image-overlay {
  display:block;
  position: absolute;
  top: 0;
  left: 0;
  line-height: normal;
  width: 515px;
    padding: 5px;
}
ul.thumbnails li {
    background: #f3f6f7;
    border-color: #dbe2e5;
    border-radius: 7px;
    box-shadow: 0px 0px 20px 5px #A9A9A9;
}

Ora, se si aggiorna la pagina nel browser, si dovrebbe vedere navigazione puliti, insieme con le informazioni che in precedenza è apparso su un evento hover, simile a Figura 8.

Figura 8 la galleria con navigazione meglio e scatole di immagine

Finora, abbiamo una vista desktop per la nostra galleria, come pure una versione mobile decente, e tutti che abbiamo bisogno erano poche regole CSS aggiuntive. Let's fare un passo ulteriore e aggiungere il supporto per gli schermi più grandi di 480 pixel e inferiori a 1024 pixel — compresse.

Se stai visualizzando la Galleria fotografica in un browser desktop e si ridimensiona a una dimensione più piccola di 1024 pixel (la schermata illustrata nella Figura 8), si noterà che molte delle immagini sono tagliati fuori. Poiché tavoletta dispositivi in genere hanno una dimensione di schermo più grande, è opportuno fornire immagini più grandi nella pagina Galleria. Quindi cerchiamo di aggiungere un'altra query supporti per i dispositivi di dimensioni tavoletta:

@media screen and (min-width:480px) and (max-width:1024px)

Nell'origine on-linea, ho refactoring alcune regole smartphone in un insieme di stili che si applicano a tutti i dispositivi non-tavolo, quindi tutto ciò che devo impostare per il mio punto di vista di tavoletta sono quegli stili che si riferiscono al documento, immagine e dimensioni delle miniature, come mostrato nella Figura 9.

Nella figura 9 stili per la vista Tablet-Friendly

body {
  min-width: 480px;
  max-width: 800px;
} 
img {
  width: 500px;
  height: 375px;
  align: center;
} 
ul.thumbnails li {
  width: 515px;
    height: 390px;
    line-height: 200px;
}

Ora aggiornare la schermata in un browser vista compressa, e vedrai qualcosa di simile a Figura 10. Ci stiamo ora prendendo di mira più dimensioni di schermo — e quindi più dispositivi — e tutto quello che ci è costato era il tempo per creare alcuni stili alternativi.

Figura 10 foto Gallery, Tablet-Friendly View

Primo mobile

Prima concludere questa discussione sulle query supporti, voglio condividere una punta che non è specifico per l'utilizzo di query di mezzi di comunicazione, ma è importante quando si fa lo sviluppo mobile Web di qualsiasi tipo. In particolare, è necessario impostare il riquadro di visualizzazione e design per il mobile in primo luogo.

Se voi avete stato codifica lungo come ho ho camminato attraverso le query di mezzi di comunicazione in questo articolo, potreste aver visto un lieve problema durante la visualizzazione della pagina su uno smartphone o un emulatore smartphone: In alcuni dispositivi non cambia l'effetto "zoomata fuori", anche dopo che sono state applicate le regole condizionali. Ciò che accade è che il browser mobile sta cercando di "ottimizzare" l'esperienza su uno schermo più piccolo, che è utile per i siti che non prestare alcuna attenzione per gli utenti mobili. Per questo sito, tuttavia, la preferenza è che questa ottimizzazione non si verifica, e si può eseguire l'override di questo comportamento con l'aggiunta di un singolo <meta> Tag per la <head> della tua pagina, in questo modo:

<meta name="viewport" content="width=device-width">

Ora, se si aggiorna la pagina e le query di mezzi di comunicazione sono correttamente definite, si dovrebbero vedere le regole in vigore.

Si potrebbe hanno anche preso atto del fatto che, nell'esempio Galleria foto, ho aggiunto un'esperienza mobile a un sito esistente. Come sviluppatore familiarizzare con le query di mezzi di comunicazione, si sta probabilmente fare questo inizialmente come bene. Tuttavia, vi è un crescente movimento che enfatizza un primo"mobile" approccio alla progettazione e sviluppo di siti Web e applicazioni. Proprio come sembra, il primo mobile è su come rendere la tua esperienza mobile una priorità assoluta, invece di un ripensamento (come spesso è stato fatto in passato). Se si considera che negli ultimi due anni, smartphone e tavoletta vendite hanno superato vendite di PC e che ora navigazione mobile, rende più di metà della navigazione Web tutti, questo ha un senso. Oltre che, una mentalità mobile-primo incoraggia "progressive enhancement," in base al quale i siti sono costruiti da una linea di base (e spesso solo testo) esperienza e progressivamente migliorato per più capace di browser e dispositivi. Per ulteriori informazioni sul mobile-primo approccio, mi raccomando il libro con quel nome, da Luke Wroblewski (disponibile presso bit.ly/zd9UWT).

Media Query listener

Come estensione ai media query supportano in CSS3, il CSS Working Group sta cercando di aggiungere JavaScript API che consentono agli sviluppatori di valutare le query di mezzi di comunicazione in fase di esecuzione e in ascolto di runtime cambiamenti nelle condizioni di query supporti. Queste API sono documentate nella specifica del modulo di visualizzazione CSSOM (bit.ly/w8Ncq4). Figure11 mostra un esempio di esecuzione di query di mezzi di comunicazione e creazione di listener all'interno di JavaScript.

Figura 11 lavorando con Media Query listener

listener = window.msMatchMedia("(min-width: 480px)");
evaluate(listener); // Perform an initial evaluation
listener.addListener(evaluate); // Evaluate each time the width changes
 function evaluate(listener) {
   if (mql.matches) {
    expandCommentList(); // Screen is at least 480px
   } else {
     shrinkCommentList(); // Screen is smaller
   }
 }

Gli ascoltatori hanno il potenziale per essere molto prezioso per i casi in cui viewport di un dispositivo potrebbe cambiare in fase di esecuzione — per esempio, quando l'orientamento assume su smartphone e compresse. Con gli ascoltatori di query di mezzi di comunicazione, è possibile rispondere a questi cambiamenti, non solo da all'interno di CSS, ma dai tuoi script. La specifica CSSOM vista è attualmente in uno stato di bozza, ma Internet Explorer 10 Platform Preview fornisce il supporto per supporti di query listener, così si può provare questo a Internet Explorer Test Drive (bit.ly/gQk7wZ).

La capacità di supportare più piattaforme, schermi ed esperienze nelle applicazioni Web ha percorso una lunga strada negli ultimi anni. Considerando che in passato era normale per creare versioni specifiche del dispositivo di un sito, la proliferazione di dispositivi mobili ha rapidamente fatto targeting per irrealizzabile. Per fortuna, l'introduzione delle query supporti CSS3 attraverso tutti i mezzi principali browser, desktop e mobile che è ora possibile utilizzare gli indizi di contesto che contano veramente per offrire esperienze su misura per una vasta gamma di dispositivi, tutti con la condizionale CSS. Per ulteriori informazioni sulle query supporti CSS3, raccomando il capitolo sulle query supporti da Pietro eccellente "il libro di CSS3" di Gasston (No amido Press, 2011). Per una galleria di grandi esperienze consegnato con l'aiuto delle query supporti, controllare il sito media query. Spero che questo articolo è dotato abbastanza informazioni per iniziare a costruire esperienze su misura di oggi. Sono ansioso di vedere le esperienze impressionanti che si crea!

Brandon Satrom è il product manager per l'interfaccia utente di Kendo (kendoui.com), un HTML5 e toolset mobile da Telerik. Ha blog a userinexperience.com e possono essere seguiti su Twitter a twitter.com/BrandonSatrom.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: John Box, Sharon Newman e Jacob Rossi