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 la disconnessione del layout CSS e dell'ordine di origine. Questa sezione descrive nel dettaglio una proposta di cui si sta discutendo il CSS Working Group con l'obiettivo di risolvere il problema relativo al riordinamento elementi in flexbox e nella griglia causano un'esperienza di disconnessione del tasto Tab. La la sezione iniziale di questo post illustra il problema che il gruppo di lavoro cercando di risolvere. Da allora le cose sono cambiate e questo post fornisce una breve aggiornamento della situazione attuale. Abbiamo anche un'area specifica in cui abbiamo bisogno Feedback: come dobbiamo gestire gli articoli che hanno display-contents?

Aggiornamenti alla proposta

C'è ora testo della specifica bozza nella specifica CSS di livello 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, ovvero l'attuale comportamento degli utenti.
• flex-visual: viene applicato solo sui contenitori flessibili. Segue la l'ordine di lettura visivo degli elementi flessibili, tenendo conto della modalità di scrittura.
• flex-flow: viene applicato solo sui contenitori flessibili. Segue il flusso flessibile .
• grid-rows: ha effetto solo sui contenitori della griglia. Segue l'immagine ordine degli elementi della griglia per riga, prendendo in considerazione la modalità di scrittura.
• grid-columns: ha effetto solo sui contenitori della griglia. Segue l'ordine visivo di elementi della griglia per colonna, prendendo in considerazione la modalità di scrittura.
• grid-order: ha effetto solo sui contenitori della griglia. Prende in considerazione la proprietà order, ma per il resto funziona come normal.

Ad esempio, se un container contiene tre elementi flessibili, e impostano flex-direction su row-reverse, sono allineate tra la fine del container flessibile e l'ordine delle schede si sposta da destra a sinistra.

.flex {
  display: flex;
  flex-direction: 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;
}

Nei layout a griglia, usa reading-flow per seguire le righe o le colonne visive anziché rispetto all'ordine di origine. Nell'esempio seguente, il flusso di lettura segue 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 provarla, installa Chrome Dev o Canary versione 128 o successive. e abilita il flag di runtime CSSReadingFlow. Puoi trovare alcuni esempi per iniziare, che funzionano tutti in canary con il flag abilitato.

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

Elementi con display: contents e componenti web

C'è un problema in sospeso il gruppo di lavoro CSS deciderà come affrontare la situazione in cui gli elementi secondari di un elemento con flusso di lettura hanno display: contents, e in modo simile se l'elemento fosse un <slot>.

Nell'esempio seguente, gli elementi <div> hanno display: contents. A causa di Questo, tutti gli elementi <button> vengono promossi per partecipare al Flex layout, pertanto reading-flow prende in considerazione il proprio 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 visti in questo esempio. Hai mai bisogno di riordinare gli elementi che si trovano all'interno di un elemento che ha display: contents con elementi che non sono di pari livello per via di essere fratelli e sorelle dell'elemento che ha display: contents.

Inoltre, mentre lavoriamo per risolvere i problemi relativi a display: contents sarebbe utile vedere qualche esempio di utilizzo Proprietà reading-flow con display: contents. Comprendere il mondo reale i casi d'uso di cui disponi ci aiuteranno a progettare una soluzione che soddisfi le tue esigenze.

Aggiungi casi d'uso Problema relativo al gruppo di lavoro dei CSS. Se hai esempi su siti attivi o puoi creare una demo su CodePen o JSFiddle, che sarebbe molto utile per discutere di questo problema. come gruppo. Se hai dei pensieri su cosa ti aspetti che succeda, È molto utile. Tuttavia, la cosa più importante è vedere i casi d'uso reali.