CSS ::marker ile özel madde işaretleri

<ul> veya <ol> kullanırken numaranın veya madde işaretinin rengini, boyutunu veya türünü özelleştirmek artık önemsizdir.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Bloomberg'in sponsorluğundaki Igalia sayesinde, nihayet stil listelerine yönelik ipuçlarımızı bir kenara koyabildik. Bakın.

Kaynağı Göster

CSS ::marker sayesinde, içeriği ve bazı madde işaretleri ile sayı stillerini değiştirebiliriz.

Tarayıcı uyumluluğu

::marker, masaüstü ve Android için Firefox'ta, masaüstü Safari ve iOS Safari'de (ancak yalnızca color ve font-* özellikleri için Hata 204163'e bakın) ve Chromium tabanlı masaüstü ve Android tarayıcılarda desteklenir.

Tarayıcı Desteği

  • 86
  • 86
  • 68
  • 11.1

Kaynak

Sözde öğeler

Aşağıdaki temel HTML sıralanmamış listesini inceleyin:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

Bu da aşağıdaki şaşırtıcı şekilde oluşturma işlemiyle sonuçlanır:

Her <li> öğenin başındaki nokta ücretsizdir. Tarayıcı sizin için bir işaretçi kutusu çiziyor ve oluşturuyor.

Bugün, tarayıcıların sizin için oluşturduğu madde işareti öğesine stil verme olanağı sağlayan ::marker sözde öğesinden bahsetmekten heyecan duyuyoruz.

İşaretçi oluşturma

::marker sözde öğe işaretçi kutusu, gerçek içeriklerden ve ::before sözde öğesinden önce gelecek şekilde her liste öğesi öğesinin içinde otomatik olarak oluşturulur.

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

Genellikle liste öğeleri <li> HTML öğeleridir, ancak diğer öğeler de display: list-item içeren liste öğeleri haline gelebilir.

<dl>
  <dt>Lorem</dt>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
  <dd>Dolores quaerat illo totam porro</dd>

  <dt>Ipsum</dt>
  <dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

İşaretçinin stil özelliklerini ayarlama

Liste öğesi simgesini 1 CSS satırıyla değiştirmek için listelerin stili ::marker tarihine kadar list-style-type ve list-style-image kullanılarak belirlenebilir:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

Bu özellik kullanışlı ancak daha fazlasına ihtiyacımız var. Rengi, boyutu, aralıkları vb. değiştirmeye ne dersiniz? ::marker işte bu noktada imdadına yetişir. Bu sözde öğelerin CSS'den ayrı ve genel olarak hedeflenmesine olanak tanır:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

list-style-type özelliği son derece sınırlı stil seçenekleri sunar. ::marker yapay öğesi, işaretçinin kendisini hedefleyebileceğiniz ve stilleri doğrudan ona uygulayabileceğiniz anlamına gelir. Bu da çok daha fazla kontrole olanak tanır.

Bununla birlikte, her CSS özelliğini ::marker üzerinde kullanamazsınız. İzin verilen ve verilmeyen özelliklerin listesi spesifikasyonda açıkça belirtilmiştir. Bu sözde öğeyle ilginç bir şey denerseniz ve işe yaramazsa, CSS ile neler yapılıp yapılamayacağına ilişkin rehberiniz aşağıdaki listedir:

İzin Verilen CSS ::marker Özellikleri

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

::marker öğesinin içeriği, list-style-type yerine content ile değiştirilir. Sıradaki örnekte, ilk öğenin stili list-style-type, ikinci öğenin stili ise ::marker ile oluşturulmuştur. İlk örnekteki özellikler yalnızca işaretçi değil, liste öğesinin tamamı için geçerlidir. Bu, metnin, işaretçinin yanı sıra animasyon da yapıldığı anlamına gelir. ::marker kullanıldığında metni değil yalnızca işaretçi kutusunu hedefleyebiliriz.

Ayrıca, izin verilmeyen background özelliğinin herhangi bir etkisi olmadığına dikkat edin.

Stilleri listele
li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
İşaretçi ve liste öğesi arasındaki karma sonuçlar
Keçeli Kalem Stilleri
li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
İşaretçi ve liste öğesi arasındaki odaklanmış sonuçlar


İşaretçinin içeriğini değiştirme

İşaretçilerinizin stilini belirlemek için kullanabileceğiniz yöntemlerden bazıları aşağıda belirtilmiştir.

Tüm liste öğelerini değiştirme

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

Yalnızca bir liste öğesini değiştirme

li:last-child::marker {
  content: "😍";
}

Liste öğesini SVG olarak değiştirme

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Numaralı listeleri değiştirme Peki ya <ol> olabilir? Sıralanmış liste öğesindeki işaretçi varsayılan olarak madde işareti değil, sayıdır. CSS'de bunlara Sayaç adı verilir ve oldukça güçlülerdir. Ayrıca, sayının başlangıç ve bitiş yerlerini ayarlayıp sıfırlama veya bunları romen rakamına geçirme özelliklerini de kullanabilirler. Bunu şekillendirebilir miyiz? Evet, hatta kendi numaralandırma sunumumuzu oluşturmak için işaretçi içeriği değerini de kullanabiliriz.

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

Hata ayıklama

Chrome Geliştirici Araçları, ::marker sözde öğelere uygulanan stilleri denetlemenize, hatalarını ayıklamanıza ve değiştirmenize yardımcı olabilir.

Geliştirici Araçları açılıyor ve kullanıcı aracısı ile kullanıcı stillerinin stilleri gösteriliyor

Gelecekteki Sözde öğe stili

::marker hakkında daha fazla bilgiyi şu kaynaklardan edinebilirsiniz:

Tarzı zor olan bir şeye erişebilmek harikadır. Otomatik olarak oluşturulan diğer öğelerin stilini belirlemek isteyebilirsiniz. Tarayıcılarda aynı şekilde uygulanmamış olan <details> veya arama girişi otomatik tamamlama göstergesi canınızı sıkabilir. İhtiyacınız olan şeyleri paylaşmanın bir yolu, https://webwewant.fyi adresinde bir istek oluşturmaktır.