CSS ::marker ile özel madde işaretleri

Bloomberg sponsorluğundaki Igalia sayesinde, nihayet tüyolarımızı stil listeleri için kaldırabiliriz. Görmek!

Sayesinde CSS ::marker madde işaretleri ve sayıların içeriğini ve bazı stillerini değiştirebiliriz.

Tarayıcı Uyumluluğu #

::marker masaüstü ve Android için Firefox’ta, masaüstü Safari’de ve iOS Safari’de desteklenir (ancak yalnızca color Ve font-* özellikler, bkz. Hata 204163) ve Chromium tabanlı masaüstü ve Android tarayıcılar.

Sözde öğeler #

Aşağıdaki temel HTML sırasız listesini göz önünde bulundurun:

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

Bu da aşağıdaki şaşırtıcı olmayan işlemeyle sonuçlanır:

Her birinin başındaki nokta &LTli> öğe ücretsiz! Tarayıcı, sizin için oluşturulmuş bir işaret kutusu çiziyor ve oluşturuyor.

Bugün hakkında konuşmaktan heyecan duyuyoruz ::marker tarayıcıların sizin için oluşturduğu madde işareti öğesini biçimlendirme yeteneği veren sözde öğe.

İşaretçi oluşturma #

bu ::marker sözde öğe işaret kutusu, her liste öğesi öğesinin içinde, gerçek içerikten ve öğeden önce otomatik olarak oluşturulur. ::before sözde eleman

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

Tipik olarak, liste öğeleri &LTli> HTML öğeleri, ancak diğer öğeler de liste öğeleri haline gelebilir. display: list-item.

dl>
dt>Lorem&LT/dt>
dd>Lorem ipsum dolor sit amet consectetur adipisicing elit&LT/dd>
dd>Dolores quaerat illo totam porro&LT/dd>
dt>Ipsum&LT/dt>
dd>Quidem aliquid perferendis voluptates&LT/dd>
&LT/dl>

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

İşaretleyici şekillendirme #

Değin ::markerlisteler kullanılarak biçimlendirilebilir list-style-type Ve list-style-image liste öğesi sembolünü 1 satır CSS ile değiştirmek için:

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

Bu kullanışlı ama daha fazlasına ihtiyacımız var. Rengi, boyutu, aralığı vb. değiştirmeye ne dersiniz? Bu nerede ::marker kurtarmaya gelir. Bu sözde öğelerin CSS’den bireysel ve küresel olarak hedeflenmesine izin verir:

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

bu list-style-type özelliği çok sınırlı şekillendirme olanakları sunar. bu ::marker sözde öğe, işaretçinin kendisini hedefleyebileceğiniz ve stilleri ona doğrudan uygulayabileceğiniz anlamına gelir. Bu çok daha fazla kontrol sağlar.

Bununla birlikte, her CSS özelliğini bir ::marker. Hangi özelliklere izin verildiği ve izin verilmediği listesi teknik özelliklerde açıkça belirtilmiştir. Bu sözde öğeyle ilginç bir şey denerseniz ve işe yaramazsa, aşağıdaki liste CSS ile nelerin yapılıp yapılamayacağına ilişkin rehberinizdir:

İzin verilen CSS ::marker Özellikler #

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

Bir içeriğin değiştirilmesi ::marker ile yapılır content aksine list-style-type. Bu sonraki örnekte, ilk öğenin stili şu şekildedir: list-style-type ve ikincisi ile ::marker. İlk durumdaki özellikler, yalnızca işaretçiye değil tüm liste öğesine uygulanır; bu, metnin işaretçi kadar hareketli olduğu anlamına gelir. Kullanırken ::marker metni değil, yalnızca işaretçi kutusunu hedefleyebiliriz.

Ayrıca, izin verilmeyenlerin nasıl olduğuna dikkat edin background özelliğin bir etkisi yoktur.

li:nth-child(1) {
list-style-type: '?';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
content: '!';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

Bir işaretçinin içeriğini değiştirme #

İşaretçilerinize stil vermenin yollarından bazıları şunlardır.

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: "😍";
}

Bir 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,&LTsvg xmlns=" version='1.1' height="24" width="24">&LTpath 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"/>&LT/svg>");
}

Numaralı listeleri değiştirme peki ya bir &LTol> Yine de? Sıralı bir liste öğesindeki işaretçi, varsayılan olarak bir madde işareti değil, bir sayıdır. CSS’de bunlara denir Sayaçlarve oldukça güçlüler. Sayının başladığı ve bittiği yeri ayarlamak ve sıfırlamak veya bunları roma rakamlarına dönüştürmek için bile özellikleri vardır. Bunu şekillendirebilir miyiz? Evet, kendi numaralandırma sunumumuzu oluşturmak için işaretleyici içerik değerini bile kullanabiliriz.

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

hata ayıklama #

Chrome DevTools, uygulanan stilleri incelemenize, hata ayıklamanıza ve değiştirmenize yardımcı olmaya hazırdır. ::marker sözde elemanlar

Gelecekteki Sözde öğe stili #

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

Stil vermesi zor olan bir şeye erişim elde etmek harika. Otomatik olarak oluşturulan diğer öğelere stil verebilmeyi dilersiniz. hayal kırıklığına uğramış olabilirsin &LTdetails> veya arama girişi otomatik tamamlama göstergesi, tarayıcılar arasında aynı şekilde uygulanmayan şeyler. İhtiyacınız olanı paylaşmanın bir yolu, bir istek yaratmaktır. https://webwewant.fyi.