Öğeleri dokümanın kaynağıyla bağlantısı olmayan bir sırada düzenleyen düzen yöntemleriyle ilgili soruna yönelik önerilen çözüm hakkında geri bildiriminizi bekliyoruz.
CSS Çalışma Grubu, bir düzen yönteminin öğeleri kaynaktan kopuk bir düzende, dolayısıyla da dokümanın okunma ve odaklanma sırasına göre düzenleyebileceği duruma yönelik bir çözüm üzerinde çalışmaktadır. Bu makalede sorun ve önerilen çözüm açıklanmaktadır. Geri bildirimlerinizi bekliyoruz.
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 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 ve 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, esnek öğelerde order özelliğinin kullanılması düzen sırasını değiştirir ancak kaynaktaki sırayı değiştirmez.
Seçilen düzen yöntemi, ızgara düzeni kullanıldığında sekme sırasını karıştırabilir. Örneğin, öğelerin rastgele bir düzen sırası oluşturduğu grid-auto-flow: dense kullanıldığında bu durum ortaya çıkabilir.
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ğinin 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üzenin anlaşılması kolaydır. Örneğin, öğeleri yeniden sıralamak için order özelliğinin kullanıldığı bir esnek düzende, order özelliği tarafından belirtilen belirgin bir düzen sırası bulunur. 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, düzen sırası için amacınızı açıklayan anahtar kelime değerleriyle birlikte grid-order-items mülkünü kapsayıcıya eklemeniz gerekir.
Aşağıdaki örnekte, row-reverse kullanılan 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;
}
Aşağıdaki örnekte, grid-template-areas kullanılarak bir ızgara düzeni oluşturulmuş ve öğeler, kaynak sıraya göre farklı bir düzen sırasına yerleştirilmiştir. 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 doküman 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ürler.