Richiesta di feedback degli sviluppatori sul flusso di lettura e sugli elementi con display: contenuti

Rachel Andrew

L'anno scorso abbiamo pubblicato il post del blog Solving the CSS layout and source order disconnect. Questo documento descriveva una proposta in discussione nel CSS Working Group, che mira a risolvere il problema per cui il riordino degli elementi in flexbox e griglia causa un'esperienza di navigazione con la tastiera disconnessa. La sezione iniziale del post descrive il problema che il gruppo di lavoro sta cercando di risolvere. Da allora le cose sono cambiate e questo post fornisce un breve aggiornamento sulla situazione attuale. Abbiamo anche un'area specifica in cui abbiamo bisogno del tuo feedback: come gestiamo gli elementi che presentano display-contents?

Aggiornamenti alla proposta

Ora è disponibile il testo della specifica della bozza nella specifica del livello 4 di CSS Display. Viene introdotta una nuova proprietà chiamata reading-flow. Questa proprietà viene aggiunta all'elemento contenitore per il layout flessibile o a griglia (l'elemento con display: grid o display: flex).

La proprietà accetta i seguenti valori:

  • normal: segui l'ordine degli elementi nel DOM, che è il comportamento attuale.
  • flex-visual: ha effetto solo sui container flessibili. Segue l'ordine di lettura visivo degli elementi flessibili, tenendo conto della modalità di scrittura.
  • flex-flow: ha effetto solo sui container flessibili. Segue la direzione del flusso flessibile.
  • grid-rows: ha effetto solo sui contenitori griglia. Segue l'ordine visivo degli elementi della griglia per riga, tenendo conto della modalità di scrittura.
  • grid-columns: ha effetto solo sui contenitori griglia. Segue l'ordine visivo degli elementi della griglia per colonna, tenendo conto della modalità di scrittura.
  • grid-order: ha effetto solo sui contenitori griglia. Prende in considerazione la proprietà order, ma per il resto si comporta come normal.

Ad esempio, se hai tre elementi flessibili in un contenitore e imposti flex-direction su row-reverse, si allineano dalla fine del contenitore flessibile e l'ordine di tabulazione si sposta da destra a sinistra.

.flex {
  display: flex;
  flex-direction: row-reverse;
}
Flusso predefinito degli elementi flessibili con row-reverse.

Aggiungi flex-flow: visual, quindi il flusso di lettura seguirà l'ordine visivo in inglese, quindi da sinistra a destra.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}
Con reading-flow:flex-visual.

Nei layout a griglia, utilizza reading-flow per seguire le righe o le colonne visive anziché l'ordine di origine. Nell'esempio seguente, il flusso di lettura segue le righe.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
Con reading-flow: grid-rows.

Prova

Questa proprietà CSS è attualmente sperimentale, ma è possibile attivarla per i test. Per provarlo, installa Chrome Dev o Canary versione 128 o successive e attiva il flag di runtime CSSReadingFlow. Esistono alcuni esempi per iniziare, che funzionano tutti in Canary con il flag abilitato.

Il comportamento per i casi display: contents è ancora in fase di sviluppo e potrebbe cambiare in base al feedback che fornisci dopo aver letto la sezione seguente di questo post.

Elementi con display: contents e componenti web

Esiste un problema in sospeso che il gruppo di lavoro CSS deve risolvere per decidere come gestire la situazione in cui uno degli elementi secondari di un elemento con flusso di lettura ha display: contents e analogamente se l'elemento fosse un <slot>.

Nell'esempio seguente, gli elementi <div> hanno display: contents. Per questo motivo, tutti gli elementi <button> vengono promossi per partecipare al layout flessibile e pertanto reading-flow tiene conto del loro ordine.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

Vorremmo sapere se hai esempi reali che causano la situazione che si vede in questo esempio. Hai mai bisogno di riordinare gli elementi all'interno di un elemento che ha display: contents con elementi che non sono fratelli, perché sono fratelli dell'elemento che ha display: contents.

Inoltre, mentre lavoriamo per risolvere i problemi relativi a display: contents, sarebbe utile vedere esempi in cui potresti voler utilizzare la proprietà reading-flow con display: contents. Comprendere i casi d'uso reali che hai ci aiuterà a progettare una soluzione che soddisfi le tue esigenze.

Aggiungi casi d'uso al problema del gruppo di lavoro CSS. Se hai esempi su siti attivi o puoi creare una demo su CodePen o JSFiddle, questi sarebbero incredibilmente utili quando discuteremo di questo problema come gruppo. Anche le tue aspettative su cosa dovrebbe succedere sono utili. Tuttavia, la cosa più importante è vedere i casi d'uso reali.