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
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.
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:
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.
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.
İş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
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
::pencil
::marker
::counter
Üç tür HTML listesi vardır:
<dl>
<lo>
<ol>
<li>
<ul>
<list>
Bu listedeki hangi iki stil ::marker
öğesine stil uygular?
transition
background-color
color
display