Query supporti

I progettisti possono modificare i loro progetti per adattarli agli utenti. L'esempio più chiaro è il fattore di forma del dispositivo di un utente, la sua larghezza, le proporzioni del dispositivo e altri aspetti. Utilizzando le media query, i designer possono rispondere a questi diversi fattori di forma.

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

Targeting di diversi tipi di output

I siti web vengono spesso visualizzati sugli schermi, ma i CSS possono essere utilizzati anche per definire lo stile dei siti web per altri output. Potresti voler che le tue pagine web abbiano un aspetto diverso sullo schermo rispetto a quando vengono stampate. Ciò è possibile eseguendo query sui tipi di media.

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

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

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

Puoi utilizzare la regola @@media nel foglio di stile in questo modo, oppure puoi 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 alcun tipo di media per il tuo 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 supporti:

@media type and (feature)

Puoi utilizzare le 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 testare:

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

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

Oppure, 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. */
}

Oppure utilizzando 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 diversi tipi di media, ad esempio print, possa essere accettabile, probabilmente non è una buona idea utilizzare un foglio di stile separato per ogni query media. Utilizza invece le regole @media.

Regolare gli stili in base alle dimensioni del viewport

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ù ampia di una determinata larghezza, utilizza min-width.

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

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

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

Questa media query può essere scritta anche utilizzando la funzionalità multimediale width e l'operatore minore o uguale a.

@media (width <= 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

Puoi utilizzare qualsiasi unità di lunghezza CSS nelle query supporti. Se i tuoi contenuti sono principalmente basati su immagini, i pixel potrebbero essere la scelta più adatta. Se i tuoi contenuti sono principalmente basati su testo, probabilmente è più sensato utilizzare un'unità relativa basata sulle dimensioni del testo, come em o ch:

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

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

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

Può essere scritto anche utilizzando la sintassi dell'intervallo.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

Scegli i punti di interruzione in base ai contenuti

Il punto in cui una condizione della funzionalità multimediale diventa vera è chiamato punto di interruzione. È meglio scegliere i punti di interruzione in base ai contenuti anziché alle dimensioni dei dispositivi più comuni, in quanto sono soggetti a modifiche a ogni ciclo di rilascio di nuove tecnologie.

In questo esempio, 50em è il punto in cui le righe di testo diventano troppo lunghe. Pertanto, viene creato un punto di interruzione per rendere l'interfaccia più leggibile. Utilizzando 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 larga ma corta, devono scorrere verso il basso una colonna e poi scorrere di nuovo verso l'alto per raggiungere la parte superiore della seconda colonna. Sarebbe più sicuro applicare le colonne solo quando l'area visibile è sufficientemente larga e alta

Puoi combinare le media query in modo che gli stili vengano applicati solo quando tutte le condizioni sono vere. In questo esempio, la finestra deve avere una larghezza di almeno 50em e un'altezza di 30em affinché gli stili delle colonne vengano applicati. 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;
  }
}

Puoi anche utilizzare le parole chiave or e not per esprimere situazioni più complesse quando vuoi applicare gli stili. Questi possono essere logicamente difficili da ragionare, quindi assicurati di testare che funzionino e interagiscano come previsto.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

Verifica la tua comprensione

Metti alla prova le tue conoscenze sulle query supporti reattive.