Liste stilini belirlemenin bazı yararlı ve yaratıcı yollarına bir bakış.
Bir liste derken aklınıza ne geliyor? En belirgin örnek alışveriş listesidir. Alışveriş listeleri, listelerin en basitidir ve belirli bir sırada olmayan bir öğe koleksiyonudur. Ancak listeleri web'de pek çok şekilde kullanırız. Bir konser mekanında yaklaşmakta olan konserlerden oluşan bir koleksiyon mu? Büyük olasılıkla bir liste. Çok adımlı bir rezervasyon işlemi mi? Büyük olasılıkla bir liste. Resim galerisi mi? Bu, altyazılı resimlerin bir listesi olarak da düşünülebilir.
Bu makalede, web'de kullanabildiğimiz farklı HTML liste türlerini ve bunların ne zaman kullanılacağını ele alacağız. Ayrıca, aşina olmadığınız bazı özellikleri de paylaşacağız. Bunları CSS ile biçimlendirmenin bazı yararlı ve yaratıcı yollarını da inceleyeceğiz.
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 ve öğe sayısı olduğunu bildirir. Diyelim ki bir alışveriş sitesindeki ürün ızgarası hakkında bilgi sahibi olmak sizin için çok yararlı olacak. Bu nedenle, liste öğesi kullanmak iyi bir seçim olabilir.
Türleri listeleyin
İşaretleme konusunda, kullanabileceğimiz üç farklı liste öğesi seçeneğimiz vardır:
- Sırasız liste
- Sıralı liste
- Açıklama listesi
Hangi yöntemin seçileceği kullanım alanına bağlıdır.
Sırasız liste (ul)
Sırasız liste öğesi (<ul>
) en çok, listedeki öğeler belirli bir siparişe karşılık gelmediğinde kullanışlıdır. Varsayılan olarak bu liste madde işaretli bir liste şeklinde görüntülenir. Siparişin önemli olmadığı bir alışveriş listesi buna örnek olarak gösterilebilir.
Web'de daha yaygın bir örnek olarak gezinme menüsü verilebilir. Menü oluştururken, yardımcı teknolojilere yardımcı olması için ul
öğesini nav
öğesi içine almak ve menüyü bir etiketle tanımlamak iyi bir uygulamadır. Ayrıca, aria-current
özelliğini kullanarak bunu yapabileceğimiz geçerli sayfayı da menüde tanımlamamız gerekir:
<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 için erişilebilir olmasını sağlamaya yönelik bir dizi öneri özetlenmektedir.
Sıralı liste (ol)
Öğelerin sırası önemliyse (ör. çok adımlı bir işlem) sıralı liste öğesi (<ol>
) en iyi seçenektir. Varsayılan olarak, liste öğeleri numaralandırılır. Adımların sırayla tamamlanması gereken bir talimat grubu buna örnek olarak gösterilebilir.
Hem <ol>
hem de <ul>
öğeleri, doğrudan alt öğeleri olarak yalnızca <li>
öğelerini içerebilir.
Açıklama listesi (dl)
Açıklama listesi terimler (<dt>
öğe) ve açıklamalar (<dd>
) içerir. Her terime birden fazla açıklama eşlik edebilir. Olası kullanım alanları arasında bir terimler sözlüğü veya belki bir restoran menüsü yer alabilir. Açıklama listeleri, varsayılan olarak herhangi bir işaretçiyle görüntülenmez ancak tarayıcılar genellikle <dd>
öğesine girinti ekler.
HTML'de, terimlerin, açıklamalarıyla birlikte <div>
kullanılarak gruplandırılmasına izin verilir. Bu, daha sonra bahsedeceğimiz gibi biçimlendirme amaçları için 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
Bir listenin en basit kullanımlarından biri, gövde metni bloğundadır. Bu basit listelerin çoğu zaman ayrıntılı stilde stil uygulanması gerekmez, ancak sıralı veya sıralanmamış bir listenin işaretçilerini belirli bir ölçüde özelleştirmek (marka rengi veya madde işaretleri için özel bir resim gibi) isteyebiliriz. list-style
ve ::marker
sözde öğesiyle pek çok şey yapabiliriz.
::işaretçi
Liste işaretçilerimize bazı temel stiller vermenin yanı sıra döngüsel madde işaretleri oluşturabiliriz. Burada, sözde ::marker
öğesinin content
değeri için üç farklı resim URL'si kullanıyoruz. Bu URL, alışveriş listesi örneğimizin elle yazılmış hissine katkıda bulunur (sadece herkes 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ğeri kullanmak, ancak bu değere başka bir değer eklemek isteyebiliriz. list-item
sayacını, işaretçimizin content
özelliği için bir değer olarak kullanabilir ve başka herhangi bir içeriği ekleyebiliriz:
::marker {
content: counter(list-item) '🐈 ';
}
Sayaçlarımız otomatik olarak bir birim artar ancak seçersek, liste öğesinde counter-increment
özelliğini ayarlayarak bunların farklı bir değerle artırılmasına izin verebiliriz. Örneğin, bu işlem sayaçlarımızı her defasında üç artırır:
li {
counter-increment: list-item 3;
}
Sayaçlarla ilgili olarak ayrıntıya girebileceğimiz daha pek çok şey var. CSS Listeleri, İşaretçiler ve Sayaçlar başlıklı makalede, olasılıkların bazıları daha ayrıntılı olarak açıklanmaktadır.
::İşaretçi stiliyle ilgili sınırlamalar
Bazen işaretçilerimizin konumu ve stili üzerinde daha fazla kontrol sahibi olmak isteyebiliriz. İşaretçiyi flexbox veya ızgara kullanarak konumlandırmak mümkün değildir. Örneğin, başka bir hizalamaya ihtiyacınız olduğunda bu, bir dezavantaj olabilir. ::marker
, stil için sınırlı sayıda CSS özelliği sunar. Tasarımımız temel stil dışında bir şey gerektiriyorsa, başka bir sözde öğe kullanmamız daha iyi olabilir.
Liste gibi görünmeyen listelerin stil özelliklerini ayarlama
Bazen listelerimize varsayılan stilden tamamen farklı bir şekilde stil eklemek isteyebiliriz. Bu durum çoğu zaman gezinme menüsünde ortaya çıkar. Örneğin, genellikle tüm işaretçileri kaldırmak istediğimizde flexbox'ı kullanarak listemizi yatay olarak görüntüleyebiliriz. list-style
özelliğinin none
olarak ayarlanması yaygın bir uygulamadır. Bu, işaretçinin sözde öğesine artık DOM'de erişilemeyeceği anlamına gelir.
::before içeren özel işaretçiler
::before
yapay öğesinin stilini belirlemek, ::marker
ortaya çıkmadan önce özel liste işaretçileri oluşturmanın yaygın bir yöntemiydi. Ancak şimdi bile, gerektiğinde görsel olarak karmaşık liste stilleri oluşturmak için bize daha fazla esneklik sağlayabilir.
::marker
gibi, content
özelliğini kullanarak kendi özel madde işareti stillerimizi ekleyebiliriz. list-style-position
tarafından sunulan otomatik avantajlardan yararlanamadığımızdan, ::marker
kullanımının aksine manuel konumlandırma yapmamız gerekir. Ancak flexbox ile göreceli olarak daha kolay konumlandırabiliyoruz ve bu da hizalama için çok daha fazla olasılık sunuyor. Örneğin, işaretçinin konumunu değiştirebiliriz:
::before
öğesini kullanarak sıralı bir listenin stilini belirliyorsak sayısal işaretçilerimizi eklemek için sayaçlar kullanmak isteyebiliriz.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
::marker
yerine ::before
kullanılması, özel stil için CSS özelliklerine tam erişmenin yanı sıra animasyonlara ve geçişlere izin vermemize olanak tanır. Bu işlem için ::marker
ile ilgili destek sınırlıdır.
Özellikleri listeleme
Sıralı liste öğeleri, çeşitli kullanım alanlarında bize yardımcı olabilecek bazı isteğe bağlı özellikleri kabul eder.
Ters çevrilmiş listeler
Geçen yılın en iyi 10 albümünü içeren listemiz varsa 10'dan 1'e kadar geri sayım yapmak isteyebiliriz. Bunun için özel sayaçlar kullanabilir ve bunları negatif olarak artırabiliriz. Veya sadece HTML'de reversed
özelliğini kullanabiliriz. Sadece sunum amaçlı değilse CSS'de sayacı negatif şekilde artırmak yerine reversed
özelliğini kullanmanın genellikle anlamsal bir mantıklı olduğunu düşünüyorum. CSS yüklenemediyse HTML'de sayıların doğru şekilde geri sayım yaptığını görüyordunuz. Ayrıca ekran okuyucuların listeyi nasıl yorumlayacağını da dikkate almalıyız.
2021'in en iyi 10 albümünü içeren bu demoya katılın. Sayaçlar sadece CSS ile artırıldıysa, bir ekran okuyucu kullanarak sayfaya erişen bir kişi sayıların yukarı doğru sayıldığı sonucuna varabilir ve dolayısıyla 10 rakamı aslında bir numaradır.
Demoda, reversed
özelliğini kullanarak işaretçilerimizin zaten doğru değere sahip olduğunu ve herhangi bir ekstra çaba sarf etmemizi gerektirmediğini görebilirsiniz. Ancak ::before
sözde öğesini kullanarak özel liste işaretçileri oluşturuyorsak sayaçlarımızı ayarlamamız gerekir. Liste öğesi sayacımıza negatif bir artış talimatı vermemiz yeterlidir:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Bu değer Firefox'ta yeterlidir, ancak Chrome ve Safari'de işaretçiler sıfırdan -10'a geri sayım yapar. Listeye start
özelliğini ekleyerek bu sorunu düzeltebiliriz.
Bölünmüş listeler
start
özelliği, listenin başlaması gereken sayısal değeri belirtmemize olanak tanır. Bir listeyi gruplara bölmek istediğiniz durumlarda bu yöntem yararlı olabilir.
En iyi 10 albüm örneğimizden ilerleyelim. Belki de en iyi 20 albümü 10'lu gruplar halinde saymak istiyoruz. İki grup arasında başka bir sayfa içeriği vardır.
HTML'mizde iki ayrı liste oluşturmamız gerekecek, ancak sayaçların doğru olmasını nasıl sağlayabiliriz? İşaretlememiz şu anda geçerli olduğundan, her iki liste de 10'dan 1'e doğru geri sayım yapacaktır. Bu, istediğimiz bir sonuç değildir. Ancak, HTML'mizde start
özellik değerini belirtebiliriz. İlk listemize start
değerini 20 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 listelerimize uygun olabilir. Bir sütun genişliği ayarlayarak listemizin otomatik olarak duyarlı olmasını sağlayabilir ve yalnızca yeterli alan olduğunda kendisini iki veya daha fazla sütunun üzerine yerleştirebiliriz. Ayrıca, sütunlar arasında boşluk belirleyebilir ve daha fazla zenginlik elde etmek için stile sahip bir sütun-kural'ı ekleyebiliriz (border
özelliğine benzer bir kısayol kullanarak):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
Sütunları kullandığınızda, bazen liste öğelerimizde rahatsız edici olmayan kesintiler elde edebiliyoruz. Bu da her zaman istediğimiz etkiyi yaratmaz.
Liste öğelerimizde break-inside: avoid
kullanarak bu zorunlu araları önleyebiliriz:
li {
break-inside: avoid;
}
Özel mülkler
CSS özel özellikleri, stil listeleri için çok çeşitli olasılıkları açar. Liste öğesinin dizinini biliyorsak, özellik değerlerini hesaplamak için bu dizini kullanabiliriz. Maalesef şu anda öğenin dizinini (herhangi bir şekilde kullanılabilir bir şekilde) tek başına CSS'de belirlemenin bir yolu yoktur. Sayaçlar yalnızca değerlerini content
özelliğinde kullanmamıza izin verir ve hesaplamalara izin vermez.
Ancak öğenin dizinini HTML'mizdeki style
özelliğinde ayarlayabiliriz. Böylece, özellikle şablon oluşturma dili kullandığımız durumlarda hesaplamalar daha uygun hale gelir. Aşağıdaki ö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 özellik değerini kullanarak, bir listedeki ilerleme durumunu çeşitli şekillerde gösterebiliriz. Bunun bir yolu, adımların listesini gösteren bir 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 renk geçişine sahip 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);
}
Liste ilerledikçe, hsl()
renk işlevini kullanarak tonu da ayarlayabiliriz. Özel özelliğimizi kullanarak hue
değerini hesaplayabiliriz.
Açıklama listesi stili
Daha önce de belirtildiği gibi, bize daha fazla stil seçeneği sunmak için terimleri ve tanımlarını bir dl
içinde div
içine almayı seçebiliriz. Örneğin, listemizi tablo halinde görüntülemek isteyebiliriz. Her bir grubun çevresinde bir sarmalayıcı olmadan div
eklemek, terimlerimizin ve açıklamalarımızın farklı ızgara hücrelerine yerleştirileceği anlamına gelir.display: grid
Aşağıdaki örnekte olduğu gibi, bir turta menüsünü açıklamalarıyla birlikte göstermek bazen yararlı olur.
Listenin kendisinde bir tablo tanımlayabilir ve terimler ile açıklamaların sütun genişliği en uzun terime göre belirlendiğinde her zaman sütunlar halinde hizalanmasını sağlayabiliriz.
Diğer yandan, terimleri açıklama kartı stilinde ayırt edici şekilde gruplandırmak istiyorsanız sarmalayıcı <div>
çok faydalı olacaktır.
Kaynaklar
- Listeler ve listelere giriş ::marker
- ::marker kullanan özel işaretçiler
- Sayaçlı CSS listeleri