Reklam öğesi listesi stili

Bir listeye stil uygulamanın bazı yararlı ve yaratıcı yollarına göz atın.

Michelle Barker
Michelle Barker

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.

Öğ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.

Ekmek, süt, elma gibi öğelerin yer aldığı 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.

Sütle çay hazırlamak için gereken adımların ayrıntılı olarak yer aldığı bir liste.

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.

Sütunlar halinde düzenlenmiş bir taslak liste. Sütunların ortasında bir öğe yer alı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.

İçeriğin iki sütun arasında nasıl bölündüğünü gösteren bir gösterim.

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