CSS düzeni ve kaynak sırası bağlantısını çözme

Düzen yöntemlerinin öğeleri belgenin kaynağından bağımsız bir sırada düzenlemesi sorunu için önerilen çözümle ilgili geri bildiriminizi bekliyoruz.

Rachel Andrew Technical Writer

CSS Çalışma Grubu, bir düzen yönteminin öğeleri kaynaktan ve dolayısıyla belgenin okuma ve odaklanma sırasından bağımsız bir sırada düzenleyebildiği duruma yönelik bir çözüm üzerinde çalışıyor. Bu makalede sorun ve önerilen çözüm açıklanmaktadır. Geri bildiriminizi almak isteriz.

Sorun

HTML belgesinin okuma sırası, kaynak sırasını takip eder. Bu durumda, ekran okuyucu belgeyi kaynakta düzenlendiği şekilde okur ve klavyeyi kullanarak belgede sekmeler arasında geçiş yapan kişi de bu kaynak sırasını takip eder. Bu genellikle mantıklıdır ve belgenin mantıklı bir kaynak sırası, içeriklerin okuma modu sunumları, ekran okuyucular ve sınırlı CSS'ye sahip tüm cihazlar için hayati önem taşır. Ancak CSS ve özellikle flexbox ve grid, düzenin temel kaynaktan farklı bir görsel okuma sırası tanımladığı düzenler oluşturabilir.

Örneğin, flex öğelerde order özelliğinin kullanılması, düzen sırasını değiştirir ancak kaynaktaki sırayı değiştirmez.

Izgara düzeni kullanılırken, seçilen düzen yönteminin sekme sırasını karıştırması mümkündür. Örneğin, grid-auto-flow: dense kullanılırken öğelerin rastgele bir düzen sırası oluşturulur.

Geliştiriciler, öğeleri ızgaraya kaynaktakinden farklı bir sırada yerleştirerek de bu kopukluğa neden olabilir.

Önerilen çözüm

CSS Çalışma Grubu bu sorun için bir çözüm öneriyor ve geliştiriciler ile erişilebilirlik topluluğundan bu yaklaşımla ilgili geri bildirim almak istiyor.

reading-order: auto ile rastgele düzenler oluşturma

Izgara düzeninde yoğun paketleme kullanma gibi rastgele düzen sırası oluşturan durumlarda, tarayıcının kaynak sırasını değil düzeni takip etmesini istersiniz. Bunun gerçekleşmesi için esnek veya ızgara öğelerinin reading-order özelliği ve auto değeri olması gerekir.

Aşağıdaki CSS, okuma sırasının grid-auto-flow: dense nedeniyle yoğun şekilde paketlenmiş öğelerin yerleşimini takip etmesine neden olur.

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

reading-order-items ile rastgele olmayan düzenleri takip etme

Bazı ızgara ve esnek düzenlerde, düzen sırasını anlamak kolaydır. Örneğin, öğeleri yeniden sıralamak için order özelliğinin kullanıldığı bir esnek düzende, order özelliği tarafından belirlenen açık bir düzen sırası vardır. Diğer düzenlerde ideal düzen sırasının ne olduğu daha az açıktır ve birden fazla olası seçenek olabilir. Bu nedenle, rastgele olmayan düzenleri takip ederken grid-order-items özelliğini kapsayıcıya eklemeniz ve düzen sırasıyla ilgili amacınızı açıklayan anahtar kelime değerlerini kullanmanız gerekir.

Aşağıdaki örnekte, row-reverse kullanan bir esnek düzen gösterilmektedir. Flex öğelerde reading-order: auto, flex kapsayıcıda ise reading-order-items: flex flow sembolü bulunur. Bu semboller, okuma sırasının görsel bir sırayı (flex visual ile belirtebileceğimiz) takip etmek yerine flex-flow yönünü de takip etmesini istediğimizi belirtir.

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

Bir sonraki örnekte, grid-template-areas kullanılarak bir ızgara düzeni oluşturulur ve öğeler, kaynak sırasından farklı bir düzen sırasına yerleştirilir. reading-order-items özelliği, bir sonraki satıra geçmeden önce her satırda ilerleyerek düzen sırasını takip etmemiz gerektiğini belirtmek için kullanılır. (grid column ters yönü gösterir).

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

Bu, kaynak sırasının önemli olmadığı anlamına mı geliyor?

Hayır, kaynak sırası hâlâ önemlidir. Bu işlev yalnızca okuma sırasının kaynaktan farklı olabileceği belirli durumlarda kullanılmalıdır. Örneğin, yoğun ızgara paketleme gibi bu bağlantı kesilmesine neden olabilecek düzen yöntemleri kullanılırken veya belirli bir kesme noktasında farklı bir düzen sırası mantıklı olduğunda.

Bu özellikleri kullanırken sayfa CSS olmadan oluşturulduğunda anlamlı olacak bir sırayla kaynak doküman oluşturun. Bu özellikleri yalnızca gerekli yerlere ve kesme noktalarına ekleyin.

Yazar araçları bu özellikleri uygulamalı mı?

Kullanıcıların öğeleri sürükleyip bırakarak ızgara düzeni oluşturmasına olanak tanıyan yazma araçları, kullanıcıları mantıklı bir kaynak doküman oluşturmaya teşvik etmelidir. Bu nedenle, çoğu durumda kaynağı düzen sırasına göre yeniden sıralamak, bu özellikleri bağlantı kesilmesiyle başa çıkmanın kolay bir yolu olarak kullanmaktan daha uygun olacaktır.

Lütfen bu öneriyle ilgili geri bildiriminizi paylaşın.

Bu konuyla ilgili geri bildirimlerinizi bekliyoruz. Özellikle, bu çözümün işe yaramayacağını düşündüğünüz bir kullanım alanınız varsa veya yaklaşımla ilgili erişilebilirlik konusunda endişeleriniz varsa lütfen CSS Çalışma Grubu'na bildirin.

Devam eden bir ileti dizisinde, yaklaşımla ilgili birçok kullanım alanı ve düşünce yer alıyor. Bu ileti dizisi, yorum eklemek ve bu öneriyle ilgili olası sorunları vurgulamak için harika bir yerdir. Mevcut önerinin, ileti dizisini başlatan ilk önerimden çok farklı olduğunu unutmayın. İlgilenen kullanıcılar, CSS Çalışma Grubu'nda önerilerin nasıl değerlendirilerek tarayıcılarda uygulanabilecek bir hale geldiğini gösteren iyi bir örnek olduğu için bizi bugüne getiren tüm sohbetlerden keyif alabilir.

Küçük resim: Patrick Tomasso. Geri bildirim ve inceleme için Chris Harrelson, Tab Atkins ve Ian Kilpatrick'e teşekkür ederiz.