Funzionalità multimediali

Un riepilogo di tutti i modi in cui le funzionalità multimediali ti consentono di rispondere ai dispositivi e preferenze.

Senza le query supporti non sarebbe possibile sfruttare il reattivo design. Prima delle query supporti, non c'era modo di sapere che tipo di dispositivo utilizzavano le persone per visitare il tuo sito web. I designer dovevano fare delle ipotesi. Queste ipotesi sono state codificate in progetti a larghezza fissa o layout flessibili.

Tutto è cambiato con l'introduzione delle query supporti. Per la prima volta i designer riuscivano a incontrare persone a metà strada. I designer hanno potuto modificare i layout per adattarli ai dispositivi degli utenti.

Ricorda che una query supporti comprende un tipo di elemento multimediale facoltativo e una funzionalità multimediale obbligatoria. Nel corso degli anni, non si sono verificati molti cambiamenti nei tipi di media. I valori possibili sono solo quattro:

@media all
@media screen
@media print
@media speech

Le funzionalità multimediali, invece, sono aumentate enormemente. I designer ora possono raggiungere gli utenti oltre la metà del percorso, adattando il design per adattarsi a dimensioni molto più che semplicemente dello schermo.

Supporto dei browser

• 1
• 12
• 1
• 3

Origine

Dimensioni area visibile

Le query supporti di gran lunga più diffuse sul web sono quelle che gestiscono la larghezza dell'area visibile. Ma anche qui, hai la possibilità di scegliere. Puoi usare la funzionalità dei contenuti multimediali max-width per applicare stili al di sotto di una determinata larghezza oppure la funzionalità dei contenuti multimediali min-width per applicare stili al di sopra di una determinata larghezza.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Personalmente mi piace usare min-width. Applico gli stili di layout in modo additivo. Introduco nuove regole di layout in ogni punto di interruzione invece di annullare le regole precedenti.

Questo approccio additivo funziona anche per l'altezza. Con min-height puoi introdurre altre regole man mano che diventa disponibile una maggiore altezza dell'area visibile. Ad esempio, se c'è abbastanza spazio verticale, potresti voler ancorare un elemento di intestazione alla parte superiore della finestra del browser.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Se preferisci, però, puoi usare la funzionalità dei contenuti multimediali di max-height. In questo caso, l'intestazione è ancorata per impostazione predefinita, ma viene rimossa se lo spazio verticale non è sufficiente.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

La scelta tra i prefissi min- e max- non si applica solo a width e height. La funzionalità dei contenuti multimediali di aspect-ratio offre la stessa scelta. Offre anche una versione senza prefisso se vuoi applicare gli stili con un rapporto esatto tra larghezza e altezza.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

La creazione di stili diversi per proporzioni diverse potrebbe sfuggire rapidamente. Se non hai bisogno di un livello di controllo granulare, la funzionalità dei contenuti multimediali di orientation potrebbe soddisfare meglio le tue esigenze. Ha due valori possibili: portrait o landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Anche se i termini "ritratto" e "landscape" vengono utilizzati più spesso per fare riferimento all'orientamento dei dispositivi mobili, la funzionalità per i contenuti multimediali di orientation non è specifica per il dispositivo. Una finestra del browser a schermo intero su un laptop tipico avrà un valore di orientation pari a landscape.

Display

Display diversi hanno densità di pixel diverse, misurate in dpi, punti per pollice. Puoi regolare gli stili per diverse densità di pixel utilizzando la funzionalità dei contenuti multimediali di resolution. Come nel caso di aspect-ratio, resolution è disponibile in tre varietà: minimo, massimo ed esatto.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Potresti non dover mai utilizzare resolution query supporti. In genere, la densità dei pixel è un problema solo per le immagini e le immagini adattabili sono un modo per gestire la densità dei pixel direttamente nel codice HTML.

Invece, CSS è il punto in cui definisci le animazioni e le transizioni. Puoi regolare le animazioni e le transizioni per rispondere a diverse frequenze di aggiornamento utilizzando la funzionalità dei contenuti multimediali di update. Questa funzionalità multimediale riporta uno dei tre valori: none, slow e fast.

Un valore update pari a none indica che non è presente alcuna frequenza di aggiornamento. Ad esempio, una pagina stampata non può essere aggiornata.

Se il valore slow è update, significa che non è possibile aggiornare rapidamente il display. Un display e-ink è un esempio di schermo con una frequenza di aggiornamento lenta.

Se il valore update è fast, il display si aggiorna abbastanza velocemente da gestire animazioni e transizioni.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Non tutti gli aspetti del display sono correlati alle funzionalità hardware. Nel modulo relativo ai temi, hai visto come definire le proprietà in un file manifest dell'app web. Una di queste proprietà è denominata display e puoi assegnarle il valore fullscreen, standalone, minimum-ui o browser. La funzionalità dei contenuti multimediali di display-mode corrispondente ti consente di personalizzare i tuoi stili per queste diverse opzioni.

Supponiamo che tu abbia fornito un valore display pari a standalone nel file manifest dell'app web. Se un utente aggiunge il tuo sito alla propria schermata Home, il sito verrà avviato senza alcuna interfaccia del browser. Potresti decidere di mostrare un pulsante Indietro per questi utenti.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Colore

Esistono numerose funzionalità multimediali per eseguire query sulle funzionalità relative ai colori di un dispositivo. Se vuoi regolare i tuoi stili per qualsiasi display che mostra solo tonalità di grigio, puoi utilizzare la funzionalità dei contenuti multimediali monochrome senza alcun valore.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

È presente una funzionalità dei contenuti multimediali di color corrispondente.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Per le schermate a colori, puoi scrivere query con le funzionalità multimediali color-gamut, color-index o dynamic-range. Tutti riportano dettagli specifici sulle funzionalità dei colori dello schermo.

In questo esempio, i valori dei colori vengono aggiornati in risposta alla funzionalità dei contenuti multimediali dynamic-range, che segnala la combinazione di massima luminosità, profondità di colore e rapporto di contrasto del display. I valori possibili sono standard o high. A una schermata ad alta definizione che segnala un valore dynamic-range di high viene assegnato uno spazio colore diverso utilizzando la nuova funzione color() di CSS.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Interazione

Le funzionalità multimediali possono anche segnalare il tipo di meccanismo di input utilizzato per interagire con il tuo sito: hover, any-hover, pointer e any-pointer. Per ulteriori dettagli, consulta il modulo sull'interazione.

Preferenze

È disponibile una serie di query supporti che ti consentono di rispondere alle preferenze dell'utente: prefers-color-scheme, prefers-contrast e prefers-reduced-motion. Consulta i moduli su temi e accessibilità per ulteriori dettagli.

Puoi combinare le funzionalità multimediali in un'unica query multimediale. Puoi definire l'ambito degli stili di animazione in modo che vengano applicati solo se il dispositivo ha una frequenza di aggiornamento veloce e l'utente non ha espresso una preferenza per la riduzione del movimento.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Altre funzionalità multimediali

Presto saranno disponibili altre funzionalità multimediali.

Le funzionalità multimediali forced-colors e inverted-colors segnaleranno se un dispositivo utilizza una tavolozza dei colori limitata o invertita.

Una funzionalità dei contenuti multimediali di scripting ti consentirà di modificare il CSS in base alla disponibilità di JavaScript.

Una funzionalità dei contenuti multimediali chiamata prefers-reduced-data consentirà agli utenti di specificare che utilizzano una connessione a consumo, in modo che tu possa inviare asset di dimensioni inferiori o inferiori.

Altre proposte sono ancora in fase di elaborazione. Nel modulo successivo e finale parleremo di una proposta per una funzionalità multimediale che gestisce diverse configurazioni dello schermo.

Verifica le tue conoscenze

Verifica le tue conoscenze delle funzionalità multimediali

Una query supporti può verificare la presenza di un dispositivo con una larghezza specifica, ad esempio @media (width: 1024px)?

Vero

Una larghezza specifica può essere raggiunta solo controllando contemporaneamente la larghezza superiore a 1023px e inferiore a 1025px.

Falso

min-width e max-width sono le opzioni disponibili.

Una query multimediale può verificare la presenza di un dispositivo in un aspect-ratio specifico, ad esempio @media (aspect-ratio: 4/3)?

Vero

È possibile associare un'unica proporzione alle proporzioni.

Falso

Questa opzione non esiste per aspect-ratio.

Quali sono query supporti a colori valide?

@media (color)

Corrisponde a qualsiasi dispositivo di colore.

@media (monochrome)

Corrisponde a qualsiasi dispositivo senza funzionalità per il colore.

@media (color-gamut: srgb)

Corrisponde ai dispositivi con funzionalità di colore sRGB.

@media (min-color-index: 15000)

Corrisponde ai dispositivi con almeno 15.000 colori disponibili.

@media (dynamic-range: high)

Corrisponde ai dispositivi che supportano intervalli di colori HD.

Quali delle seguenti query multimediali sulle preferenze utente sono valide?

@media (prefers-color-scheme: dark)

Corrisponde a quando il sistema operativo di un utente è impostato sulla modalità Buio.

@media (prefers-colors: high-definition)

Non reale.

@media (prefers-reduced-motion: reduce)

Trova una corrispondenza quando un utente ha impostato il sistema operativo per ridurre il movimento.

@media (prefers-contrast: more)

Trova una corrispondenza quando il sistema operativo di un utente è impostato su contrasti più elevati.

@media (prefers-site-speed: fast)

Non reale.