Creazione di un componente scroller multimediale

Una panoramica di base su come creare una visualizzazione a scorrimento orizzontale reattiva per TV, telefoni, computer e così via.

Adam Argyle

In questo post voglio condividere i miei pensieri su alcuni modi per creare lo scorrimento orizzontale. per il web che siano minime, reattive, accessibili e funzionino browser e piattaforme (come le TV). Prova la demo.

Demo

Se preferisci i video, ecco una versione di questo post su YouTube:

Panoramica

Creeremo un layout a scorrimento orizzontale pensato per ospitare miniature di media o prodotti. Il componente è inizialmente un semplice elenco <ul>, ma trasformati con CSS in un'esperienza di scorrimento soddisfacente e fluida, mostrando immagini e agganciarle a una griglia. JavaScript è aggiunto per facilitare interazioni roving-index, che aiutano gli utenti della tastiera a evitare di attraversare oltre 100 elementi. Inoltre, viene utilizzata una query multimediale sperimentale, prefers-reduced-data, per attivare scorrimento multimediale in un'esperienza di scorrimento dei titoli leggera.

Inizia con il markup accessibile

Uno scorrimento contenuti multimediali è composto solo da un paio di componenti principali, un elenco di elementi. R di un elenco, nella sua forma più semplice, può viaggiare in tutto il mondo ed essere consumato da tutti. Un utente che viene indirizzato a questa pagina può sfogliare un elenco e fare clic su un link per visualizzare un elemento. Questa è la nostra base accessibile.

Pubblica un elenco con un elemento <ul>:

<ul class="horizontal-media-scroller">
  <li></li>
  <li></li>
  <li></li>
  ...
<ul>

Rendi interattivi gli elementi dell'elenco con un elemento <a>:

<li>
  <a href="#">
    ...
  </a>
</li>

Utilizza un elemento <figure> per rappresentare semanticamente un'immagine e la relativa didascalia:

<figure>
  <picture>
    <img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
  </picture>
  <figcaption>Legends</figcaption>
</figure>

Nota gli attributi alt e loading in <img>. Testo alternativo per un contenuto multimediale scorrimento è un'opportunità per l'esperienza utente che ti aiuta a fornire ulteriore contesto alla miniatura, testo di riserva se l'immagine non si carica, oppure fornisce un'interfaccia utente vocale per gli utenti fare affidamento su tecnologie per la disabilità come gli screen reader. Scopri di più con Five golden regole per alternative conformi testo.

L'attributo loading accetta la parola chiave lazy come un modo per segnalare questa immagine l'origine deve essere recuperata solo quando l'immagine si trova all'interno dell'area visibile. Può essere molto utile per gli elenchi di grandi dimensioni, in quanto gli utenti scaricano solo immagini hanno fatto scorrere la pagina per vederla.

Supporta la preferenza dell'utente per la combinazione di colori

Utilizza color-scheme come tag <meta> per segnalare al browser che la tua pagina vuole entrambi gli stili di user agent forniti sia chiaro che scuro. È una modalità Buio senza costi o Luce, a seconda di come la guardi:

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

Il meta tag fornisce il primo segnale possibile, quindi il browser può selezionare un colore predefinito del canvas scuro se l'utente ha una preferenza relativa al tema scuro. Ciò significa che le navigazioni tra le pagine del sito non mostreranno una tela bianca lo sfondo tra un caricamento e l'altro. Tema scuro uniforme tra i caricamenti, molto più bello nel agli occhi.

Scopri di più da Thomas Steiner all'indirizzo https://web.dev/color-scheme/.

Aggiungi contenuti

Data la suddetta struttura dei contenuti di ul > li > a > figure > picture > img, Ora devi aggiungere immagini e titoli da scorrere. Ho pacchettizzato la demo immagini e testo segnaposto statici, ma puoi sfruttarli con il tuo l'origine dati preferita.

Aggiungi stile con CSS

Ora è il momento che il CSS prenda questo elenco generico di contenuti e lo trasforma in un un'esperienza senza intervento manuale. Netflix, App Store e molti altri siti e app utilizzano l'orientamento orizzontale aree a scorrimento per compilare l'area visibile con categorie e opzioni.

Creazione del layout di scorrimento

È importante evitare di tagliare i contenuti nei layout o di affidarsi al testo troncato con i puntini di sospensione. Molti televisori dispongono di strumenti di scorrimento dei contenuti multimediali, proprio come ma troppo spesso fanno ricorso a contenuti sui puntini di sospensione. Questo layout no. Inoltre, consente ai contenuti multimediali di ignorare la dimensione della colonna, creando un layout abbastanza flessibile da gestire molte combinazioni interessanti.

Il contenitore consente di eseguire l'override delle dimensioni delle colonne fornendo le dimensioni predefinite una proprietà personalizzata. Questo layout a griglia è basato sulle dimensioni delle colonne, gestione di spaziatura e direzione:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
  margin: 0;
}

La proprietà personalizzata viene quindi utilizzata dall'elemento <picture> per creare le proporzioni di base: un riquadro:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  & picture {
    inline-size: var(--size);
    block-size: var(--size);
  }
}

Con solo alcuni stili secondari in più, completa le funzioni essenziali della funzionalità di scorrimento dei contenuti multimediali:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  & > li {
    display: inline-block; /* removes the list-item bullet */
  }

  & picture {
    inline-size: var(--size);
    block-size: var(--size);
  }
}

L'impostazione di overflow consente di impostare <ul> per consentire lo scorrimento e la navigazione da tastiera nell'elenco, viene rimosso il parametro ::marker per ogni elemento secondario diretto <li> grazie a un nuovo tipo di visualizzazione: inline-block.

Le immagini però non sono ancora reattive e esplodono subito dalle confezioni. sono al suo interno. Domali con alcune dimensioni, misure e stili di bordo. un gradiente di sfondo per il caricamento lento:

img {
  /* smash into whatever box it's in */
  inline-size: 100%;
  block-size: 100%;

  /* don't squish but do cover the space */
  object-fit: cover;

  /* soften the edges */
  border-radius: 1ex;
  overflow: hidden;

  /* if empty, show a gradient placeholder */
  background-image:
    linear-gradient(
      to bottom,
      hsl(0 0% 40%),
      hsl(0 0% 20%)
    );
}

Spaziatura interna di scorrimento

L'allineamento con i contenuti della pagina e un'area di scorrimento da bordo a bordo. essenziale per un componente armonioso e minimale.

Per realizzare il layout di scorrimento da bordo a bordo che si allinea con la nostra tipografia e le linee di layout, utilizza padding che corrisponde a scroll-padding:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding-inline: var(--gap);
  scroll-padding-inline: var(--gap);
  padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}

Nota: abbiamo semplificato il CSS di esempio in modo che includa solo le proprietà logiche. La demo ospitata, collegata tramite link in questo post, presenta dei fallback per i browser che non supportano queste sigle logiche.

Correzione di bug relativi alla spaziatura interna con scorrimento orizzontale Quanto dovrebbe essere facile sovrapponi un container di scorrimento, ma sussistono problemi di compatibilità in sospeso (risolto però in Chromium 91 e versioni successive). Consulta qui per un attimo della cronologia, ma la versione breve è che la spaziatura interna non è sempre stata presa in considerazione per una visualizzazione a scorrimento.

Per indurre con l'inganno i browser a inserire la spaziatura interna alla fine dello scorrimento, sceglie come target l'ultima figura di ogni elenco e aggiunge uno pseudoelemento che sia della spaziatura interna desiderata.

.horizontal-media-scroller > li:last-of-type figure {
  position: relative;

  &::after {
    content: "";
    position: absolute;

    inline-size: var(--gap);
    block-size: 100%;

    inset-block-start: 0;
    inset-inline-end: calc(var(--gap) * -1);
  }
}

L'uso delle proprietà logiche consente allo scorrimento dei contenuti multimediali di funzionare in qualsiasi modalità di scrittura e direzione del documento.

Aggancio scorrimento

Un contenitore a scorrimento con overflow può diventare un'area visibile con agganciamento con una riga di CSS, quindi è compito dell'elemento secondario specificare in che modo vuole allinearsi all'area visibile.

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding-inline: var(--gap);
  scroll-padding-inline: var(--gap);
  padding-block-end: calc(var(--gap) / 2);

  scroll-snap-type: inline mandatory;

  & figure {
    scroll-snap-align: start;
  }
}

Messa a fuoco

L'ispirazione per questo componente deriva dalla sua enorme popolarità sulle TV, negli App Store e altro ancora. Molte piattaforme di videogiochi utilizzano uno scorrimento di contenuti multimediali molto simile a questo, come layout della schermata Home principale. L'obiettivo è un'esperienza utente di grandi dimensioni momento qui, non solo una piccola aggiunta. Immagina di utilizzare questo dispositivo di scorrimento di contenuti multimediali sul divano con un telecomando, apporta all'interazione alcuni piccoli miglioramenti:

.horizontal-media-scroller a {
  outline-offset: 12px;

  &:focus {
    outline-offset: 7px;
  }

  @media (prefers-reduced-motion: no-preference) {
    & {
      transition: outline-offset .25s ease;
    }
  }
}

In questo modo lo stile del contorno dell'elemento attivo 7px si allontana dalla casella, conferendo un'immagine gradevole spazio. Se l'utente non ha preferenze di movimento relative alla riduzione del movimento, l'offset una transizione, dando un'azione sottile all'evento principale.

Nota: questo stato di priorità è un'opportunità per una UX unica e di micro-interazione che definisce il brand.

Indice mobile

Gli utenti di gamepad e tastiere richiedono un'attenzione particolare in questi lunghi elenchi di contenuti e opzioni scorrevoli. Lo schema comune per risolvere questo problema è chiamato indice rotante. È quando un il contenitore di elementi è evidenziato dalla tastiera, ma solo 1 elemento secondario può mantenere lo stato attivo alla volta. Questo singolo elemento attivabile alla volta è progettato per consentire bypassando l'elenco potenzialmente lungo di elementi, a differenza di premere Tab 50+ volte per raggiungere la fine.

Il primo dispositivo di scorrimento della demo contiene 300 elementi. Possiamo fare di meglio che li attraversi tutti per passare alla sezione successiva.

Per creare questa esperienza, JavaScript deve osservare gli eventi della tastiera e impostare lo stato attivo eventi. Ho creato una piccola libreria open source npm per aiutare questo utente facile da raggiungere. Ecco come utilizzarla per i 3 scorrimenti:

import {rovingIndex} from 'roving-ux';

rovingIndex({
  element: someElement
});

Questa demo interroga il documento per gli strumenti di scorrimento e, per ciascuno di essi, Funzione rovingIndex(). Passa l'elemento rovingIndex() per iniziare il viaggio come un contenitore di elenco e un selettore di query di destinazione, nel caso in cui Gli obiettivi principali non sono discendenti diretti.

document.querySelectorAll('.horizontal-media-scroller')
  .forEach(scroller =>
    rovingIndex({
      element: scroller,
      target: 'a',
}))

Per saperne di più su questo effetto, consulta la libreria open source roving-ux.

Proporzioni

Al momento della stesura di questo post, l'assistenza per aspect-ratio è protetto da un in Firefox ma disponibile nei browser o nelle decoder Chromium. Poiché il il layout a griglia dello scorrimento multimediale specifica solo la direzione e la spaziatura, il ridimensionamento può modifica all'interno di una query supporti che la funzionalità controlla il supporto delle proporzioni. Miglioramento progressivo di alcuni cursori di contenuti multimediali più dinamici.

@supports (aspect-ratio: 1) {
  .horizontal-media-scroller figure > picture {
    inline-size: auto; /* for a block-size driven ratio */
    aspect-ratio: 1; /* boxes by default */

    @nest section:nth-child(2) & {
      aspect-ratio: 16/9;
    }

    @nest section:nth-child(3) & {
      /* double the size of the others */
      block-size: calc(var(--size) * 2);
      aspect-ratio: 4/3;

      /* adjust size to fit more items into the viewport */
      @media (width <= 480px) {
        block-size: calc(var(--size) * 1.5);
      }
    }
  }
}

Se il browser supporta la sintassi aspect-ratio, le immagini dello scorrimento dei contenuti multimediali vengono upgrade eseguito alle dimensioni aspect-ratio. Utilizzando la sintassi di nidificazione della bozza, ogni immagine cambia le proporzioni a seconda che si tratti della prima, della seconda o della terza riga. La sintassi nest ti permette anche di impostare le regolazioni dell'area visibile, con l'altra logica di dimensionamento.

Con questo CSS, poiché la funzione è disponibile in più motori del browser, è facile ma un layout visivamente più accattivante.

Preferisco una riduzione dei dati

Sebbene la prossima tecnica sia disponibile solo dietro una bandiera in Canary, Vorrei spiegarti come risparmiare una notevole quantità di tempo di caricamento della pagina dei dati con alcune righe di CSS. La query multimediale prefers-reduced-data da livello 5 permette di chiedere se il dispositivo è in stati ridotti dei dati, ad esempio una modalità Risparmio dati. In tal caso, posso modificare e, in questo caso, nascondere le immagini.

figure {
  @media (prefers-reduced-data: reduce) {
    & {
      min-inline-size: var(--size);

      & > picture {
        display: none;
      }
    }
  }
}

I contenuti sono comunque navigabili, ma senza il costo delle immagini pesanti scaricato. Ecco il sito prima di aggiungere il CSS prefers-reduced-data:

(7 richieste, 100kb di risorse in 131ms)

Ecco il rendimento del sito dopo l'aggiunta del CSS prefers-reduced-data:

(71 richieste, 1.2mb di risorse in 1.07s)

64 richieste in meno, corrispondono alle circa 60 immagini all'interno dell'area visibile (test effettuati su uno schermo largo) di questa scheda del browser, un aumento del caricamento pagina di circa l'80% e il 10% dei dati via cavo. CSS piuttosto efficace.

Conclusione

Ora che sai come ci ho fatto, come lo faresti?! 🙂

Diversificaamo i nostri approcci e impariamo tutti i modi per creare sul web. Crea un codepen o ospita la tua demo, inviaci un tweet e lo aggiungerò al Remix della community di seguito.

Origine

• Fonte delle sfide GUI su GitHub

• Comando iniziale Codepen dello scorrimento contenuti multimediali

Remix della community

Ancora niente da visualizzare qui.