Okuma akışı ve görüntülü reklam içeriği bulunan öğelerle ilgili geliştirici geri bildirimi isteği

Rachel Andrew

Geçen yıl blog yayınını paylaştık CSS düzeni ve kaynak sırası bağlantısının kesilmesi sorununu çözme. Bu, şu kaynakta tartışılmakta olan bir teklifi yeniden düzenlemenin neden olduğu sorunu çözmek üzere Esnek kutudaki ve ızgaradaki öğeler, sekme tuşunun bağlantısının kesilmesine neden olur. İlgili içeriği oluşturmak için kullanılan Bu yayının başlangıç bölümü, çalışma grubunun bağımsız olarak arıyoruz. O zamandan bu yana bazı şeyler değişti. Bu gönderi, güncel bilgi sahibi olmanızı sağlar. Ayrıca, sizden hizmet alacağımız belirli geri bildirim: display-contents içeren öğeleri nasıl ele alırız?

Teklifteki güncellemeler

Artık var taslak spesifikasyon metni geri dönelim. Bu işlem sonucunda reading-flow adlı yeni bir özellik kullanıma sunulmuştur. Bu özellik, esnek veya ızgara düzeni için kapsayıcı öğeye eklenir (display: grid veya display: flex içeren öğe).

Mülk aşağıdaki değerleri kabul eder:

  • normal: DOM'deki öğelerin sırasını takip edin. Bu, gösterir.
  • flex-visual: Yalnızca esnek kapsayıcılarda geçerli olur. İzleme Esnek öğelerin görsel okuma sırası, yazma modunu dikkate alır.
  • flex-flow: Yalnızca esnek kapsayıcılarda geçerli olur. Esnek akışı izler girin.
  • grid-rows: Yalnızca ızgara kapsayıcılarında geçerli olur. Görseli takip eder tablo öğelerini satır bazında sıralayabilirsiniz.
  • grid-columns: Yalnızca ızgara kapsayıcılarında geçerli olur. Görsel sıralamayı takip eder ızgara öğesinin sütuna göre ayrılmış sayısını gösterir.
  • grid-order: Yalnızca ızgara kapsayıcılarında geçerli olur. order mülkünü dikkate alır. ancak aksi takdirde normal gibi davranır.

Örneğin, bir kapsayıcıda üç esnek öğeniz varsa, ve flex-direction cihazını şuna ayarla: row-reverse ise esnek kapsayıcının sonundan ve sekme sırasının sonuna doğru sıralanırlar sağdan sola hareket eder.

.flex {
  display: flex;
  flex-direction: row-reverse;
}
row-reverse ile varsayılan esnek öğe akışı.

flex-flow: visual ekleyin, ardından okuma akışı şurada görsel sıra takip eder: İngilizceden soldan sağa.

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

Izgara düzenlerinde, görsel satır veya sütunları takip etmek için reading-flow kullanın. daha iyi performans gösterir. Aşağıdaki örnekte okuma akışı, satır.

.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 ile.
ziyaret edin.

Deneyin

Bu CSS mülkü şu anda deneyseldir ancak etkinleştirilebilir kullanmaya karar verebilir. Denemek için Chrome Dev veya Canary'nin 128 ya da sonraki bir sürümünü yükleyin. ve çalışma zamanı işareti CSSReadingFlow. Burada başlayabilmeniz için bazı örnekler vardır. Bunların tümü Canary'de bayrak etkinken çalışır.

display: contents destek kaydının davranışı üzerinde çalışmalar devam etmektedir ve aşağıdaki bölümü okuduktan sonra verdiğiniz geri bildirimlere göre bu gönderiyi takip edin.

display: contents ve web bileşenleri içeren öğeler

Bekleyen bir sorun var bir karara varmasını istediğinize karar vermesi için okuma akışına sahip bir öğenin alt öğeleri display: contents ve Öğe <slot> ise benzer şekilde.

Aşağıdaki örnekte, <div> öğelerinde display: contents bulunmaktadır. Kaynak: bunun sonucunda, tüm <button> öğeleri esnekliğe dahil edilmeye hazırlanır. dolayısıyla reading-flow bunların sırasını dikkate alır.

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

Bu duruma neden olan gerçek hayattan örnekleriniz olup olmadığını bilmek isteriz örnek olarak verilebilir. Bir veya daha fazla nedeniyle kardeş olmayan öğelerle display: contents öğesinin yer aldığı öğe display: contents öğesinin kardeşleri olmalarıdır.

Ayrıca, display: contents ile ilgili sorunları çözmeye çalışıyoruz. display: contents ile reading-flow mülk. Gerçek dünyayı anlama kullanım alanlarınız, ihtiyaçlarınızı karşılayan bir çözüm tasarlamamıza yardımcı olacaktır.

Kullanım alanlarını CSS çalışma grubu sorunu. Canlı sitelerinizde örnekleriniz varsa veya CodePen'de bir demo oluşturabiliyorsanız veya JSFiddle, bu konuyu tartışmaya geldiğimizde çok yararlı olacak bir seçim yapabilirsiniz. Ne olacağıyla ilgili düşünceleriniz varsa çok faydalı olur. Ancak gerçek kullanım alanlarını görmektir.