CSS Podcast - 030: Listeler
Bir sonraki market alışverişinizde satın almayı planladığınız bir grup ürün olduğunu varsayalım. Bunu görsel olarak göstermenin yaygın bir yolu liste kullanmaktır. Ancak 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, anlamsal bir öğeyle veya <ul>
ile başladı. Bu öğenin alt öğeleri, alışveriş listesi öğeleri (<li>
öğeleri) idi. Her bir <li>
öğesini incelerseniz hepsinin display: list-item
değerine sahip olduğunu görebilirsiniz. Bu nedenle tarayıcı varsayılan olarak bir ::marker
öğesi oluşturur.
li {
display: list-item;
}
İki tür liste daha vardır.
<ol>
ile sıralı listeler oluşturulabilir. Bu durumda liste öğesi, ::marker
olarak bir sayı gösterir.
<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 kullanmıyor.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
Liste stilleri
Liste oluşturmayı öğrendiniz. Artık listelere stil uygulayabilirsiniz. İlk keşfedilen CSS özellikleri, listenin tamamına uygulanan özelliklerdir.
Örneğinize stil uygulamak için kullanabileceğiniz üç liste stili özelliği 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
, liste öğesi içeriğine madde işareti eklenmediği anlamına gelir. inside
ise liste öğesinin içeriği arasında ilk öğeyi taşır.
list-style-image
list-style-image
, listenizin madde işaretlerini resimlerle değiştirmenize olanak tanır. Bu sayede, url
veya none
gibi bir resim ayarlayarak madde işaretlerinizi resim, SVG veya hatta GIF olarak gösterebilirsiniz. Ayrıca herhangi bir medya türünü veya hatta bir veri URI'sini de kullanabilirsiniz.
list-style-image
olarak her bir market ürünümüze nasıl resim ekleyebileceğimize göz atalım:
list-style-type
Son seçenek, madde işaretlerini bilinen stil anahtar kelimeleri, özel dizeler, emoji ve daha fazlasına dönüştüren list-style-type
öğesine stil uygulamaktır. Olası tüm liste stili türlerini burada görebilirsiniz.
list-style
kısaltma
Tüm bu bağımsız özelliklere sahip olduğunuza göre, liste stillerimizin tümünü tek bir satırda ayarlamak için list-style
kısaltmasını kullanabilirsiniz:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
, list-style
özelliklerinden birini, ikisini veya üçünü herhangi bir sırada belirtmenize olanak tanır. Hem list-style-type
hem de list-style-image
ayarlanırsa resim kullanılamazsa 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 list-style: none
yaygın olarak kullanılır. Varsayılan stiller tarayıcıdan gelir ve genellikle sıfırlanan stil sayfalarının dolgu ve kenar boşlukları gibi liste stillerini kaldırdığını görürsünüz. Stil ayarlamak için bu kısaltmayı da kullanabilirsiniz (ör. list-style: square inside;
Şimdiye kadarki örneklerde, bir listenin tamamına ve liste öğelerine stil uygulamaya odaklanıldı. Peki daha ayrıntılı bir yaklaşıma ne dersiniz?
::marker
sözde öğe
list-item
işaretçi öğesi, listenizdeki her bir öğeyi belirtmeye yardımcı olan madde işareti, kısa çizgi veya Roma rakamıdır.
DevTools'ta listeyi incelerseniz HTML'de hiçbir öğe tanımlanmamış olmasına rağmen liste öğelerinin her biri için bir ::marker
öğesi görebilirsiniz. ::marker
öğesini daha ayrıntılı bir şekilde 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 Roma rakamı olmamasına rağmen her öğeye bir işaretçi verilir. Tarayıcı bunu sizin için oluşturduğundan ve hedeflemek üzere sınırlı bir stil API'si sağladığından bu bir sözde öğedir. CSS mermisinin anatomisi hakkında daha fazla bilgi edinin. ::marker
, Safari'de sınırlı destek alır.
İşaretçi kutusu
CSS düzen modelinde liste öğesi işaretçileri, her liste öğesiyle ilişkili bir işaretçi kutusuyla temsil edilir. İşaretçi kutusu, genellikle madde işaretini veya numarayı içeren kapsayıcıdır.
İşaretçi kutusunu biçimlendirmek için ::marker
seçiciyi kullanabilirsiniz. Bu sayede, listenin tamamına göre stil uygulamak yerine yalnızca işaretçiyi seçebilirsiniz.
İşaretçi stilleri
İşaretçiyi seçtiniz. Şimdi bu seçicide kullanılabilen stil özelliklerine bakalım. CSS ::marker ile özel madde işaretleri hakkında daha fazla bilgiyi web.dev'de bulabilirsiniz.
İzin verilen birçok CSS ::marker
özelliği vardır:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
Gösterim türü
list-style
ve ::marker
özelliklerimizin tümü, varsayılan görüntüleme değeri list-item olduğu için <li>
öğelerine stil uygulamayı bilir. <li>
olmayan öğeleri de liste öğesi haline getirebilirsiniz.
Bunu yapmak için display: list-item
özelliğini ekleyin. display: list-item
karakterini kullanmaya örnek olarak, bir başlıkta sarkan bir madde işareti kullanmak isteyebilirsiniz. Bu durumda ::marker
ile bunu başka bir şeyle değiştirebilirsiniz. Aşağıdaki örnekte, stillendirme amacıyla display: list-item
kullanılan bir başlık ve doğru liste işaretlemesini kullanan bir liste gösterilmektedir.
display
ile her şeyi liste öğesi görünümüne dönüştürebilirsiniz ancak stil uyguladığınız içerik gerçekten bir listeyse doğru liste işaretlemesi 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 şeklini değiştirmez. Bu nedenle, ekran okuyucularda liste öğesi olarak okunmaz veya cihazlar arasında geçiş yapmaz. Her zaman semantik işaretleme kullanmalı ve mümkün olduğunda <li>
ile listeler oluşturmalısınız.
Öğrendiklerinizi test etme
Listelerle ilgili bilginizi test edin
Liste öğesinden önce gelen öğeye
::pencil
::counter
::bullet
::marker
Üç tür HTML listesi vardır:
<ul>
<list>
<ol>
<lo>
<dl>
<li>
Bu listedeki hangi iki stil, ::marker
öğesine stil uygular?
background-color
transition
display
color