Reklam öğesi listesi stili

Liste deyince aklınıza ne geliyor? En bariz örnek, bir alışveriş listesidir – listelerin en basiti, belirli bir sıraya sahip olmayan bir öğeler koleksiyonudur. Ancak listeleri web’de her türlü şekilde kullanırız. Bir mekanda yaklaşan konserlerden oluşan bir koleksiyon mu? Büyük olasılıkla bir liste. Çok adımlı bir rezervasyon süreci mi? Büyük olasılıkla bir liste. Bir resim galerisi mi? Bu bile altyazılı bir resim listesi olarak düşünülebilir.

Bu makalede, aşina olmadığınız bazı özellikler de dahil olmak üzere, web’de bize sunulan farklı HTML listesi türlerini ve bunları ne zaman kullanacağımızı ayrıntılı olarak ele alacağız. Ayrıca bunları CSS ile biçimlendirmenin bazı yararlı ve yaratıcı yollarına da göz atacağız.

Bir liste ne zaman kullanılır? #

Öğelerin anlamsal olarak gruplanması gerektiğinde bir HTML liste öğesi kullanılmalıdır. Yardımcı teknolojiler (ekran okuyucular gibi), kullanıcıya bir liste olduğunu ve öğelerin sayısını bildirir. Diyelim ki bir alışveriş sitesindeki bir ürün tablosunu düşünürseniz, bu bilgiyi bilmek çok yardımcı olacaktır. Bu nedenle, bir liste öğesi kullanmak iyi bir seçim olabilir.

Liste türleri #

İşaretlemeye gelince, kullanabileceğimiz üç farklı liste öğesi seçeneğimiz var:

• Sırasız liste
• Sıralı Liste
• Açıklama listesi

Hangisinin seçileceği kullanım durumuna bağlıdır.

Sırasız liste (ul) #

Sırasız liste öğesi (&LTul>) en çok listedeki öğeler belirli bir sıraya karşılık gelmediğinde kullanışlıdır. Varsayılan olarak bu, madde işaretli bir liste olarak görüntülenecektir. Bir örnek, siparişin önemli olmadığı bir alışveriş listesidir.

Web’de daha yaygın bir örnek, bir gezinme menüsüdür. Bir menü oluştururken, menüyü sarmak iyi bir uygulamadır. ul içinde nav öğe ve yardımcı teknolojilere yardımcı olmak için menüyü bir etiketle tanımlamak. Ayrıca menüde mevcut sayfayı da tanımlamalıyız, bunu kullanarak yapabiliriz. aria-current bağlanmak:

nav aria-label="Main">  
ul>  
li>  
a href="/page-1" aria-current="page">Menu item 1&LT/a>  
&LT/li>  
li>  
a href="/page-2">Menu item 2&LT/a>  
&LT/li>  
li>  
a href="/page-2">Menu item 2&LT/a>  
&LT/li>  
…  
&LT/ul>  
&LT/nav>  

Menü yapısıyla ilgili bu makale gezinme menülerimizin herkes tarafından erişilebilir olmasını sağlamak için bir dizi tavsiyeyi özetlemektedir.

Sıralı liste (ol) #

Sıralı bir liste öğesi (&LTol>) çok adımlı bir süreç gibi öğelerin sırasının önemli olduğu durumlarda en iyi seçimdir. Varsayılan olarak, liste öğeleri numaralandırılmıştır. Bir örnek, adımların sırayla tamamlanması gereken bir dizi talimat olabilir.

İkisi birden &LTol> Ve &LTul> öğeler yalnızca içerebilir &LTli> doğrudan çocukları olarak öğeler.

Açıklama listesi (dl) #

Açıklama listesi terimleri içerir (&LTdt> öğeler) ve açıklamalar (&LTdd>). Her terime birden fazla açıklama eşlik edebilir. Olası kullanım örnekleri arasında bir terimler sözlüğü veya 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 &LTdd> eleman.

HTML’de terimlerin açıklamalarıyla gruplandırılmasına izin verilir. &LTdiv>. Bu, daha sonra göreceğimiz gibi, şekillendirme amaçları için yararlı olabilir.

&LT!-- This is valid --> 
dl>  
dt>Term 1&LT/dt>  
dd>This is the first description of the first term in the list&LT/dd>  
dd>This is the second description of the first term in the list&LT/dd>  
dt>Term 2&LT/dt>  
dd>This is the description of the second term in the list&LT/dd>  
&LT/dl>
&LT!-- This is also valid --> 
dl>  
div>  
dt>Term 1&LT/dt>  
dd>This is the first description of the first term in the list&LT/dd>  
dd>This is the second description of the first term in the list&LT/dd>  
&LT/div>  
div>  
dt>Term 2&LT/dt>  
dd>This is the description of the second term in the list&LT/dd>  
&LT/div>  
&LT/dl>  

Basit liste stili #

Bir listenin en basit kullanımlarından biri, bir gövde metni bloğu içindedir. Çoğu zaman bu basit listeler ayrıntılı bir stile ihtiyaç duymaz, ancak sıralı veya sırasız bir listenin işaretçilerini bir dereceye kadar özelleştirmek isteyebiliriz, örneğin bir marka rengiyle veya madde işaretlerimiz için özel bir resim kullanarak. ile çok şey yapabiliriz list-style ve ::marker sözde eleman!

::işaretleyici #

Liste işaretçilerimize bazı temel stiller vermenin yanı sıra döngüsel madde işaretleri oluşturabiliriz. Burada üç farklı resim URL’si kullanıyoruz. content değeri ::marker alışveriş listesi örneğimizin elle yazılmış hissine katkıda bulunan sözde öğe (herkes için tek bir resim kullanmanın aksine):

::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ı listeler için sayaç değerini kullanmak, ancak ona başka bir değer eklemek isteyebiliriz. kullanabiliriz list-item sayaçlarımız için bir değer olarak sayaç content özellik ve diğer içeriği ekleyin:

::marker {  
content: counter(list-item) '🐈 ';  
}  

Sayaçlarımız otomatik olarak birer birer artar, ancak dilersek farklı bir değer artırmalarına izin verebiliriz. counter-increment liste öğesindeki özellik. Örneğin, bu, sayaçlarımızı her seferinde üç artıracaktır:

li {  
counter-increment: list-item 3;  
}  

Sayaçlarla inceleyebileceğimiz daha çok şey var. Makale CSS Listeleri, İşaretçiler ve Sayaçlar bazı olasılıkları daha ayrıntılı olarak açıklar.

::işaretleyici stilinin sınırlamaları #

Kalemlerimizin konumu ve stili üzerinde daha fazla kontrol sahibi olmak isteyebileceğimiz zamanlar olabilir. Örneğin, işaretçiyi esnek kutu veya ızgara kullanarak konumlandırmak mümkün değildir; bu, başka bir hizalamaya ihtiyaç duyarsanız bazen bir dezavantaj olabilir. ::marker stil için sınırlı sayıda CSS özelliği sunar. Tasarımımız temel stilden başka bir şey gerektiriyorsa, başka bir sözde öğe kullanmak daha iyi olabilir.

Listelere benzemeyen stil listeleri #

Bazen listelerimizi varsayılan stilden tamamen farklı bir şekilde stilize etmek isteyebiliriz. Bu genellikle bir gezinme menüsüyle olur., örneğin, genellikle tüm işaretçileri kaldırmak istediğimiz ve flexbox kullanarak listemizi yatay olarak görüntüleyebileceğimiz yer. Yaygın bir uygulama, list-style mülkiyet none. Bu, işaretçi sözde öğeye artık DOM’da erişilemeyeceği anlamına gelir.

::before ile özel işaretçiler #

Şekillendirme ::before sözde öğe, daha önce özel liste işaretçileri oluşturmanın yaygın bir yoluydu. ::marker geldi Ancak şimdi bile, görsel olarak karmaşık liste şekillendirme için ihtiyacımız olduğunda bize daha fazla esneklik sağlayabilir.

Beğenmek ::markerkullanarak kendi özel madde işareti stillerimizi ekleyebiliriz. content bağlanmak. kullanmanın aksine ::markertarafından sunulan otomatik avantajları elde edemediğimiz için bazı manuel konumlandırmalar yapmamız gerekiyor. list-style-position. Ancak onu flexbox ile nispeten kolayca konumlandırabiliriz ve bu, hizalama için daha fazla sayıda olasılık açar. Örneğin, işaretçinin konumunu değiştirebiliriz:

Kullanarak sıralı bir liste şekillendiriyorsak ::before öğesi, sayısal işaretçilerimizi eklemek için sayaçları da kullanmak isteyebiliriz.

li::before {  
counter-increment: list-item;  
content: counter(list-item);  
}  

kullanma ::before yerine ::marker özel stil için CSS özelliklerine tam erişim sağlamanın yanı sıra animasyonlara ve geçişlere izin verir; bunlar için destek sınırlıdır. ::marker.

Nitelikleri listele #

Sıralı liste öğeleri, çeşitli kullanım durumlarında bize yardımcı olabilecek bazı isteğe bağlı nitelikleri kabul eder.

Ters listeler #

Geçen yılın en iyi 10 albümünü içeren bir listemiz olsa, 10’dan 1’e kadar geri saymak isteyebiliriz. abilir bunun için özel sayaçlar kullanın ve bunları negatif olarak artırın. Ya da basitçe kullanabiliriz reversed HTML’deki öznitelik. Kullanmanın genellikle anlamsal olarak mantıklı olduğunu iddia ediyorum. reversed sayaçlar tamamen sunumsal olmadıkça, CSS’de sayacı negatif olarak artırmak yerine öznitelik. CSS yüklenemezse, HTML’de sayıların doğru şekilde geri sayıldığını görmeye devam edersiniz. Ayrıca, bir ekran okuyucunun listeyi nasıl yorumlayacağını düşünmemiz gerekir.

2021’deki en iyi 10 albümün bu demosunu izleyin. Sayaçlar yalnızca CSS ile artırıldıysa, ekran okuyucu kullanarak sayfaya erişen biri sayıların yukarı doğru sayıldığı sonucuna varabilir ve bu nedenle 10 sayısı aslında bir numaraydı.

Bunu kullanarak demoda görebilirsiniz reversed niteliği, bizim herhangi bir ekstra çaba göstermemize gerek kalmadan işaretçilerimiz zaten doğru değere sahip! Ancak, kullanarak özel liste işaretleyicileri oluşturuyorsak ::before pseudo-element, sayaçlarımızı ayarlamamız gerekiyor. Sadece liste öğesi sayacımıza negatif olarak artması talimatını vermemiz gerekiyor:

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 sayacaktır. ekleyerek düzeltebiliriz. start listeye öznitelik.

Bölünmüş listeler #

bu start niteliği, listenin başlaması gereken sayısal değeri belirtmemizi sağlar. Bunun yararlı olabilmesinin bir yolu, bir listeyi gruplara ayırmak istediğiniz durumlardır.

En iyi 10 albüm örneğimizi geliştirelim. Belki de aslında en iyi 20 albümü geri saymak istiyoruz ama 10’ar kişilik gruplar halinde. İki grup arasında başka sayfa içerikleri de var.

HTML’mizde iki ayrı liste oluşturmamız gerekecek, ancak sayaçların doğru olduğundan nasıl emin olabiliriz? İşaretlememiz şu anda geçerli olduğundan, her iki liste de 10’dan 1’e geri sayacak, ki bu bizim istediğimiz şey değil. Ancak, HTML’mizde bir belirtebiliriz start öznitelik değeri. bir eklersek start 20 değerini ilk listemize eklediğinizde, işaretçiler bir kez daha otomatik olarak güncellenecektir!

ol reversed start="20">  
li>...&LT/li>  
li>...&LT/li>  
li>...&LT/li>  
&LT/ol>  

Çok sütunlu liste düzeni #

Önceki demolardan da görebileceğiniz gibi, çok sütunlu düzen bazen listelerimize iyi bir şekilde yer verebilir. Bir sütun genişliği ayarlayarak, listemizin otomatik olarak yanıt vermesini ve yalnızca yeterli alan olduğunda kendisini iki veya daha fazla sütunun üzerine yerleştirmesini sağlayabiliriz. Ayrıca sütunlar arasında bir boşluk ayarlayabilir ve daha fazla gösteriş için stil sahibi bir sütun ekleyebiliriz. sütun kuralı (şuna benzer bir kısaltma kullanarak border mülk):

ol {  
columns: 25rem;  
column-gap: 7rem;  
column-rule: 4px dotted turquoise;  
}  

Sütunları kullanırken bazen liste öğelerimizde göze hoş görünmeyen aralar verebiliriz – her zaman istediğimiz etki bu olmayabilir.

kullanarak bu zorunlu kırılmaları önleyebiliriz. break-inside: avoid listemizdeki öğeler:

li {  
break-inside: avoid;  
}  

Özel özellikler #

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 kullanabiliriz. Ne yazık ki şu anda yalnızca CSS’de öğenin dizinini (herhangi bir oranda kullanılabilir bir şekilde) belirlemenin bir yolu yoktur. Sayaçlar yalnızca değerlerini kullanmamıza izin verir. content özellik ve hesaplamalara izin verme.

Ama biz olabilmek içindeki öğenin dizinini ayarlayın style Bu özellik, özellikle bir şablonlama dili kullanıyorsak, hesaplamaları daha uygun hale getirebilir. Bu örnek, bunu kullanarak nasıl ayarlayacağımızı gösterir. Rahibeler:

ol style="--length: items|length">  
{% for item in items %}  
li style="--i: {{ loop.index }}">.../li>  
{% endfor %}
/ol>  

Bölme.js client tarafında da benzer bir işlevi yerine getiren bir kütüphanedir.

Özel özellik değerini kullanarak, bir listedeki ilerlemeyi çeşitli şekillerde gösterebiliriz. Bunun bir yolu, bir adım listesi için 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 için doğrusal gradyanlı 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 tonu da ayarlayabiliriz. hsl() renk fonksiyonu. hesaplayabiliriz hue özel özelliğimizi kullanarak değer.

Açıklama listesi stili #

Daha önce de belirtildiği gibi, terimleri ve tanımlarını bir div içinde dl, bize daha fazla stil seçeneği sunmak için. Örneğin, listemizi bir ızgara olarak görüntülemek isteyebiliriz. Ayar display: grid paketsiz listede div her grubun etrafında, terimlerimizin ve açıklamalarımızın farklı ızgara hücrelerine yerleştirildiği anlamına gelir. Bazen bu, aşağıdaki örnekte olduğu gibi, açıklamalarıyla birlikte bir turta menüsünün gösterilmesi yararlıdır.

Listenin kendisinde bir ızgara tanımlayabilir ve terimlerin ve açıklamaların her zaman en uzun terim tarafından belirlenen sütun genişliği ile sütunlarda hizalanmasını sağlayabiliriz.

Öte yandan, terimleri açıklamalarıyla belirgin bir şekilde kart stilinde gruplandırmak istiyorsak, bir sarmalayıcı &LTdiv> çok yardımcı olur.

Kaynaklar #