Funzionalità multimediali

Il responsive design non sarebbe possibile senza le query supporti. Prima delle media query non era possibile sapere quale tipo di dispositivo veniva utilizzato dagli utenti per visitare il tuo sito web. I progettisti hanno dovuto fare delle ipotesi. Queste ipotesi sono state codificate in design a larghezza fissa o layout liquidi.

Tutto è cambiato con l'introduzione delle query supporti. Per la prima volta, i progettisti potevano venire incontro alle persone. I progettisti potrebbero modificare i layout per adattarli ai dispositivi degli utenti.

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

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

Le funzionalità multimediali, invece, sono state notevolmente ampliate. Ora i designer possono andare incontro agli utenti, adattando i design a molto più delle dimensioni dello schermo.

Dimensioni del viewport

Di gran lunga le query multimediali più utilizzate sul web sono quelle che riguardano la larghezza dell'area visibile. Ma anche qui ti viene presentata 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 in 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 c'è spazio verticale sufficiente.

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

Tuttavia, se preferisci, puoi utilizzare la funzionalità multimediale max-height. In questo caso, l'intestazione è ancorata per impostazione predefinita, ma l'aderenza viene rimossa se non c'è spazio verticale 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 a 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 rapidamente sfuggire di mano. Se non hai bisogno di un controllo così granulare, la funzionalità multimediale 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 indicare l'orientamento dei dispositivi mobili, la funzionalità multimediale orientation non è specifica per i dispositivi. Una finestra del browser a schermo intero su un tipico laptop avrà un valore orientation di landscape.

Display

I diversi display hanno densità di pixel diverse, misurate in dpi, punti per pollice. Puoi regolare gli stili per diverse densità di pixel utilizzando la funzionalità multimediale resolution. Come aspect-ratio, resolution è disponibile in tre varianti: minima, massima ed esatta.

@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 query supporti resolution. In genere, la densità di pixel è un problema solo per le immagini e le immagini adattabili sono un modo per gestire la densità di pixel direttamente in HTML.

D'altra parte, il CSS è il linguaggio in cui definisci le animazioni e le transizioni. Puoi regolare queste animazioni e transizioni per rispondere a diverse frequenze di aggiornamento utilizzando la funzionalità multimediale update. Questa funzionalità multimediale riporta uno dei tre valori: none, slow e fast.

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

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

Un valore update di 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 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 di fullscreen, standalone, minimum-ui o browser. La funzionalità media display-mode corrispondente ti consente di personalizzare gli stili per queste diverse opzioni.

Supponiamo che tu abbia fornito un valore display di standalone nel file manifest della tua app web. Se qualcuno 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à di colore di un dispositivo. Se vuoi regolare gli stili per qualsiasi display che restituisce solo tonalità di grigio, puoi utilizzare la funzionalità media monochrome senza alcun valore.

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

Esiste una funzionalità media color corrispondente.

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

Per gli schermi 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 indica 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 di 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 indicare il tipo di meccanismo di input utilizzato per interagire con il tuo sito: hover, any-hover, pointer e any-pointer. Per maggiori dettagli, consulta il modulo sull'interazione.

Query sulle preferenze utente

Utilizzando CSS, puoi collaborare con i tuoi utenti per assicurarti che possano accedere ai tuoi contenuti in modo ottimale. In questa lezione hai imparato ad applicare CSS diversi in base alle dimensioni e alle funzionalità del dispositivo dell'utente. Tuttavia, puoi anche applicare CSS diversi in base alle impostazioni dell'utente.

Modalità Buio e modalità Luce

Puoi rispondere alla preferenza dell'utente per un tema chiaro o scuro. Molti utenti impostano questa opzione come preferenza di sistema.

Impostazione della combinazione di colori per gli elementi dell'interfaccia utente

Il browser fornisce colori predefiniti per elementi come barre di scorrimento e moduli. Puoi specificare se utilizzare un tema chiaro per le persone con color-scheme: light o un tema scuro con color-scheme: dark. Puoi anche specificare che la pagina supporta entrambi i formati con color-scheme: light dark. Puoi impostarlo sull'elemento :root o html per impostare lo schema per l'intera pagina oppure puoi ignorarlo per elementi specifici.

Puoi anche impostare un tag meta per color-scheme per impostare lo schema di una pagina prima del caricamento degli stili. Se imposti color-scheme: normal su un elemento della pagina, verrà utilizzato il valore color-scheme impostato in questo meta tag.

<meta name="color-scheme" content="dark light">

prefers-color-scheme funzionalità multimediale

Puoi anche definire stili personalizzati in risposta al tema di colori preferito di un utente con una media query per prefers-color-scheme.

light-dark

Se offri ai tuoi utenti la possibilità di scegliere tra un tema chiaro e uno scuro, potresti trovare prolisso impostare ogni colore all'interno di una media query. light-dark() ti consente di specificarli entrambi in un'unica proprietà.

Per abilitare questa opzione, devi impostare color-scheme: light dark sull'elemento o su uno dei suoi antenati. Per prima cosa, imposta un colore da utilizzare in modalità Chiaro e poi un colore da utilizzare in modalità Buio.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Se un utente ha impostato la preferenza di sistema per richiedere la modalità Chiaro, l'intestazione sarà nera. Se la preferenza è la modalità Buio, l'intestazione sarà bianca.

Preferenze di contrasto

Per i tuoi utenti potrebbe essere più facile leggere i contenuti con un contrasto elevato o basso e potrebbero configurare il sistema in modo da ignorare il tuo tema e utilizzare quello più adatto alle loro esigenze. Il tuo ruolo è garantire che il tuo sito continui a funzionare bene con le loro preferenze.

Ricorderai che nel modulo Cascade gli stili utente locali di !important possono ignorare gli stili creati forniti da una pagina web. In questo modo, gli utenti possono utilizzare gli stili più adatti alle loro esigenze.

Colori forzati

Windows offre "Temi a contrasto elevato" che gli utenti possono selezionare per ignorare i temi di un sito web. Spesso si tratta di temi ad alto contrasto e possono essere in modalità Luce o Buio. In CSS, questa funzionalità è chiamata colori forzati e, nella maggior parte dei casi, il tuo sito si comporterà come previsto in questa modalità. Pulsanti, link, input e altri contenuti utilizzeranno i colori del tema.

Di tanto in tanto, potrebbe essere necessario modificare gli stili, ad esempio se utilizzi gli elementi in modi non standard. Puoi utilizzare la media query @media (forced-colors: active) per applicare stili quando un utente ha attivato i colori forzati.

In alcuni casi, gli stili di un sito sono parte integrante della comprensione dei contenuti stessi, ad esempio con un selettore di colori o un grafico con una legenda dei colori. Puoi impostare forced-color-adjust: none; su un elemento per disattivare la modalità colori forzati. Assicurati di disattivare l'opzione solo per elementi specifici e di verificare che i contenuti siano ancora accessibili in modalità colori forzati.

Alto contrasto

Alcuni utenti possono anche impostare il sistema in modo che richieda un contrasto maggiore. Puoi modificare gli stili nella risposta con la media query prefers-contrast: more.

Movimento ridotto

Puoi rispondere alla preferenza di un utente per il movimento ridotto con la media query prefers-reduced-motion. Viene spesso utilizzata per fornire animazioni alternative che evitano movimenti ampi che potrebbero essere fattori scatenanti per persone con epilessia, disturbi del movimento vestibolare o sensibilità all'emicrania. Scopri di più in Considerazioni da fare quando si lavora con l'animazione.

Definisci i tuoi contenuti

I tuoi utenti potrebbero visitare il tuo sito con JavaScript disattivato e puoi modificare il CSS in modo che possano comunque accedere ai tuoi contenuti utilizzando la media query scripting.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Verifica la tua comprensione

Verifica le tue conoscenze delle funzionalità multimediali