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

Rachel Andrew

Vorig jaar publiceerden we de blogpost 'Het probleem van de CSS-layout en de volgorde van de elementen oplossen' . Daarin beschreven we een voorstel dat werd besproken in de CSS Working Group, met als doel het probleem op te lossen waarbij het herschikken van elementen in flexbox en grid een onsamenhangende tab-ervaring veroorzaakt. Het begin van die post schetst het probleem dat de werkgroep probeert op te lossen. Er is sindsdien veel veranderd en deze post geeft een korte update van waar we nu staan. We hebben ook een specifiek punt waar we graag uw feedback willen ontvangen : hoe gaan we om met elementen die display-contents hebben?

Aanpassingen aan het voorstel

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

De eigenschap accepteert de volgende waarden:

• normal : Volgt de volgorde van elementen in de DOM, wat het huidige gedrag is.
• flex-visual : Werkt alleen op flex-containers. Volgt de visuele leesvolgorde van flex-items, rekening houdend met de schrijfmodus.
• flex-flow : Geldt alleen voor flexibele containers. Volgt de flexflow-richting.
• grid-rows : Dit heeft alleen effect op gridcontainers. Het volgt de visuele volgorde van de griditems per rij, rekening houdend met de schrijfmodus.
• grid-columns : Dit heeft alleen effect op gridcontainers. Het volgt de visuele volgorde van de griditems per kolom, rekening houdend met de schrijfmodus.
• grid-order : Heeft alleen effect op grid-containers. Houdt rekening met de order eigenschap, maar gedraagt ​​zich verder zoals normal .

Als je bijvoorbeeld drie flex-items in een container hebt en hun flex-direction instelt op row-reverse , dan staan ​​ze onder elkaar vanaf het einde van de flex-container en verschuift de tabvolgorde van rechts naar links.

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

Voeg flex-flow: visual weergave volgt dan de leesvolgorde in het Engels, dus van links naar rechts.

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

Bij rasterindelingen volgt reading-flow de visuele rijen of kolommen in plaats van de volgorde van de brontekst. 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 voor testdoeleinden in te schakelen. Installeer hiervoor Chrome Dev of Canary versie 128 of hoger en schakel de runtime-vlag CSSReadingFlow in. Er zijn enkele voorbeelden beschikbaar om u op weg te helpen ; deze werken allemaal in Canary met de vlag ingeschakeld.

Het gedrag voor display: contents gevallen is nog in ontwikkeling 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 nog een openstaande kwestie voor de CSS-werkgroep: hoe om te gaan met de situatie waarin een van de kinderen van een element met `reading-flow` display: contents heeft, en hetzelfde geldt als het item een ​​` <slot> ` is.

In het volgende voorbeeld hebben de <div> -elementen display: contents . Hierdoor worden alle <button> -elementen opgenomen in de flex-layout, waardoor reading-flow rekening houdt 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 praktijkvoorbeelden kent van situaties zoals in dit voorbeeld. Moet u ooit items herschikken die zich binnen een element met display: contents bevinden, terwijl het geen broers of zussen zijn van dat element met display: contents ?

Daarnaast, terwijl we werken aan het oplossen van de problemen rondom display: contents zou het nuttig zijn als u voorbeelden zou kunnen geven van situaties waarin u de reading-flow eigenschap wilt gebruiken in combinatie met display: contents . Inzicht in uw praktijksituaties zal ons helpen een oplossing te ontwerpen die aan uw behoeften voldoet.

Voeg use cases toe aan het issue van de CSS-werkgroep . Als je voorbeelden hebt van live websites of een demo kunt maken op CodePen of JSFiddle, zou dat enorm nuttig zijn wanneer we dit issue als groep bespreken. Ook ideeën over wat je zou verwachten, zijn welkom. Het belangrijkste is echter om de daadwerkelijke use cases te zien.