Verzoek om feedback van ontwikkelaars over de leesstroom en elementen met weergave: inhoud

Rachel Andrew

Vorig jaar publiceerden we de blogpost Solving the CSS layout and source order disconnect . Hierin werd een voorstel gedetailleerd beschreven dat wordt besproken in de CSS-werkgroep, met als doel het probleem op te lossen waarbij het opnieuw ordenen van items in flexbox en grid een verbroken tabervaring veroorzaakt. Het eerste deel van dat bericht schetst het probleem dat de werkgroep probeert op te lossen. Sindsdien zijn de zaken verder gegaan en dit bericht geeft een korte update van waar we nu staan. We hebben ook een specifiek gebied waarop we uw feedback nodig hebben : hoe gaan we om met items met display-contents ?

Updates van het voorstel

Er is nu een conceptspecificatietekst in de CSS Display Level 4-specificatie. Dit introduceert een nieuwe eigenschap genaamd reading-flow . Deze eigenschap wordt toegevoegd aan het bevattende element voor de flex- of grid-indeling (het element met display: grid of display: flex ).

De eigenschap accepteert de volgende waarden:

• normal : Volg de volgorde van de elementen in de DOM, wat het huidige gedrag is.
• flex-visual : Werkt alleen op flexcontainers. Volgt de visuele leesvolgorde van flexitems, rekening houdend met de schrijfmodus.
• flex-flow : Heeft alleen effect op flexcontainers. Volgt de flexstroomrichting.
• grid-rows : Heeft alleen effect op gridcontainers. Volgt de visuele volgorde van rasteritems per rij, waarbij rekening wordt gehouden met de schrijfmodus.
• grid-columns : Heeft alleen effect op rastercontainers. Volgt de visuele volgorde van rasteritems per kolom, waarbij rekening wordt gehouden met de schrijfmodus.
• grid-order : Heeft alleen effect op gridcontainers. Houdt rekening met de order , maar gedraagt ​​zich verder als normal .

Als u bijvoorbeeld drie flex-items in een container hebt en hun flex-direction instelt op row-reverse , worden ze uitgelijnd vanaf het einde van de flex-container en beweegt de tabvolgorde van rechts naar links.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

Voeg flex-flow: visual en vervolgens volgt de leesstroom de visuele volgorde in het Engels, dus van links naar rechts.

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

Gebruik in rasterlay reading-flow om de visuele rijen of kolommen te volgen in plaats van de bronvolgorde. In het volgende voorbeeld volgt de leesstroom de rijen.

.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; }

Probeer het eens

Deze CSS-eigenschap is momenteel experimenteel, maar het is mogelijk om deze in te schakelen voor testen. Om het uit te proberen, installeert u Chrome Dev of Canary versie 128 of hoger en schakelt u de runtime-vlag CSSReadingFlow in. Er zijn enkele voorbeelden om u op weg te helpen , die allemaal werken in Canarische eilanden met de vlag ingeschakeld.

Het gedrag voor display: contents is nog steeds een werk in uitvoering en kan veranderen op basis van de feedback die u geeft na het lezen van het volgende gedeelte van dit bericht.

Elementen met display: contents en webcomponenten

Er is een openstaande kwestie voor de CSS-werkgroep om te beslissen hoe om te gaan met de situatie waarin een van de kinderen van een element met leesstroom display: contents heeft, en op dezelfde manier als het item een <slot> is.

In het volgende voorbeeld hebben de <div> -elementen display: contents . Hierdoor worden alle <button> -elementen gepromoveerd om deel te nemen aan de flex-indeling, en daarom houdt reading-flow rekening met hun volgorde.

 .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>

We willen graag weten of u voorbeelden uit de praktijk heeft die de situatie in dit voorbeeld veroorzaken. Moet u ooit items die zich in een element bevinden dat display: contents heeft, opnieuw rangschikken met items die geen broers en zussen zijn, omdat ze broers en zussen zijn van het item met display: contents .

Terwijl we eraan werken om de problemen rond display: contents op te lossen, zou het bovendien nuttig zijn om voorbeelden te zien waarin u mogelijk de reading-flow eigenschap wilt gebruiken met display: contents . Als u uw praktijksituaties begrijpt, kunnen wij een oplossing ontwerpen die aan uw behoeften voldoet.

Voeg gebruiksscenario's toe aan het CSS-werkgroepprobleem . Als u voorbeelden op live sites heeft of een demo kunt maken op CodePen of JSFiddle, zou dat ongelooflijk nuttig zijn als we dit probleem als groep komen bespreken. Als je ideeën hebt over wat je zou verwachten dat er zou gebeuren, is dat ook nuttig. Het belangrijkste is echter om de echte gebruiksscenario's te zien.