Query supporti

I designer possono adattare i loro design per soddisfare le esigenze degli utenti. L'esempio più chiaro è il fattore di forma del dispositivo di un utente, la larghezza, le proporzioni e così via. Utilizzando le query supporti, i designer possono rispondere a questi diversi fattori di forma.

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

Scegli come target diversi tipi di output

I siti web vengono spesso visualizzati sulle schermate, ma il CSS può essere utilizzato anche per definire lo stile dei siti web anche per altri output. Potresti volere che le pagine web abbiano un aspetto su uno schermo ma che abbiano un aspetto diverso una volta stampate. Ciò rende possibile l'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 viene salvato l'inchiostro della stampante dell'utente.

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 nessun tipo di media per il CSS, il valore per il tipo di media sarà all automaticamente. 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 query

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

Questa è la sintassi per le query supporti:

@media type and (feature)

Puoi utilizzare query supporti su un elemento link se i tuoi 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 dell'area visibile è maggiore dell'altezza) o in modalità Ritratto (l'altezza dell'area visibile è maggiore della larghezza). Esiste una funzionalità multimediale chiamata orientation che puoi usare 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 multimediale è all. Poiché si tratta del valore predefinito, puoi tralasciarlo se vuoi:

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

Oppure 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 diversi tipi media, come print, potrebbe essere accettabile, probabilmente non è una buona idea utilizzare un foglio di stile separato per ogni query multimediale. Utilizza invece @media at-rule.

Regolare gli stili in base alle dimensioni dell'area visibile

Per il design reattivo, 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à dei contenuti multimediali max-width per applicare stili al di sotto di una determinata larghezza:

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

Puoi utilizzare qualsiasi unità di lunghezza CSS nelle tue query supporti. Se i tuoi contenuti sono principalmente basati sulle immagini, l'utilizzo dei pixel potrebbe essere la scelta giusta. Se i tuoi contenuti sono principalmente testuali, probabilmente è più sensato 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 query supporti per applicare più di una condizione. Utilizza la parola and per combinare le query supporti:

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

Scegliere i punti di interruzione in base ai contenuti

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

In questo esempio, 50em è il punto in cui le righe di testo diventano eccessivamente lunghe. Viene quindi 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 momento in poi.

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

Combinazioni

Puoi utilizzare query supporti in base all'altezza dell'area visibile, non solo alla larghezza. Ciò può 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 di una colonna e poi scorrere di nuovo verso l'alto per arrivare all'inizio della seconda colonna. Sarebbe più sicuro applicare le colonne solo quando l'area visibile è sufficientemente larga e abbastanza alta.

Puoi combinare query supporti in modo che gli stili vengano applicati solo quando tutte le condizioni sono vere. In questo esempio, l'area visibile deve avere una larghezza minima di 50em e un'altezza di 60em per poter applicare gli stili delle colonne. 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 supporti possono essere utilizzate per adattare i progetti al fattore di forma del dispositivo di un utente, ma sono solo all'inizio di una serie di possibilità. Le query supporti possono andare ben oltre la larghezza e l'altezza, in quanto possono accedere alle preferenze dell'utente relative alle funzioni di accessibilità e ai colori del tema. L'utilizzo di query supporti per apportare modifiche al layout è un ottimo modo per iniziare a utilizzare il Responsive Web Design, che si basa su queste e altre funzionalità.

Verifica la tua comprensione

Verifica le tue conoscenze delle query supporti adattabili.