Query supporti

I designer possono modificare i propri 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 pagine web abbiano un solo aspetto sullo schermo ma diverso quando vengono stampate. Ciò è possibile grazie all'esecuzione di 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 creare un foglio di stile separato e utilizzare l'attributo media in 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 query supporti su 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)">

Anche se l'utilizzo di fogli di stile separati per tipi di elementi multimediali diversi, come print, potrebbe essere accettabile, probabilmente non è una buona idea utilizzare un foglio di stile separato per ogni query multimediale. Utilizza invece le regole at-rule @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 prevalentemente basati su testo, probabilmente è più logico utilizzare un'unità relativa basata sulle dimensioni del testo, ad esempio em o ch:

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

Puoi anche combinare le query sui media 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 di funzionalità multimediali 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 usare 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 una colonna verso il basso e poi di nuovo verso l'alto per arrivare alla parte superiore della seconda colonna. Sarebbe più sicuro applicare le colonne solo quando l'area visibile è sufficientemente larga 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 60em 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: 60em) {
  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 di query supporti per apportare modifiche al layout è un ottimo inizio per creare un responsive design, che si basa su queste e altre funzionalità.

Verificare di aver compreso

Verifica le tue conoscenze in materia di query multimediali adattabili.