Listeler

CSS Podcast'i - 030: Listeler 'nı inceleyin.

Bir sonraki market alışverişinizde satın almayı planladığınız birçok ürün olduğunu düşünün. Bunu görsel olarak göstermenin yaygın yollarından biri listedir. Peki alışveriş listenize stil nasıl ekleyebilirsiniz?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Liste Oluşturma

Önceki liste, anlamsal öğeyle veya <ul> ile ve alt öğe olarak market alışverişi listesi öğeleri (<li> öğeleri) ile başlıyor. Her <li> öğesini incelerseniz hepsinin display: list-item içerdiğini görebilirsiniz. Bu nedenle tarayıcı, varsayılan olarak bir ::marker oluşturur.

li {
  display: list-item;
}

İki tür liste daha vardır.

Sıralı listeler <ol> ile oluşturulabilir. Bu durumda liste öğesinde bir sayı olarak ::marker gösterilir.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Açıklama listeleri <dl> ile oluşturulur ancak bu liste türünde <li> liste öğesi öğesi kullanılmaz.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Liste stilleri

Tarayıcı Desteği

  • Chrome: 1..
  • Kenar: 12..
  • Firefox: 1..
  • Safari: 1..

Kaynak

Nasıl liste oluşturacağınızı öğrendiğinize göre artık bunları biçimlendirebilirsiniz. Keşfedilecek ilk CSS özellikleri, listenin tamamına uygulanan özelliklerdir.

Örneğinizin stilini belirlemek için kullanabileceğiniz üç liste stili özellik vardır: list-style-position, list-style-image ve list-style-type.

list-style-position

list-style-position, madde işaretinizi inside veya outside liste öğesinin içeriğine taşımanıza olanak tanır. Varsayılan outside, madde işaretinin liste öğesi içeriğine dahil edilmediği, inside ise ilk öğeyi liste öğesinin içeriği arasında taşıdığı anlamına gelir.

Hem dışı hem de içi ::marker içeren bir listedir. Dış (varsayılan değer) değerinin liste öğesinde olmadığını ve liste öğesi içerik kutusunun içinde olduğunu gösterir.

list-style-image

list-style-image, listenizdeki madde işaretlerini resimlerle değiştirmenize olanak tanır. Bu, madde işaretlerinizi resim, svg veya GIF haline getirmek için url veya none gibi bir resim ayarlamanıza olanak tanır. Herhangi bir medya türünü ve hatta bir veri URI'sini de kullanabilirsiniz.

Market ürünlerimizin her birinin resmini list-style-image olarak nasıl ekleyebileceğimize bakalım:

ziyaret edin.

list-style-type

Son seçenek, madde işaretlerini bilinen stilde anahtar kelimeler, özel dizeler, emojiler ve daha fazlasıyla değiştiren list-style-type öğesinin stilini belirlemektir. Olası tüm liste stili türlerini burada görebilirsiniz.

list-style stenografi

Bu bağımsız özelliklerin tümüne sahip olduğunuza göre, tüm liste stillerimizi tek satırda ayarlamak için list-style kısayolunu kullanabilirsiniz:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style, list-style özelliklerinden bir, iki veya üçünün kombinasyonlarını herhangi bir sırada bildirmenizi sağlar. Hem list-style-type hem de list-style-image ayarlanmışsa resim kullanılamadığında yedek olarak list-style-type kullanılır.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Bu, bu bölümde ele alınan liste stillerinin en sık kullanılan özelliğidir. Varsayılan stilleri gizlemek için en yaygın uygulamalardan biri list-style: none. Varsayılan stiller tarayıcıdan gelir ve genellikle sıfırlanmış stil sayfalarının dolgu ve kenar boşlukları gibi liste stillerini kaldırdığını görürsünüz. Stilleri ayarlamak için bu kısaltmayı da kullanabilirsiniz (ör. list-style: square inside;).

Şu ana kadar örneklerde tüm liste ve liste öğelerinin stiline odaklanılmıştır. Peki ya daha ayrıntılı bir yaklaşıma ne dersiniz?

::marker sözde öğe

list-item işaretçi öğesi, listenizdeki her bir öğeyi belirtmenize yardımcı olan madde işareti, kısa çizgi veya roma rakamıdır.

Her madde işaretinin ::işaretçi sözde öğe olduğunu gösteren üç öğeli bir liste.

Listeyi Geliştirici Araçları'nda incelerseniz HTML'de beyan etmeseniz de liste öğelerinin her biri için bir ::marker öğesi görebilirsiniz. ::marker öğesini daha ayrıntılı şekilde incelerseniz bunun için tarayıcı varsayılan stilini görürsünüz.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Bir liste bildirdiğinizde, HTML'nizde madde işareti veya roma rakamı olmamasına rağmen her öğeye bir işaretçi verilir. Bu, sözde bir öğedir çünkü tarayıcı bunu sizin için oluşturur ve onu hedeflemek için sınırlı bir stil oluşturma API'si sağlar. CSS maddesinin anatomisi hakkında daha fazla bilgi edinin. ::marker, Safari'de sınırlı şekilde desteklenmektedir.

İşaretçi kutusu

CSS düzen modelinde liste öğesi işaretçileri, her liste öğesiyle ilişkilendirilmiş bir işaretçi kutusuyla temsil edilir. İşaretçi kutusu, genellikle madde işaretini veya numarayı içeren kapsayıcıdır.

İşaretçi kutusunun stilini belirlemek için ::marker seçiciyi kullanabilirsiniz. Bu, tüm listeye göre stil vermek yerine yalnızca işaretçiyi seçmenize olanak tanır.

ziyaret edin.

İşaretçi stilleri

Artık işaretçiyi seçtiğinize göre, bu seçicinin kullanabileceği stil özelliklerine bakalım. web.dev adresinde CSS ::marker ile özel madde işaretleri hakkında daha fazla bilgi edinebilirsiniz.

İzin verilen çok sayıda CSS ::marker Özelliği var:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space
ziyaret edin.

Gösterim türü

Tüm list-style ve ::marker özelliklerimiz, varsayılan görüntüleme değeri liste öğesi olan <li> öğelerinin stilini belirlemeyi bilir. <li> olmayan öğeleri de liste öğesine dönüştürebilirsiniz.

Bunu, display: list-item mülkünü ekleyerek yaparsınız. display: list-item kullanımına örnek olarak bir başlığa asılı bir madde işareti koymak ve bunu ::marker ile başka bir şeyle değiştirmek için kullanabilirsiniz. Aşağıdaki örnekte, stil amacıyla display: list-item kullanan ve doğru liste işaretlemesini kullanan bir listeyle başlık gösterilmektedir.

display ile her şeyi liste öğesi görünümüne dönüştürebilirsiniz, ancak stilini oluşturduğunuz içerik gerçekten bir listeyse doğru liste işaretlemesi yerine bu görünümü kullanmamalısınız. Bir öğenin görsel görünümünü liste öğesi olarak değiştirmek, erişilebilirlik hizmetlerinin öğeyi okuma ve tanıma şeklini değiştirmez. Bu nedenle, ekran okuyuculara liste öğesi olarak okunmaz veya cihazlar arasında geçiş yapılmaz. Anlamsal işaretlemeyi her zaman kullanmalı ve mümkün olduğunda <li> ile liste oluşturmalısınız.

Öğrendiklerinizi sınayın

Listeler hakkındaki bilginizi test edin

Bir liste öğesinin önünde yer alan öğeye

::bullet
Tekrar deneyin.
::pencil
Tekrar deneyin.
::marker
Doğru!
::counter
Tekrar deneyin.

Üç tür HTML listesi vardır:

<dl>
Doğru!
<lo>
Tekrar deneyin.
<ol>
Doğru!
<li>
Tekrar deneyin.
<ul>
Doğru!
<list>
Tekrar deneyin.

Bu listedeki hangi iki stil ::marker öğesine stil uygular?

transition
Doğru!
background-color
Tekrar deneyin.
color
Doğru!
display
Tekrar deneyin.

Kaynaklar