Öğeleri dokümanın kaynağıyla bağlantısı olmayan bir sırada düzenleyen düzen yöntemleriyle ilgili sorun için önerilen çözüm hakkında geri bildiriminizi bekliyoruz.
CSS Çalışma Grubu, bir düzen yönteminin öğeleri kaynaktan ve dolayısıyla dokümanın okuma ve odaklanma sırasından farklı bir sırada düzenleyebileceği duruma yönelik bir çözüm üzerinde çalışıyor. Bu makalede sorun ve önerilen çözüm açıklanmaktadır. Geri bildirimlerinizi almaktan memnuniyet duyarız.
Sorun
HTML dokümanının okuma sırası, kaynak sırasını takip eder. Bu, ekran okuyucunun dokümanı kaynakta düzenlendiği şekilde okuyacağı ve klavyeyi kullanarak dokümanda sekme tuşuyla gezinen bir kullanıcının da bu kaynak sırasını takip edeceği anlamına gelir. Bu genellikle mantıklı bir durumdur. Doküman için mantıklı bir kaynak sırası, içeriğin 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 de esnek kutu ve ızgara, 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ı, kaynaktaki sırayı değil, düzen sırasını değiştirir.
Seçilen düzen yönteminin, ızgara düzeni kullanıldığında sekme sırasını karıştırması mümkündür. Örneğin, öğelerin rastgele bir düzen sırası oluşturduğu grid-auto-flow: dense kullanıldığında bu durum ortaya çıkar.
Geliştiriciler de öğeleri ızgaraya kaynakta belirtilenden farklı bir sırada yerleştirerek bu bağlantısızlığa neden olabilir.
Önerilen çözüm
CSS Çalışma Grubu bu sorun için bir çözüm öneriyor ve geliştiricilerden ve erişilebilirlik topluluğundan bu yaklaşımla ilgili geri bildirim almak istiyor.
reading-order: auto ile rastgele düzenleri takip etme
Rastgele bir düzen sırası oluşturan durumlarda (ör. ızgara düzeninde yoğun paketleme kullanılırken) tarayıcının kaynak sıra yerine düzeni takip etmesini istersiniz. Bunun gerçekleşmesi için esnek veya ızgara öğelerinin auto değerine sahip bir reading-order özelliğine sahip 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ı tablo ve esnek sayfa düzenlerinde sayfa düzeni sırasını anlamak kolaydır. Örneğin, öğeleri yeniden sıralamak için order mülkünü kullanan bir esnek düzende, order mülkü tarafından belirlenen belirgin bir düzen sırası vardır. Diğer düzenlerde ideal düzen sırasının ne olduğu daha az nettir ve birden fazla olası seçenek olabilir. Bu nedenle, rastgele olmayan düzenleri takip ederken kapsayıcıya grid-order-items mülkünü eklemeniz ve anahtar kelime değerleriyle düzen sırası için amacınızı açıklamanı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 bulunur. Bu, okuma sırasının görsel bir sırayı (flex visual ile gösterebiliriz) takip etmek yerine flex-flow yönünü de takip etmesini istediğimizi gösterir.
.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 düzeninden farklı bir düzen sırasına yerleştirilir. reading-order-items mülkü, bir sonrakine geçmeden önce her satırı geçerek düzen sırasını izlememiz 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;
}
Does this mean that source order doesn't matter?
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ısızlığa neden olabilecek düzen yöntemleri kullanıldığında veya belirli bir kesme noktasında farklı bir düzen sırası anlamlı olduğunda.
Bu özellikleri kullanırken, sayfa CSS olmadan oluşturulmuş olsaydı anlamlı olacak bir sırayla kaynak doküman oluşturun. Bu özellikleri yalnızca gerekli olan yerlere ve kesme noktalarına ekleyin.
İçerik üretme 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 içerik üretme araçları, kullanıcıları mantıklı bir kaynak belge oluşturmaya teşvik etmelidir. Bu nedenle, çoğu durumda bu özellikleri bağlantıyı kesme sorununu çözmenin tembel bir yolu olarak kullanmak yerine kaynağı, düzen sırasına göre yeniden sıralamak daha uygun olur.
Lütfen bu teklifle ilgili geri bildiriminizi paylaşın
Bu konuda geri bildirim almak istiyoruz. Özellikle, bu yaklaşımın çözmeyeceğini düşündüğünüz bir kullanım alanınız varsa veya yaklaşımla ilgili erişilebilirlik endişeniz varsa lütfen CSS Çalışma Grubu'na bildirin.
Yaklaşımla ilgili birçok kullanım alanı ve düşüncenin yer aldığı devam eden bir ileti dizisi vardır. Bu ileti dizisi, yorum eklemek ve bu teklifle ilgili olası sorunları vurgulamak için mükemmel bir yerdir. Mevcut teklifin, ileti dizisini başlatan ilk teklifimden çok farklı olduğunu unutmayın. İlgilenenler, CSS Çalışma Grubu'nda önerilerin tarayıcılarda uygulanabilir hale gelmesi için nasıl çalışıldığının iyi bir örneği olduğu için bugün bulunduğumuz noktaya getiren tüm sohbetleri inceleyebilir.
Patrick Tomasso tarafından oluşturulan küçük resim. Geri bildirim ve yorum için Chris Harrelson, Tab Atkins ve Ian Kilpatrick'e teşekkür ederiz.