Listeler

CSS Podcast - 030: Listeler

Bir sonraki market alışverişi yolculuğunuzda satın almayı planladığınız birkaç ürün olduğunu hayal edin. Bunu görsel olarak temsil etmenin yaygın yollarından biri listedir. Peki alışveriş listenize nasıl stil ekleyebilirsiniz?

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

Liste Oluşturma

Önceki liste, semantik öğe veya <ul> ile, alışveriş listesi öğeleri (<li> öğeleri) alt öğe olarak başladı. Her <li> öğesini incelediğinizde hepsinde display: list-item bulunduğunu görebilirsiniz. Bu nedenle tarayıcı varsayılan olarak ::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 ::marker olarak bir sayı 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ü <li> liste öğesi öğesini kullanmaz.

<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

  • 1
  • 12
  • 1
  • 1

Kaynak

Artık liste oluşturmayı öğrendiğinize göre liste stillerini belirleyebilirsiniz. Keşfedilecek ilk CSS özellikleri, listenin tamamına uygulanan özelliklerdir.

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

list-style-position

list-style-position madde noktanızı liste öğesinin içeriğine inside veya outside 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çerikleri arasında taşıdığı anlamına gelir.

Hem dışı hem de içinde ::işaretçisinin bulunduğu ve dış (varsayılan değer) değerinin liste öğesinde olmadığını ve liste öğesi içeriği kutusunun içinde olduğunu gösteren bir liste.

list-style-image

list-style-image, listenizdeki madde işaretlerini resimlerle değiştirmenize olanak tanır. Bu işlem, madde işaretlerini resim, svg veya gif dosyası yapmak için url veya none gibi bir resim ayarlamanıza olanak tanır. Ayrıca 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:

list-style-type

Son seçenek, list-style-type stilini belirlemektir. Bu sayede madde işaretleri bilinen stil anahtar kelimeleri, özel dizeler, emojiler ve diğer öğelerle değiştirilir. Olası tüm liste stili türlerini burada görebilirsiniz.

list-style stenosu

Artık bu özelliklerin tümüne sahip olduğunuza göre, tüm liste stillerimizi tek bir 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 bildirmenize olanak tanır. Hem list-style-type hem de list-style-image ayarlanırsa 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. Yaygın olarak kullanılan bir uygulama, varsayılan stilleri gizlemek için list-style: none işlevidir. Varsayılan stiller tarayıcıdan gelir ve genellikle dolgu ve kenar boşlukları gibi liste stillerini kaldıran stil sayfalarının sıfırlandığını görürsünüz. Bu kısaltmayı, list-style: square inside; gibi stilleri ayarlamak için de kullanabilirsiniz

Şimdiye kadar örnekler listenin tamamının ve liste öğelerinin stilini biçimlendirmeye odaklandı. Peki ya daha ayrıntılı bir yaklaşım?

::marker sözde öğe

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

Madde işaretlerinin her birinin ::işaretçi sahte öğe olduğunu gösteren, üç öğeli bir liste.

Listeyi Geliştirici Araçları'nda incelerseniz HTML'de herhangi bir öğe belirtmeseniz bile liste öğelerinin her biri için bir ::marker öğesi görebilirsiniz. ::marker öğesini daha ayrıntılı incelerseniz tarayıcının 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 romen rakamı bulunmasa bile her öğeye bir işaretçi verilir. Bu, sözde öğedir çünkü tarayıcı bunu sizin için oluşturur ve hedeflemek için sınırlı bir stil API'si sağlar. CSS madde işaretinin anatomisi hakkında daha fazla bilgi edinin. ::marker, Safari'de sınırlı desteğe sahiptir.

İşaretçi kutusu

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

İşaretçi kutusu stilini belirlemek için ::marker seçiciyi kullanabilirsiniz. Bu, listenin tamamını temel alarak stil eklemek yerine yalnızca işaretçiyi seçmenize olanak tanır.

İşaretçi stilleri

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

İzin verilen epey CSS ::marker özelliği vardır:

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

Gösterim türü

list-style ve ::marker mülklerimizin tümü, varsayılan görüntüleme değeri list-item olduğu için <li> öğelerinin stilini belirlemesini bilir. <li> olmayan öğeleri de liste öğesine dönüştürebilirsiniz.

Bunu, display: list-item mülkünü ekleyerek yapabilirsiniz. display: list-item kullanımına örnek olarak, başlıkta askıda madde işareti olmasını istediğinizde bunu ::marker ile başka bir öğeyle değiştirebilirsiniz. Aşağıdaki örnekte, biçimlendirme amacıyla display: list-item kullanılan bir başlık ve doğru liste işaretlemesini kullanan bir liste gösterilmektedir.

display ile herhangi bir ş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şaretlemesini kullanmak yerine bunu 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 biçimini değiştirmez. Bu nedenle, öğe ekran okuyucularda liste öğesi olarak okunmaz veya cihazlar arasında geçiş yapılmaz. Mümkün olduğunda her zaman anlamsal işaretleme kullanmalı ve <li> ile listeler oluşturmalısınız.

Öğrendiklerinizi sınayın

Listeler hakkındaki bilginizi test edin

Bir liste öğesinden önce gelen öğeye

::madde işareti
Tekrar deneyin.
::kalem
Tekrar deneyin.
::işaretçi
Doğru.
::counter
Tekrar deneyin.

HTML listelerinin üç tü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