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 Risolvere il problema di disconnessione tra il layout CSS e l'ordine delle origini. Abbiamo spiegato in dettaglio una proposta discussa nel gruppo di lavoro CSS, con l'obiettivo di risolvere il problema per cui il riordinamento degli elementi in flexbox e griglia causa un'esperienza di tabulazione disconnessa. La sezione iniziale del post illustra il problema che il gruppo di lavoro sta cercando di risolvere. Da allora le cose sono cambiate e questo post fornisce un breve aggiornamenti sul punto in cui siamo. Abbiamo anche un'area specifica in cui abbiamo bisogno del tuo feedback: come gestiamo gli elementi con display-contents?

Aggiornamenti alla proposta

Ora è presente il testo della bozza della specifica nella specifica del livello di visualizzazione CSS 4. Questa operazione introduce 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 corrente.
• flex-visual: ha effetto solo sui container flessibili. Segue l'ordine di lettura visiva degli elementi flessibili, tenendo conto della modalità di scrittura.
• flex-flow: viene applicato solo sui contenitori flessibili. Segue la direzione del flusso flessibile.
• grid-rows: viene applicato solo ai contenitori della griglia. Segue l'ordine visivo degli elementi della griglia per riga, tenendo conto della modalità di scrittura.
• grid-columns: viene applicato solo ai contenitori della griglia. Segue l'ordine visivo degli elementi della griglia per colonna, tenendo conto della modalità di scrittura.
• grid-order: ha effetto solo sui contenitori della griglia. Tiene conto della proprietà order, ma altrimenti si comporta come normal.

Ad esempio, se in un contenitore sono presenti tre elementi flessibili e imposti flex-direction su row-reverse, questi 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;
}

Aggiungi flex-flow: visual e 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;
}

Nei layout a griglia, utilizza reading-flow per seguire le righe o le colonne visive anziché l'ordine dell'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; }

Prova

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

Il comportamento per le richieste 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 per il gruppo di lavoro CSS che deve 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>.

Nel seguente esempio, gli elementi <div> hanno display: contents. Per questo motivo, tutti gli elementi <button> vengono promossi a partecipare al layout flessibile e, di conseguenza, 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 riportata 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 ci adoperiamo per risolvere i problemi relativi a display: contents, sarebbe utile vedere eventuali esempi in cui potresti 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 relativo al gruppo di lavoro CSS. Se hai esempi su siti live o puoi creare una demo su CodePen o JSFiddle, sarebbe molto utile quando discuteremo di questo problema in gruppo. Se hai idee su cosa ti aspetti che accada, anche queste sono utili. Tuttavia, la cosa più importante è vedere i casi d'uso reali.