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ı arasındaki bağlantı kopukluğunu çözme başlıklı blog yayınını yayınladık. Bu, CSS Çalışma Grubu'nda tartışılan ve Flexbox ile Grid'de öğelerin yeniden sıralanmasının sekme deneyiminin kesilmesine neden olduğu sorunu çözmeyi amaçlayan bir teklifi ayrıntılandırıyordu. Bu yayının başlangıç bölümünde, çalışma grubunun çözmeye çalıştığı sorun özetlenmektedir. O zamandan bu yana çok şey değişti. Bu gönderide, şu anki durumumuzla ilgili kısa bir güncelleme yer alıyor. Ayrıca, geri bildiriminize ihtiyaç duyduğumuz belirli bir alan da var: display-contents içeren öğelerle nasıl başa çıkıyoruz?

Teklifle ilgili güncellemeler

CSS Display Level 4 spesifikasyonunda artık taslak spesifikasyon metni yer alıyor. Bu, reading-flow adlı yeni bir özelliği kullanıma sunar. Bu özellik, esnek veya ızgara düzeni için kapsayan öğeye (display: grid veya display: flex içeren öğe) eklenir.

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

• normal: DOM'daki öğelerin sırasını takip edin. Bu, mevcut davranıştır.
• flex-visual: Yalnızca esnek kapsayıcılarda geçerlidir. Yazma modunu dikkate alarak, esnek öğelerin görsel okuma sırasını takip eder.
• flex-flow: Yalnızca esnek kapsayıcılarda geçerlidir. Esnek akış yönünü izler.
• grid-rows: Yalnızca ızgara kapsayıcılarda geçerlidir. Yazma modunu dikkate alarak tablo öğelerinin görsel sırasını satır bazında takip eder.
• grid-columns: Yalnızca ızgara kapsayıcılarda geçerlidir. Yazım modu dikkate alınarak tablo öğelerinin sütun bazında görsel sırasını takip eder.
• grid-order: Yalnızca ızgara kapsayıcılarda geçerlidir. order özelliğini dikkate alır ancak diğer açılardan normal gibi davranır.

Örneğin, bir kapsayıcıda üç flex öğeniz varsa ve bunların flex-direction özelliğini row-reverse olarak ayarlarsanız öğeler, flex kapsayıcının sonundan başlayarak hizalanır ve sekme sırası sağdan sola doğru ilerler.

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

flex-flow: visual ekleyin. Okuma akışı, İngilizce'deki görsel sıraya göre (soldan sağa) ilerler.

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

Izgara düzenlerinde, kaynak sırasını değil 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 eder.

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

Deneyin

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

display: contents ile ilgili davranış hâlâ geliştirme aşamasındadır ve bu yayının aşağıdaki bölümünü okuduktan sonra vereceğiniz geri bildirimlere göre değişebilir.

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

CSS çalışma grubunun, okuma akışı olan bir öğenin alt öğelerinden birinde display: contents varsa ve benzer şekilde öğe bir <slot> ise bu durumla nasıl başa çıkılacağına karar vermesi gereken bir bekleyen sorun var.

Aşağıdaki örnekte, <div> öğeleri display: contents içeriyor. Bu nedenle, tüm <button> öğeleri esnek düzene katılmak üzere yükseltilir ve bu nedenle reading-flow öğelerin 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 varsa lütfen bizimle paylaşın. Hiç display: contents öğesi içeren bir öğenin içindeki öğeleri, display: contents öğesi içeren öğenin kardeşleri oldukları için kardeş olmayan öğelerle yeniden sıralamanız gerekiyor mu?

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

Kullanım alanlarını CSS çalışma grubu sorununa ekleyin. Canlı sitelerde örnekleriniz varsa veya CodePen ya da JSFiddle'da bir demo oluşturabilirseniz bu sorunu grup olarak tartışırken bu örnekler çok faydalı olacaktır. Ne olmasını beklediğinizle ilgili düşünceleriniz varsa bunları da paylaşabilirsiniz. Ancak en önemlisi, gerçek kullanım alanlarını görmektir.