Flexbox ve Grid gibi yeni düzen yöntemleri, içeriğin sırasını kontrol etme olanağını da beraberinde getirir. Bu makalede, Flexbox kullanırken içeriğinizin görsel düzenini değiştirebileceğiniz yollara göz atacağız. Ayrıca öğeleri yeniden sıralamanın erişilebilirlik açısından sonuçlarını da ele alacağız.
Öğeleri tersine çevirin
flex-direction özelliği dört değerden birini alabilir:
rowcolumnrow-reversecolumn-reverse
İlk iki değer, öğeleri belge kaynağı sıralamasında göründükleri sırada tutar ve başlangıç satırından itibaren sıralı olarak görüntüler.
Son iki değer, başlangıç ve bitiş satırlarını değiştirerek öğeleri tersine çevirir.
Başlangıç çizgisinin (start line) yazma modlarıyla ilgili olduğunu unutmayın. Yukarıdaki örnekler, satır ve satır tersinin İngilizce gibi soldan sağa ilerleyen bir dilde nasıl çalıştığını göstermektedir. Arapça gibi sağdan sola bir dilde çalışıyorsanız, satır sağdan başlar, satır tersi ise soldan başlar.
Bu, öğeleri ters sırada görüntülemenin düzgün bir yolu gibi görünebilir, ancak öğelerin yalnızca görsel olarak ters sırada görüntülendiğine dikkat etmelisiniz. Belirtimler bu konuda şunları söylemektedir:
“Not: Flex düzeninin yeniden sıralama özellikleri kasıtlı olarak yalnızca görsel oluşturmayı etkiler, konuşma sırasını ve gezinmeyi kaynak sırasına göre bırakır. Bu, konuşma ve sıralı gezinme gibi doğrusal modeller için kaynak sırasını olduğu gibi bırakırken görsel sunumu değiştirmenize olanak tanır.” – Sıralama ve Yönlendirme
Öğeleriniz bağlantılar veya kullanıcının sekme ile ulaşabileceği başka bir öğe olsaydı, sekme sırası bu öğelerin belge kaynağında göründüğü sıra olurdu – görsel sıranız değil.
*-reverse değeri kullanıyorsanız veya öğelerinizi başka bir şekilde yeniden sıralıyorsanız, kaynaktaki mantıksal sırayı gerçekten değiştirmeniz gerekip gerekmediğini düşünmelisiniz. Belirtim, kaynağınızdaki sorunları düzeltmek için yeniden sıralama kullanmamanız konusunda bir uyarı ile devam eder:
“Yazarlar, flex-flow/flex-direction’ın order veya *-reverse değerlerini doğru kaynak sıralamasının yerine kullanmamalıdır, çünkü bu belgenin erişilebilirliğini bozabilir.”
Not: Firefox birkaç yıl boyunca kaynak sırasını değil görsel sırayı takip etmeye çalışarak diğer tarayıcılardan farklı davranmasına neden olan bir hataya sahipti. Bu hata artık düzeltildi. Tüm güncel kullanıcı aracıları spesifikasyonu takip edeceğinden ve bunu yapacağından, her zaman kaynak sırasını belgenin mantıksal sırası olarak almalısınız.
Aşağıdaki örnekte, flex-direction kullanarak sırayı değiştirirseniz, sekme sırasının öğelerin kaynakta listelendiği sırayı takip etmeye devam ettiğini görebilirsiniz.
.box {
display: flex;
flex-direction: row-reverse;
}
<div class="box">
<div><a href="#">One</a></div>
<div><a href="#">Two</a></div>
<div><a href="#">Three</a></div>
</div>
Sıralama özelliği
Flex öğelerinin görsel olarak görüntülendiği sırayı tersine çevirmenin yanı sıra, tek tek öğeleri hedefleyebilir ve order özelliğini kullanarak görsel sıralamada göründükleri yeri değiştirebilirsiniz.
order özelliği, öğeleri sıralı gruplar halinde düzenlemek için tasarlanmıştır. Bunun anlamı, öğelere gruplarını temsil eden bir tamsayı atanmasıdır. Öğeler daha sonra bu tamsayıya göre görsel sıraya yerleştirilir, en düşük değerler önce gelir. Birden fazla öğe aynı tamsayı değerine sahipse, öğeler bu grup içinde kaynak sırasına göre yerleştirilir.
Örnek olarak, 5 flex öğemiz olsun ve sıralama değerlerini aşağıdaki gibi atayalım:
- Kaynak öğe 1: order: 2
- Kaynak öğe 2: order: 3
- Kaynak öğe 3: order: 1
- Kaynak öğe 4: order: 3
- Kaynak öğe 5: order: 1
These items would be displayed on the page in the following order:
- Kaynak öğe 3: order: 1
- Kaynak öğe 5: order: 1
- Kaynak öğe 1: order: 2
- Kaynak öğe 2: order: 3
- Kaynak öğe 4: order: 3
Aşağıdaki örnekte değerlerle oynayabilir ve bunun sıralamayı nasıl değiştirdiğini görebilirsiniz. Ayrıca flex-direction’ı row-reverse olarak değiştirmeyi deneyin ve ne olduğunu görün – başlangıç çizgisi değiştirilir, böylece sıralama karşı taraftan başlar.
.box {
display: flex;
flex-direction: row;
}
.box :nth-child(1) { order: 2; }
.box :nth-child(2) { order: 3; }
.box :nth-child(3) { order: 1; }
.box :nth-child(4) { order: 3; }
.box :nth-child(5) { order: 1; }
<div class="box">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
<div><a href="#">4</a></div>
<div><a href="#">5</a></div>
</div>
Flex öğelerinin varsayılan order değeri 0‘dır, bu nedenle 0’dan büyük bir tamsayı değerine sahip öğeler, açık bir sıra değeri verilmemiş tüm öğelerden sonra görüntülenecektir.
Ayrıca, oldukça kullanışlı olabilen negatif değerleri de order ile kullanabilirsiniz. Bir öğenin önce görüntülenmesini ve diğer tüm öğelerin sırasının değişmemesini istiyorsanız, bu öğeye -1 sırası verebilirsiniz. 0‘dan küçük olduğu için öğe her zaman önce görüntülenecektir.
Aşağıdaki örnekte Flexbox kullanarak yerleştirilmiş öğelerimiz var. HTML’de active sınıfının atandığı öğeyi değiştirerek, hangi öğenin önce görüntüleneceğini ayarlayabiliriz. Böylece düzenin en üstünde tam genişlikte istediğimiz öğe olur, diğer öğeler ise onun altında görüntülenir.
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.active {
order: -1;
flex: 1 0 100%;
}
<div class="box">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div class="active"><a href="#">3</a></div>
<div><a href="#">4</a></div>
<div><a href="#">5</a></div>
</div>
Öğeler, spesifikasyonda sırası-değiştirilmiş belge sırası olarak tanımlanan şekilde görüntülenir. Öğeler görüntülenmeden önce order özelliğinin değeri dikkate alınır.
order aynı zamanda öğelerin boyama sırasını da değiştirir; order için daha düşük bir değere sahip öğeler önce boyanır ve order için daha yüksek bir değere sahip olanlar daha sonra boyanır.
order özelliği ve erişilebilirlik
order özelliğinin kullanımı, flex-direction ile yönün değiştirilmesindeki gibi, erişilebilirlik açısından tamamen benzer etkilere sahiptir. order kullanımı, öğelerin boyanma sırasını ve görsel olarak görünme sırasını değiştirir. Ancak, öğelerin sıralı gezinme düzenini değiştirmez. Bu nedenle, bir kullanıcı öğeler arasında sekme ile geçiş yapıyorsa, kendilerini düzeninizde çok kafa karıştırıcı bir şekilde atlarken bulabilirler.
Bu sayfadaki örneklerden herhangi birinde sekme yaparak, düzenin bir tür işaretleme cihazı kullanmayan herkes için potansiyel olarak nasıl garip bir deneyim yarattığını görebilirsiniz. Görsel düzen ile mantıksal düzen arasındaki bu kopukluk ve erişilebilirlik açısından ortaya çıkardığı bazı potansiyel sorunlar hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara (İngilizce) bakabilirsiniz.
- Flexbox ve klavye navigasyon bağlantısının kesilmesi
- HTML Kaynak Sırası vs CSS Görüntüleme Sırası
- Klavye Odağı için Duyarlı Düzen Çatışması
order nerelerde kullanılmalı
Bazen flex öğelerinin mantıksal ve görsel sıralamalarının ayrı olmasının yararlı olduğu yerler vardır. Dikkatli kullanıldığında order özelliği, bazı faydalı ortak modellerin kolayca uygulanmasına olanak sağlayabilir.
Örneğin bir haber öğesini gösterecek bir kart tasarımınız olabilir. Haber öğesinin başlığı vurgulanması gereken en önemli şeydir. Bu öğe okumak istediği içeriği bulmak için başlıklar arasında sekme yapan bir kullanıcının atlayabileceği öğe olacaktır. Kartın bir de tarihi olabilir; mesela aşağıdaki gibi:
Görsel olarak tarih, kaynakta başlığın üzerinde görünür. Ancak, kart bir ekran okuyucu tarafından okunuyorsa, önce başlığın ve ardından yayın tarihinin duyurulmasını tercih ederdim. Bunu order özelliğini kullanarak yapabiliriz.
Kart, flex-direction değeri column olarak ayarlanmış flex konteynerimiz olacak. Daha sonra tarihe -1‘lik bir sıra veriyorum. Bu da onu başlığın üstüne çekiyor.
.card {
display: flex;
flex-direction: column;
}
.date {
order: -1;
text-align: right;
}
<div class="wrapper">
<div class="card">
<h3>News item title</h3>
<div class="date">1 Nov 2017</div>
<p>This is the content of my news item. Very newsworthy.</p>
</div>
<div class="card">
<h3>Another title</h3>
<div class="date">6 Nov 2017</div>
<p>This is the content of my news item. Very newsworthy.</p>
</div>
</div>
Bu küçük değişiklikler, order özelliğinin anlamlı olduğu türden durumlardır. Mantıksal sırayı belgenin okuma ve sekme sırası olarak tutun ve bunu en erişilebilir ve yapılandırılmış şekilde koruyun. Ardından sıralamayı tamamen görsel tasarım değişiklikleri için kullanın. Bunu yaparken, kullanıcı sekmeler arasında gezinirken klavye ile erişilebilecek öğeleri yeniden sıralamamaya dikkat edin. Özellikle yeni düzen yöntemleri denerken ve tarayıcı testlerinizi yaparken siteyi fare veya dokunmatik ekran yerine yalnızca klavye kullanarak test etmeyi denediğinizden de emin olmalısınız. Geliştirme tercihlerinizin içerikte dolaşmayı zorlaştırıp zorlaştırmadığını hızlıca göreceksiniz.