Reklam öğesi listesi stili

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