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 comenormal
.
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;
}
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;
}
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; }
reading-flow: grid-rows
.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.