Funzionalità multimediali

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

Il responsive design non sarebbe possibile senza le query sui media. Prima delle query sui media, non era possibile sapere quale tipo di dispositivo utilizzavano gli utenti per visitare il tuo sito web. I progettisti hanno dovuto fare delle supposizioni. Questi presupposti sono stati codificati in design a larghezza fissa o layout fluidi.

Tutto è cambiato con l'introduzione delle query sui media. Per la prima volta, i designer potevano venire incontro alle esigenze degli utenti. I designer potevano modificare i layout in base ai dispositivi degli utenti.

Ricorda che una query sui contenuti multimediali è composta da un tipo di media facoltativo e da una funzionalità multimediale obbligatoria. Nel corso degli anni, i tipi di contenuti multimediali non sono cambiati molto. Esistono comunque solo quattro valori possibili:

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

Le funzionalità multimediali, invece, sono state notevolmente ampliate. Ora i designer possono soddisfare le esigenze degli utenti andando oltre la metà, adattando i design a molto più che alle dimensioni dello schermo.

Browser Support

• 1
• 12
• 1
• 3

Source

Dimensioni del viewport

Le query sui media più utilizzate sul web sono quelle che riguardano la larghezza dell'area visibile. Ma anche in questo caso hai una scelta. Puoi utilizzare la funzionalità multimediale max-width per applicare stili al di sotto di una determinata larghezza oppure la funzionalità multimediale 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 a ogni punto di interruzione anziché annullare le regole precedenti.

Questo approccio additivo funziona anche per l'altezza. Utilizzando min-height puoi introdurre più regole man mano che diventa disponibile un'altezza maggiore dell'area visibile. Ad esempio, potresti avere un elemento di intestazione che vuoi ancorare alla parte superiore della finestra del browser se lo spazio verticale è sufficiente.

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

Tuttavia, se preferisci, puoi utilizzare la funzionalità multimediale max-height. Qui l'intestazione è ancorata per impostazione predefinita, ma la funzionalità di fissaggio 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à multimediale 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.
}

Fornire stili diversi per proporzioni diverse potrebbe diventare rapidamente complicato. Se non hai bisogno di questo livello di controllo granulare, la funzionalità multimediale 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 "paesaggio" vengono utilizzati più spesso per fare riferimento all'orientamento dei dispositivi mobili, la funzionalità multimediale orientation non è specifica per il dispositivo. Una finestra del browser a schermo intero su un laptop standard avrà un valore orientation pari a landscape.

Display

I display hanno densità di pixel diverse, misurate in dpi, punti per pollice. Puoi modificare gli stili per diverse densità di pixel utilizzando la funzionalità multimediale resolution. Come aspect-ratio, resolution è disponibile in tre varianti: 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.
}

È possibile che tu non debba mai utilizzare query sui media resolution. La densità in pixel è in genere un problema solo per le immagini e le immagini responsive sono un modo per gestire la densità in pixel direttamente in HTML.

D'altra parte, in CSS puoi definire animazioni e transizioni. Puoi modificare queste animazioni e transizioni in modo che rispondano a frequenze di aggiornamento diverse utilizzando la funzionalità multimediale di update. Questa funzionalità multimediale riporta uno di tre valori: none, slow e fast.

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

Un valore update pari a slow indica che il display non può aggiornarsi rapidamente. Un display e-ink è un esempio di schermo con una frequenza di aggiornamento lenta.

Un valore update pari a fast indica che il display si aggiorna abbastanza rapidamente 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 sui temi, hai visto come definire le proprietà in un file manifest dell'app web. Una di queste proprietà si chiama display e puoi assegnarle un valore fullscreen, standalone, minimum-ui o browser. La funzionalità multimediale display-mode corrispondente ti consente di personalizzare i tuoi stili per queste diverse opzioni.

Supponiamo che tu abbia fornito un valore display di standalone nel manifest dell'app web. Se un utente aggiunge il tuo sito alla schermata Home, il sito verrà avviato senza 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à di colore di un dispositivo. Se vuoi modificare gli stili per qualsiasi display che emette solo tonalità di grigio, puoi utilizzare la funzionalità multimediale monochrome senza alcun valore.

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

Esiste una funzionalità multimediale 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à di colore dello schermo.

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

.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

Esistono una serie di query sui contenuti multimediali che ti consentono di rispondere alle preferenze degli utenti: prefers-color-scheme, prefers-contrast e prefers-reduced-motion. Per ulteriori dettagli, consulta i moduli su tematizzazione e accessibilità.

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

@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

Sono in arrivo altre funzionalità multimediali.

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

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

Una funzionalità multimediale chiamata prefers-reduced-data consentirà agli utenti di specificare che utilizzano una connessione con misurazione del traffico, in modo da poter inviare asset più piccoli o meno.

Altre proposte sono ancora in fase di formulazione. Nel prossimo e ultimo modulo, scoprirai una proposta per una funzionalità multimediale che gestisce diverse configurazioni dello schermo.

Verificare di aver compreso

Verifica le tue conoscenze delle funzionalità multimediali

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

Vero

Una larghezza specifica può essere ottenuta 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 come @media (aspect-ratio: 4/3)?

Vero

A differenza delle proporzioni, è possibile associare un solo rapporto.

Falso

Questa opzione esiste per aspect-ratio.

Quali sono le query sui contenuti multimediali a colori valide?

@media (color)

Si adatta a qualsiasi dispositivo a colori.

@media (monochrome)

Corrisponde a qualsiasi dispositivo senza funzionalità a colori.

@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 compatibili con le gamme di colori HD.

Quali delle seguenti query sui contenuti multimediali delle preferenze utente sono valide?

@media (prefers-color-scheme: dark)

Corrisponde a quando il sistema operativo dell'utente è impostato sulla modalità oscura.

@media (prefers-colors: high-definition)

Non reale.

@media (prefers-reduced-motion: reduce)

Corrisponde a quando il sistema operativo di un utente è impostato per ridurre il movimento.

@media (prefers-contrast: more)

Corrisponde a quando il sistema operativo di un utente è impostato su contrasti più elevati.

@media (prefers-site-speed: fast)

Non reale.