Bir listeye stil uygulamanın bazı yararlı ve yaratıcı yollarına göz atın.
Liste dendiğinde aklınıza ne geliyor? En belirgin örnek, alışveriş listesidir. Listelerin en basiti olan alışveriş listesi, belirli bir düzene sahip olmayan bir öğe koleksiyonudur. Ancak web'de listeleri her türlü şekilde kullanıyoruz. Bir mekanda yaklaşan konserlerin koleksiyonu mu? Büyük olasılıkla bir liste. Çok adımlı bir rezervasyon süreci mi? Muhtemelen bir liste. Resim galerisi mi? Bu bile altyazı içeren resimlerin listesi olarak kabul edilebilir.
Bu makalede, web'de bize sunulan farklı HTML listesi türlerini ve bunların ne zaman kullanılacağını ele alacağız. Buna aşina olmayabileceğiniz bazı özellikler de mevcuttur. Ayrıca, CSS ile stil uygulamanın bazı yararlı ve yaratıcı yollarına da göz atacağız.
Liste ne zaman kullanılır?
Öğelerin anlamsal olarak gruplandırılması gerektiğinde HTML liste öğesi kullanılmalıdır. Yardımcı teknolojiler (ekran okuyucular gibi), kullanıcıya bir liste olduğunu ve öğe sayısını bildirir. Örneğin, bir alışveriş sitesindeki ürün ızgarasını düşünün. Bu bilgileri bilmek çok faydalı olur. Bu nedenle, liste öğesi kullanmak iyi bir seçim olabilir.
Türleri listeleyin
İşaretleme söz konusu olduğunda üç farklı liste öğesinden birini seçebiliriz:
- Sırasız liste
- Sıralı liste
- Açıklama listesi
Hangisini seçeceğiniz kullanım alanına bağlıdır.
Sırasız liste (ul)
Sıralı olmayan liste öğesi (<ul>), listedeki öğeler belirli bir sıraya uymadığında en kullanışlıdır. Bu, varsayılan olarak madde listesi olarak gösterilir. Örneğin, sıranın önemli olmadığı bir alışveriş listesi.
Web'de daha yaygın olarak kullanılan bir örnek gezinme menüsüdür. Menü oluştururken yardımcı teknolojilerden yararlanmak için ul öğesini bir nav öğesine sarmalamak ve menüyü bir etiketle tanımlamak iyi bir uygulamadır. Ayrıca menüdeki mevcut sayfayı da tanımlamamız gerekir. Bunu aria-current özelliğini kullanarak yapabiliriz:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
Menü yapısıyla ilgili bu makalede, gezinme menülerimizin herkes tarafından erişilebilir olmasını sağlayacak çeşitli öneriler özetlenmiştir.
Sıralı liste (ol)
Birden fazla adımdan oluşan bir işlem gibi öğelerin sırası önemli olduğunda sıralı liste öğesi (<ol>) en iyi seçimdir. Varsayılan olarak, liste öğeleri numaralandırılır. Adımların sırayla tamamlanması gereken bir dizi talimat buna örnek olarak gösterilebilir.
Hem <ol> hem de <ul> öğeleri doğrudan alt öğeleri olarak yalnızca <li> öğeleri içerebilir.
Açıklama listesi (dl)
Açıklama listesi terimler (<dt> öğeleri) ve açıklamalar (<dd>) içerir. Her terime birden fazla açıklama eşlik edebilir. Olası kullanım alanları arasında terimler sözlüğü veya restoran menüsü yer alabilir. Tarayıcılar <dd> öğesini girintiye alma eğiliminde olsa da açıklama listeleri varsayılan olarak işaretleyicilerle gösterilmez.
HTML'de terimlerin açıklamalarıyla birlikte <div> kullanılarak gruplandırılmasına izin verilir. Daha sonra göreceğimiz gibi, bu özellik stil oluşturma amacıyla yararlı olabilir.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Basit liste stili
Listelerin en basit kullanımlarından biri, gövde metni bloğunda kullanılmasıdır. Çoğu zaman bu basit listelerde ayrıntılı bir stil gerekli değildir ancak sıralı veya sırasız bir listenin işaretçilerini belirli bir ölçüde özelleştirmek isteyebiliriz. Örneğin, marka rengi kullanabilir veya madde işaretlerimiz için özel bir resim kullanabiliriz. list-style ve ::marker sözde öğesi ile birçok şey yapabiliriz.
::marker
Liste işaretçilerimize bazı temel stiller uygulamanın yanı sıra döngüsel madde işaretleri de oluşturabiliriz. Burada, ::marker sözde öğesinin content değeri için üç farklı resim URL'si kullanıyoruz. Bu, alışveriş listesi örneğimizin el yazısı hissini artırır (tüm öğeler için tek bir resim kullanmak yerine):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Özel sayaçlar
Bazı sıralı listelerde sayaç değerini kullanmak ancak ona başka bir değer eklemek isteyebiliriz. list-item sayacını, işaretçimizin content özelliği için değer olarak kullanabilir ve başka herhangi bir içerik ekleyebiliriz:
::marker {
content: counter(list-item) '🐈 ';
}
Sayaçlarımız otomatik olarak bir artar ancak liste öğesinde counter-increment mülkünü ayarlayarak farklı bir değerle artmalarına izin verebiliriz. Örneğin, bu işlem sayaçlarımızı her seferinde üç artırır:
li {
counter-increment: list-item 3;
}
Sayaçlarla ilgili daha birçok konuyu inceleyebiliriz. CSS Listeleri, İşaretleri ve Sayaçları makalesinde, bazı olasılıklar daha ayrıntılı olarak açıklanmaktadır.
::marker stiliyle ilgili sınırlamalar
İşaretçilerimizin konumu ve stili üzerinde daha fazla kontrol sahibi olmak isteyebiliriz. Örneğin, işaretçiyi flexbox veya ızgara kullanarak konumlandırmak mümkün değildir. Bu durum, başka bir hizalamaya ihtiyacınız varsa bazen dezavantaj olabilir. ::marker, stil oluşturmak için sınırlı sayıda CSS özelliği gösterir. Tasarımımız için temel stil dışında bir şey gerekiyorsa başka bir sözde öğe kullanmak daha iyi olabilir.
Liste gibi görünmeyen listelerin stilini belirleme
Bazen listelerimizi, varsayılan stilden tamamen farklı bir şekilde biçimlendirebiliriz. Bu durum genellikle bir gezinme menüsünde yaşanır. Örneğin, genellikle tüm işaretçileri kaldırmak istediğimiz ve listemizi flexbox kullanarak yatay olarak görüntüleyebileceğimiz durumlarda bu durum yaşanır. list-style özelliğini none olarak ayarlamak yaygın bir uygulamadır. Bu durumda, işaretçi sözde öğesine DOM'da artık erişilemez.
::before ile özel işaretçiler
::before sözde öğesine stil uygulamak, ::marker kullanılmadan önce özel liste işaretçileri oluşturmanın yaygın bir yoluydu. Ancak şimdi bile, gerektiğinde görsel olarak karmaşık liste stilleri için daha fazla esneklik sağlayabiliyor.
::marker gibi content özelliğini kullanarak kendi özel madde işareti stillerimizi de ekleyebiliriz. ::marker'ün sunduğu otomatik avantajlardan yararlanamadığımız için ::marker'ü kullanmanın aksine bazı manuel yerleşimler yapmamız gerekiyor. Ancak flexbox ile nispeten kolayca konumlandırabiliriz ve bu, hizalama için daha fazla olasılık sunar. Örneğin, işaretçinin konumunu değiştirebiliriz:
::before öğesini kullanarak bir sıralı listeye stil verirken sayısal işaretçilerimizi eklemek için sayaçlar da kullanabiliriz.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
::marker yerine ::before kullanmak, özel stil için CSS özelliklerine tam erişim sağlamanın yanı sıra animasyonlara ve geçişlere izin verir. ::marker için bu destek sınırlıdır.
Liste özellikleri
Sıralı liste öğeleri, çeşitli kullanım durumlarında bize yardımcı olabilecek bazı isteğe bağlı özellikleri kabul eder.
Ters listeler
Geçen yılın en iyi 10 albümünün listesini kullanıyorsak 10'dan 1'e doğru geri saymak isteyebiliriz. Bunun için özel sayaçlar kullanabilir ve bunları negatif olarak artırabiliriz. Dilerseniz HTML'de reversed özelliğini de kullanabilirsiniz. Sayaçlar tamamen sunum amaçlı olmadığı sürece, CSS'de sayacı negatif olarak artırmak yerine reversed özelliğini kullanmanın genellikle anlamlı olduğunu düşünüyorum. CSS yüklenemediyse sayıların HTML'de doğru şekilde geri sayım yaptığını görmeye devam edersiniz. Ayrıca, ekran okuyucunun listeyi nasıl yorumlayacağını da göz önünde bulundurmamız gerekir.
2021'in en iyi 10 albümünü gösteren bu demoyu inceleyin. Sayaçlar yalnızca CSS ile artırılmışsa ekran okuyucu kullanarak sayfaya erişen bir kullanıcı, sayıların yukarı doğru sayıldığına, yani 10 sayısının aslında bir numara olduğuna karar verebilir.
Demoda, reversed özelliğini kullanarak işaretçilerimizin zaten doğru değere sahip olduğunu ve bunun için herhangi bir çaba sarf etmemiz gerekmediğini görebilirsiniz. Ancak ::before sözde öğesini kullanarak özel liste işaretçileri oluşturuyorsak sayaçları ayarlamamız gerekir. Liste öğesi sayıcımıza negatif yönde artma talimatı vermemiz yeterlidir:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Bu, Firefox'ta yeterli olacaktır ancak Chrome ve Safari'de işaretçiler sıfırdan -10'a kadar geri sayar. Listeye start özelliğini ekleyerek bunu düzeltebiliriz.
Bölünmüş listeler
start özelliği, listenin başlaması gereken sayısal değeri belirtmemize olanak tanır. Bu özelliğin yararlı olabileceği durumlardan biri, bir listeyi gruplara ayırmak istediğinizdedir.
En popüler 10 albüm örneğimizi oluşturalım. İlk 20 albümü 10'ar grup halinde saymak istiyoruz. İki grup arasında başka sayfa içerikleri de vardır.
HTML'mizde iki ayrı liste oluşturmamız gerekiyor ancak sayaçların doğru olduğundan nasıl emin olabiliriz? Şu anki işaretlememiz doğrultusunda her iki liste de 10'dan 1'e doğru geri sayım yapar. Bu, istediğimiz bir durum değildir. Ancak HTML'mizde bir start özellik değeri belirtebiliriz. İlk listemize 20 değerinde bir start eklersek işaretçiler bir kez daha otomatik olarak güncellenir.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Çok sütunlu liste düzeni
Önceki demolarda da görebileceğiniz gibi, çok sütunlu düzen bazen listelerimiz için uygun olabilir. Bir sütun genişliği ayarlayarak listemizin otomatik olarak duyarlı olmasını ve yalnızca yeterli alan olduğunda iki veya daha fazla sütuna yayılmasını sağlayabiliriz. Sütunlar arasında bir boşluk da ayarlayabilir ve daha fazla süsleme için stillendirilmiş bir sütun-kuralı (border özelliğine benzer bir kısaltma kullanarak) ekleyebilirsiniz:
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
Sütunları kullandığımızda bazen liste öğelerimizde hoş olmayan boşluklarla karşılaşabiliriz. Bu, her zaman istediğimiz etkiyi yaratmayabilir.
Liste öğelerimizde break-inside: avoid kullanarak bu zorunlu araları önleyebiliriz:
li {
break-inside: avoid;
}
Özel özellikler
CSS özel özellikleri, listeleri biçimlendirmek için birçok olanak sunar. Liste öğesinin dizini biliniyorsa mülk değerlerini hesaplamak için bu dizin kullanılabilir. Maalesef şu anda CSS'de öğenin dizini (her halükarda kullanılabilir bir şekilde) belirlenemez. Sayaçlar, değerlerini yalnızca content özelliğinde kullanmamıza izin verir ve hesaplamalara izin vermez.
Ancak HTML'mizdeki style özelliğinde öğenin dizini ayarlayabiliriz . Bu, özellikle şablonlama dili kullanıyorsak hesaplamaları daha uygun hale getirebilir. Bu örnekte, Nunjucks'ı kullanarak bunu nasıl ayarlayacağımız gösterilmektedir:
<ol style="--length: items|length">
</ol>
Splitting.js, istemci tarafında benzer bir işlev gerçekleştiren bir kitaplıktır.
Özel mülk değerini kullanarak bir listedeki ilerlemeyi çeşitli şekillerde gösterebiliriz. Bunun bir yolu, adımların yer aldığı bir liste görmek için ilerleme çubuğu olabilir. Bu örnekte, her öğe için kullanıcının listede ne kadar ilerlediğini gösteren bir çubuk oluşturmak üzere doğrusal degrade içeren bir sözde öğe kullanıyoruz.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
hsl() renk işlevini kullanarak liste ilerledikçe tonu da ayarlayabiliriz. Özel mülkümüzden yararlanarak hue değerini hesaplayabiliriz.
Açıklama listesi stili
Daha önce de belirtildiği gibi, daha fazla stil seçeneği sunmak için terimleri ve tanımlarını dl içinde bir div içine sarmalayabiliriz. Örneğin, listemizi bir tablo olarak görüntülemek isteyebiliriz. Her grubun etrafında div sarmalayıcısı olmadan listede display: grid ayarlamak, terimlerimizin ve açıklamalarımızın farklı ızgara hücrelerine yerleştirileceği anlamına gelir. Bu, bazen faydalı olabilir. Aşağıdaki örnekte, açıklamalarıyla birlikte bir turta menüsü gösterilmektedir.
Listenin kendisinde bir ızgara tanımlayabilir ve terimlerin ve açıklamaların her zaman sütunlara hizalanmasını sağlayabiliriz. Bu durumda sütun genişliği, en uzun terime göre belirlenir.
Öte yandan, terimleri açıklama kartı stiline göre farklı bir şekilde gruplandırmak isterseniz sarmalayıcı <div> çok faydalı olur.
Kaynaklar
- Listeler Listelere ve ::marker'a giriş
- ::marker kullanarak özel işaretçiler
- Sayaç içeren CSS listeleri