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 CSS düzeni ve kaynak sırası bağlantısının kaldırılmasını çözme başlıklı blog yayınını yayınlamıştık. Bu makalede, CSS Çalışma Grubu'nda tartışılan ve flexbox ile ızgaradaki öğelerin yeniden sıralanmasının bağlantısız bir sekme deneyimine neden olduğu sorunu çözmeyi amaçlayan bir teklif ayrıntılı olarak açıklanıyordu. Bu yayının başlangıç bölümünde, çalışma grubunun çözmeye çalıştığı sorun özetlenmiştir. O zamandan bu yana bazı gelişmeler oldu. Bu gönderide, şu anda nerede olduğumuza dair kısa bir güncelleme veriyoruz. Ayrıca geri bildiriminize ihtiyaç duyduğumuz belirli bir alanımız var: display-contents içeren öğelerle nasıl başa çıkacağız?

Teklifteki güncellemeler

Artık CSS Ekran Düzeyi 4 spesifikasyonunda taslak spesifikasyon metni bulunmaktadır. Bu işlemle reading-flow adlı yeni bir mülk oluşturulur. Bu mülk, esnek veya ızgara düzeninin kapsayıcı öğesine (display: grid veya display: flex içeren öğe) eklenir.

Özellik aşağıdaki değerleri kabul eder:

  • normal: Mevcut davranış olan DOM'daki öğelerin sırasını takip eder.
  • flex-visual: Yalnızca Flex kapsayıcılarda geçerlidir. Yazma modunu dikkate alarak flex öğelerin görsel okuma sırasını izler.
  • flex-flow: Yalnızca Flex kapsayıcılarda geçerlidir. Esnek akış yönünü izler.
  • grid-rows: Yalnızca ızgara kapsayıcılarında geçerlidir. Izgara öğelerinin görsel sırasını, yazma modunu dikkate alarak satır bazında takip eder.
  • grid-columns: Yalnızca ızgara kapsayıcılarında geçerlidir. Yazma modunu dikkate alarak sütuna göre tablo öğelerinin görsel sırasını takip eder.
  • grid-order: Yalnızca ızgara kapsayıcılarında geçerlidir. order mülkünü hesaba katar ancak diğer açılardan normal gibi davranır.

Örneğin, bir kapsayıcıda üç flex öğeniz varsa ve flex-direction değerini row-reverse olarak ayarlarsanız bu öğeler flex kapsayıcının sonundan sıralanır ve sekme sırası sağdan sola doğru hareket eder.

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

flex-flow: visual ekleyin. Ardından okuma akışı, İngilizce'deki görsel sırayı (yani soldan sağa) izler.

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

Izgara düzenlerinde, görsel satırları veya sütunları takip etmek için kaynak sırası yerine reading-flow kullanın. Aşağıdaki örnekte okuma akışı, satırları izler.

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

Deneyin

Bu CSS özelliği şu anda deneyseldir ancak test için etkinleştirilebilir. Bu özelliği denemek için Chrome Dev veya Canary 128 veya sonraki bir sürümü yükleyin ve çalışma anı işaretini CSSReadingFlow etkinleştirin. Başlamanıza yardımcı olacak bazı örnekler vardır. Bunların tümü, işaret etkinken Canary'da çalışır.

display: contents destek kayıtlarının davranışı üzerinde çalışmalarımız devam ediyor ve bu yayının aşağıdaki bölümünü okuduktan sonra vereceğiniz geri bildirime göre değişebilir.

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

CSS çalışma grubunun, okuma akışı olan bir öğenin alt öğelerinden birinin display: contents değerine sahip olduğu durumlarda nasıl işlem yapılacağına karar vermesi gereken çözülmemiş bir sorun var. Benzer şekilde, öğe bir <slot> ise de bu durum geçerlidir.

Aşağıdaki örnekte, <div> öğelerinde display: contents bulunmaktadır. Bu nedenle, tüm <button> öğeleri esnek düzene katılmak üzere tanıtılır ve bu nedenle 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 örnekte görülen duruma neden olan gerçek hayattan örnekleriniz olup olmadığını öğrenmek isteriz. display: contents içeren bir öğenin içinde bulunan ve display: contents öğesine sahip olmayan öğelerin kardeş olmayan öğeleri olması nedeniyle öğeleri yeniden sıralamanız gerektiği oluyor mu?

Ayrıca, display: contents ile ilgili sorunları çözmek için çalışırken reading-flow mülkünü display: contents ile kullanmak isteyebileceğiniz örnekleri görmek faydalı olacaktır. Gerçek hayattan kullanım alanlarınızı anlamak, ihtiyaçlarınızı karşılayan bir çözüm tasarlamamıza yardımcı olur.

CSS çalışma grubu sorununa kullanım alanları ekleyin. Yayındaki sitelerle ilgili örnekleriniz varsa veya CodePen ya da JSFiddle'da bir demo oluşturabiliyorsanız, bu sorunu grup olarak tartışmaya geldiğimizde çok faydalı olacaktır. Ne olmasını beklediğinizle ilgili düşüncelerinizi de paylaşabilirsiniz. Ancak en önemli şey gerçek kullanım alanlarını görmektir.