Funzionalità multimediali

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

Il design adattabile non sarebbe stato possibile senza query supporti. Prima delle query supporti non c'era modo di sapere che tipo di dispositivo venivano utilizzati dagli utenti per visitare il tuo sito web. I designer dovevano fare congetture. Questi presupposti erano codificati in progetti a larghezza fissa o layout fluidi.

Tutto è cambiato con l'introduzione delle query supporti. Per la prima volta i designer potevano incontrarsi a metà strada. I designer potevano regolare la disposizione dei loro prodotti per adattarsi ai dispositivi delle persone.

Ricorda che una query supporti comprende un tipo di elemento multimediale facoltativo e una funzionalità multimediale obbligatoria. Non sono stati registrati molti cambiamenti nei tipi di contenuti multimediali nel corso degli anni. I valori possibili sono solo quattro:

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

Le funzionalità multimediali, invece, si sono ampliate notevolmente. I designer ora possono raggiungere gli utenti oltre la metà, adattando i design affinché si adattino molto di più delle dimensioni dello schermo.

Dimensioni area visibile

Di gran lunga le query sui contenuti multimediali più popolari sul web sono quelle che riguardano la larghezza dell'area visibile. Ma anche qui, hai a disposizione una scelta. Puoi utilizzare 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 gli stili che superano 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 anziché annullare le regole precedenti.

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

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

Se preferisci, puoi usare la funzionalità dei contenuti multimediali max-height. In questo caso, l'intestazione è ancorata per impostazione predefinita, ma la fidelizzazione 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à per i contenuti multimediali di aspect-ratio offre la stessa scelta. Offre anche una versione senza prefisso se vuoi applicare 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 non funzionare più rapidamente. Se non hai bisogno di un livello di controllo granulare, la funzionalità dei contenuti multimediali di orientation potrebbe essere più adatta alle 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 "verticale" e "orizzontale" vengono utilizzati più spesso per fare riferimento all'orientamento dei dispositivi mobili, la funzionalità per i contenuti multimediali orientation non è specifica per il dispositivo. Una finestra del browser a schermo intero su un laptop tipico avrà un valore 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à multimediale di resolution. Come 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 nessuna query multimediale resolution. La densità dei pixel è in genere un problema solo per le immagini, mentre le immagini adattabili consentono di gestire la densità dei pixel direttamente in HTML.

In CSS, invece, definisci le animazioni e le transizioni. Puoi regolare queste animazioni e transizioni per rispondere a diverse frequenze di aggiornamento utilizzando la funzionalità multimediale di update. Questa funzionalità multimediale segnala uno dei tre valori seguenti: none, slow e fast.

Un valore update pari a none indica che non è presente una frequenza di aggiornamento. Ad esempio, una pagina stampata 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 schermata con una frequenza di aggiornamento lenta.

Un valore update pari a fast indica che 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 sulla definizione dei temi, hai visto come definire le proprietà in un file manifest dell'app web. Una di queste proprietà è denominata display e puoi assegnarle un valore pari a fullscreen, standalone, minimum-ui o browser. La funzionalità multimediale 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 della tua app web. Se un utente aggiunge il tuo sito alla 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 al colore di un dispositivo. Se vuoi regolare i tuoi stili per qualsiasi display che mostra solo tonalità di grigio, puoi utilizzare la funzionalità multimediale monochrome senza alcun valore.

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

È presente una funzionalità multimediale 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 mostrano dettagli specifici sulle funzionalità dei colori dello schermo.

In questo esempio, i valori di colore vengono aggiornati in risposta alla funzionalità multimediale dynamic-range, che segnala la combinazione di luminosità massima, profondità di colore e rapporto di contrasto del display. I valori possibili sono standard o high. A uno schermo ad alta definizione che segnala un valore dynamic-range pari a high viene assegnato uno spazio 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

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

Puoi combinare le funzionalità multimediali in un'unica query supporti. Puoi definire l'ambito degli stili di animazione in modo che vengano applicati solo se il dispositivo ha una frequenza di aggiornamento rapida 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%);
  }
}

Più funzionalità multimediali

Sono in arrivo altre funzionalità multimediali.

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

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

Una funzionalità multimediale denominata prefers-reduced-data consentirà agli utenti di specificare che si trovano su una connessione a consumo, in modo da poter inviare asset di dimensioni inferiori o inferiori.

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

Verifica le tue conoscenze

Verifica la tua conoscenza delle funzionalità multimediali