Bir listeye stil uygulamanın bazı yararlı ve yaratıcı yollarına göz atın.
Liste deyince aklınıza ne geliyor? En belirgin örnek, alışveriş listesidir. Listelerin en basiti olan alışveriş listeleri, belirli bir sıraya göre sıralanmamış öğelerden oluşur. Ancak web'de listeleri her türlü şekilde kullanırız. 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 kullanabileceğimiz farklı HTML liste türlerini ve aşina olmadığınız bazı özellikler de dahil olmak üzere bunları ne zaman kullanacağımızı inceleyeceğiz. 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 işaretli liste olarak gösterilir. Örneğin, sıranın önemli olmadığı bir alışveriş listesi.
Web'de daha yaygın bir örnek, gezinme menüsüdür. Bir menü oluştururken, yardımcı teknolojilere yardımcı olmak 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ğlamak için çeşitli öneriler sunulmaktadır.
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. Liste öğeleri varsayılan olarak numaralandırılır. Örneğin, adımların sırayla tamamlanması gereken bir talimat dizisi olabilir.
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 terim birden fazla açıklamayla birlikte bulunabilir. 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. Bu basit listelerin çoğu zaman ayrıntılı bir stil gerektirmez ancak sıralı veya sırasız bir listenin işaretçilerini bir dereceye kadar özelleştirmek isteyebilirsiniz (ör. marka rengi kullanarak veya madde işaretlerimiz için özel bir resim kullanarak). list-style
ve ::marker
sözde öğesiyle ç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. İşaretçimizin content
özelliği için değer olarak list-item
sayacını kullanabilir ve başka içerikler de 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 stilinin 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 listelere stil uygulama
Bazen listelerimize varsayılan stilde olmayan bir stil uygulamak isteyebiliriz. Bu durum genellikle bir gezinme menüsünde yaşanır. Örneğin, genellikle tüm işaretçileri kaldırmak istediğimizde ve listemizi flexbox kullanarak yatay olarak görüntülemek istediğimizde bu durumla karşılaşabiliriz. 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
::marker
kullanılmadan önce özel liste işaretçileri oluşturmanın yaygın bir yolu ::before
sözde öğesine stil uygulamaktı. Ancak şimdi bile, görsel açıdan karmaşık liste stilleri için ihtiyaç duyduğumuzda daha fazla esneklik sağlayabilir.
::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.list-style-position
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 veriyorsa 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 özelliklerle 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 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üklenemezse HTML'de sayıları doğru şekilde geri sayarken görürsünüz. 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. Bu sorunu, listeye start
özelliğini ekleyerek 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 iyi 10 albüm örneğimizi temel alalı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 sayar. Bu, istediğimiz bir durum değildir. Ancak HTML'mizde bir start
özellik değeri belirtebiliriz. İlk listemize 20 değerinde bir start
değeri 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ı sağlayabiliriz. Bu durumda listemiz, yalnızca yeterli alan olduğunda iki veya daha fazla sütuna yayılır. Sütunlar arasında bir boşluk da ayarlayabilir ve daha da şık bir görünüm için stil uygulanmış 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ı kullanırken bazen liste öğelerimizde hoş olmayan boşluklar oluşabilir. Bu her zaman istediğimiz bir etki değildir.
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 yalnızca değerlerini content
mülkünde 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. Adımların listesi için bir ilerleme çubuğu kullanabilirsiniz. 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 ızgara 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 özellik bazen faydalıdır. Örneğin, aşağıdaki örnekte turta menüsü açıklamalarıyla birlikte 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çıklamalarıyla birlikte kart şeklinde gruplandırmak isterseniz <div>
sarmalayıcısı çok faydalı olur.
Kaynaklar
- Listeler Listelere ve ::marker öğesine giriş
- ::marker kullanarak özel işaretçiler
- Sayaç içeren CSS listeleri