Query supporti

I designer possono modificare i loro progetti in base alle esigenze degli utenti. L'esempio più chiaro è il fattore di forma del dispositivo di un utente, la sua larghezza, il formato e così via. Utilizzando le query sui media, i designer possono rispondere a questi diversi fattori di forma.

Le query supporti vengono avviate con la parola chiave @media (una regola at CSS) e possono essere utilizzate per una serie di casi d'uso.

Scegli come target diversi tipi di output

I siti web vengono spesso visualizzati su schermi, ma il CSS può essere utilizzato anche per applicare stili ai siti web per altri output. Potresti volere che le tue pagine web abbiano un aspetto diverso su uno schermo e un altro quando vengono stampate. Ciò è possibile grazie alle query sui tipi di contenuti multimediali.

In questo esempio, il colore di sfondo è impostato su grigio. Tuttavia, se la pagina viene stampata, il colore di sfondo deve essere trasparente. In questo modo, l'utente risparmia l'inchiostro della stampante.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Puoi utilizzare la regola at @media nel foglio di stile in questo modo oppure puoi creare un foglio di stile separato e utilizzare l'attributo media su un elemento link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Se non specifichi un tipo di media per il CSS, il valore del tipo di media sarà automaticamente all. Questi due blocchi di CSS sono equivalenti:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Anche queste due righe di codice HTML sono equivalenti:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Condizioni della query

Puoi aggiungere condizioni ai tipi di contenuti multimediali. Queste sono chiamate query supporti. Il CSS viene applicato solo se il tipo di media corrisponde e la condizione è vera. Queste condizioni sono chiamate funzionalità multimediali.

Questa è la sintassi per le query sui media:

@media type and (feature)

Puoi utilizzare le query sui media in un elemento link se gli stili si trovano in un foglio di stile separato:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Supponiamo che tu voglia applicare stili diversi a seconda che la finestra del browser sia in modalità orizzontale (la larghezza del viewport è maggiore dell'altezza) o verticale (l'altezza del viewport è maggiore della larghezza). Esiste una funzionalità multimediale chiamata orientation che puoi utilizzare per verificare che:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

In alternativa, se preferisci avere fogli di stile separati:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

In questo caso, il tipo di media è all. Poiché si tratta del valore predefinito, puoi ometterlo se vuoi:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

In alternativa, puoi utilizzare fogli di stile separati:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Sebbene l'utilizzo di fogli di stile separati per tipi di media diversi, come print, possa essere accettabile, probabilmente non è una buona idea utilizzare un foglio di stile separato per ogni query sui media. Utilizza invece le regole at @media.

Modificare gli stili in base alle dimensioni dell'area visibile

Per il responsive design, una delle funzionalità multimediali più utili riguarda le dimensioni dell'area visibile del browser. Per applicare gli stili quando la finestra del browser è più larga di una determinata larghezza, utilizza min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Utilizza la funzionalità media max-width per applicare gli stili al di sotto di una determinata larghezza:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Puoi utilizzare qualsiasi unità di misura della lunghezza CSS nelle query sui media. Se i tuoi contenuti sono principalmente basati su immagini, i pixel potrebbero essere la soluzione più adatta. Se i tuoi contenuti sono costituiti principalmente da testo, probabilmente ha più senso utilizzare un'unità di misura relativa basata sulle dimensioni del testo, come em o ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Puoi anche combinare le query sui contenuti multimediali per applicare più di una condizione. Utilizza la parola and per combinare le query sui contenuti multimediali:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Scegli gli intervalli in base ai contenuti

Il punto in cui una condizione della funzionalità multimediale diventa vera è chiamato punto di interruzione. Ti consigliamo di scegliere i punti di interruzione in base ai tuoi contenuti anziché alle dimensioni dei dispositivi più diffusi, poiché queste possono cambiare con ogni ciclo di rilascio della tecnologia.

In questo esempio, 50em è il punto in cui le righe di testo diventano troppo lunghe. Viene quindi creato un punto di interruzione per rendere l'interfaccia più leggibile. Se utilizzi la proprietà column-count, il testo viene diviso in due colonne da quel punto in poi.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Combinazioni

Puoi utilizzare le query supporti in base all'altezza dell'area visibile, non solo alla larghezza. Ciò potrebbe essere utile per ottimizzare i contenuti dell'interfaccia "above the fold". Nell'esempio precedente, se i lettori utilizzano una finestra del browser ampia ma corta, devono scorrere verso il basso una colonna e poi risalire per raggiungere la parte superiore della seconda colonna. Sarebbe più sicuro applicare le colonne solo quando l'area visibile è sufficientemente ampia e alta.

Puoi combinare le query sui media in modo che gli stili vengano applicati solo quando tutte le condizioni sono vere. In questo esempio, l'area visibile deve essere larga almeno 50em e alta 30em per poter applicare gli stili di colonna. Questi punti di interruzione sono stati scelti in base alla quantità di contenuti.

@media (min-width: 50em) and (min-height: 30em) {
  article {
    column-count: 2;
  }
}

Questi esempi mostrano come le query sui media possono essere utilizzate per adattare i design al fattore di forma del dispositivo di un utente, ma rappresentano solo una piccola parte delle possibilità. Le query sui media possono andare ben oltre la larghezza e l'altezza, accedendo alle preferenze dell'utente per le funzionalità di accessibilità e i colori dei temi. L'utilizzo delle query sui media per apportare modifiche al layout è un ottimo punto di partenza per un design responsive, che si basa su queste e altre funzionalità.

Verificare di aver compreso

Metti alla prova le tue conoscenze sulle query sui media adattabili.