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 Görüntüleme 4. Seviye spesifikasyonunda taslak spesifikasyon metni var. 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 esnek kapsayıcılarda geçerlidir. Yazma modunu dikkate alarak flex öğelerin görsel okuma sırasını izler.
  • flex-flow: Yalnızca esnek kapsayıcılarda geçerlidir. Esnek akış yönünü izler.
  • grid-rows: Yalnızca ızgara kapsayıcılarında geçerlidir. Yazma modunu dikkate alarak, tablo öğelerinin satır bazında görsel sırasını izler.
  • grid-columns: Yalnızca ızgara kapsayıcılarında geçerlidir. Yazma modunu dikkate alarak sütunlara 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.

Kaynak sırası yerine görsel satırları veya sütunları takip etmek için reading-flow simgesini kullanın. Aşağıdaki örnekte okuma akışı satırları takip etmektedir.

.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şiklik yapılabilir.

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> öğeleri display: contents değerine sahiptir. 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çindeki öğeleri, display: contents içeren öğenin kardeş öğeleri olmaları nedeniyle kardeş olmayan öğelerle yeniden sıralamanız gerekir mi?

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. Canlı sitelerde örnekleriniz varsa veya CodePen ya da JSFiddle'de bir demo oluşturabiliyorsanız bu sorunu grup olarak ele aldığımızda bu bilgiler ç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.