Liste İşaretleyicisinden Sonraki Boşluk Hakkında Bilmeniz Gereken Her Şey

Ben okuyordum "Yaratıcı Liste Stili" Google'ın web.dev blogunda ve kod örneklerinden birinde tuhaf bir şey fark ettim. ::marker makalenin bölümü. Yerleşik liste işaretçileri madde işaretleri, sıra sayıları ve harflerdir. bu ::marker sözde öğe, bu işaretleyicileri biçimlendirmemize veya bunları özel bir karakter veya görüntüyle değiştirmemize olanak tanır.

::marker { content: url('/marker.svg') ' ';
}

Dikkatimi çeken örnek, liste öğeleri için özel işaretleyici olarak bir SVG simgesi kullanıyor. Ancak tek bir boşluk karakteri de var (" ") yanındaki CSS değerinde url() işlev. Bu boşluğun amacı, özel işaretleyiciden sonra bir boşluk eklemek gibi görünüyor.

Bu kodu gördüğümde, boşluğu oluşturmanın daha iyi bir yolu olup olmadığını hemen merak ettim. Bir boşluk ekleyerek content optimum çözümden çok bir geçici çözüm gibi geliyor. CSS sağlar margin ve padding ve sayfadaki öğeler arasında boşluk bırakmanın diğer standart yolları. Bu özelliklerden hiçbiri bu durumda kullanılamaz mı?

İlk olarak, boşluk karakterini uygun bir kenar boşluğu ile değiştirmeye çalıştım:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

Bu işe yaramadı. Anlaşılan, ::marker sadece bir destekler çoğunlukla metinle ilgili küçük CSS özellikleri kümesi. Örneğin, değiştirebilirsiniz font-size ve color ve ayarlayarak özel bir işaretçi tanımlayın content yukarıda gösterildiği gibi bir dizeye veya URL'ye. Ama margin ve padding özellikler desteklenen, bu nedenle bunları ayarlamanın bir etkisi yoktur. Ne bir hayal kırıklığı.

Özel bir işaretleyiciden sonra boşluk eklemenin tek yolu boşluk karakteri olabilir mi? Öğrenmem gerekiyordu. Bu konuyu araştırırken, bu makalede paylaşmak istediğim birkaç ilginç keşif yaptım.

Dolgu ve kenar boşlukları ekleme

İlk olarak, ne olduğunu onaylayalım margin ve padding üzerinde yapmak <ul> ve <li> elementler. Bu amaçla bir test sayfası oluşturdum. İlgili kaydırıcıları sürükleyin ve liste işaretleyicinin her iki tarafındaki boşluk üzerindeki etkisini gözlemleyin. İpucu: Tüm kontrolleri ilk değerlerine sıfırlamak için Sıfırla düğmesini serbestçe kullanın.

Not: Tarayıcılar bir varsayılan uygular padding-inline-left of 40px için <ol> ve <ul> elementler. mantıklı padding-inline-left özellik fiziksel eşdeğerdir padding-left soldan sağa satır içi yönü olan yazı sistemlerinde özellik. Bu yazıda basitlik adına fiziksel özellikleri kullanacağım.

Gördüğünüz gibi, padding-left on <li> liste işaretçisinden sonraki boşluğu artırır. Diğer üç özellik, işaretçinin solundaki aralığı, başka bir deyişle liste öğesinin girintisini kontrol eder.

Liste öğesinin padding-left is 0px, işaretçiden sonra hala minimum bir boşluk var. ile bu boşluk azaltılamaz. margin or padding. Minimum boşluğun tam uzunluğu tarayıcıya bağlıdır.

Özetlemek gerekirse, liste öğesinin içeriği, işaretleyiciden tarayıcıya özgü minimum bir mesafede konumlandırılır ve bu boşluk, padding-left için <li>.

Ardından, işaretçiyi konumlandırdığımızda ne olacağını görelim. içeride liste öğesi.

İşaretçiyi liste öğesinin içinde taşıma

The list-style-position özellik iki anahtar kelime kabul eder: outside, varsayılan olan ve inside, işaretçiyi liste öğesinin içinde hareket ettirir. İkincisi, tam genişlikte liste öğelerine sahip tasarımlar oluşturmak için kullanışlıdır.

İşaretçi şimdi ise içeride liste öğesi, bu şu anlama mı geliyor? padding-left on <li> artık işaretçiden sonraki boşluğu artırmıyor mu? Hadi bulalım. Test sayfamda aç list-style-position: inside onay kutusu aracılığıyla. dört nasıl padding ve margin özellikler bu değişiklikten etkilenir mi?

Gördüğünüz gibi, padding-left on <li> şimdi aralığı artırıyor sol işaretçinin. Bu, işaretten sonraki boşluğu artırma yeteneğimizi kaybettiğimiz anlamına gelir. Bu durumda, ekleyebilmek yararlı olacaktır. margin-right için ::marker kendisi, ancak yukarıda belirlediğimiz gibi bu işe yaramıyor.

Ek olarak, bir Chromium'da hata işaretçiden sonraki boşluğa neden olan üçlü geçiş yaptıktan sonra inside konumlandırma. Varsayılan olarak, boşluğun uzunluğu metin boyutunun yaklaşık üçte biri kadardır. Yani varsayılan olarak font-size of 16px, boşluk yaklaşık 5.5px. geçiş yaptıktan sonra inside, boşluk sonuna kadar büyür 16px Chrome'da. Bu hata etkiler disc, circle, ve square işaretçiler ama sıralı olmayan işaretçiler.

Aşağıdaki görüntü, macOS'ta üç ana tarayıcıda dış ve iç konumdaki liste işaretçilerinin varsayılan oluşturmasını gösterir. Rahatınız için, boşluk boyutlarındaki farklılıkları karşılaştırmayı kolaylaştırmak için tüm liste öğelerini işaretçilerinde yatay olarak hizaladım.

Özetlemek gerekirse, geçiş list-style-position: inside iki problem ortaya çıkarır. Aradaki farkı artık artıramayız. padding-left on <li>ve boşluk boyutu tarayıcılar arasında tutarsız.

Son olarak, varsayılan liste işaretçisini özel işaretçiyle değiştirdiğimizde ne olacağını görelim.

Özel bir işaretçiye geçiş

tanımlamanın iki yolu vardır. özel işaretleyici:

• list-style-type ve list-style-image özellikleri
• content mülk ::marker sözde eleman

The content mülkiyet daha güçlüdür. Örneğin, kullanmamıza izin verir. counter() liste öğesinin sıra numarasına erişme işlevi ( dolaylı olarak list-item karşı) ve özel dizelerle süsleyin.

Ne yazık ki Safari şu özellikleri desteklemiyor: content mülkiyet ::marker henüz (WebKit hatası). Bu sebeple kullanacağım list-style-type Özel işaretçiyi tanımlama özelliği. hala kullanabilirsiniz ::marker aracılığıyla bildirilen özel işaretçiye stil vermek için seçici list-style-type. O yönü ::marker Safari'de desteklenir.

Herhangi bir Unicode karakteri potansiyel olarak özel bir liste işaretçisi işlevi görebilir, ancak yalnızca küçük bir karakter kümesinin resmi adında "Bullet" vardır, bu yüzden onları referans olması için burada derleyeceğimi düşündüm.

Karakter	Name	Kod noktası	CSS anahtar kelimesi
•	kurşun	U+2022	disc
‣	üçgen mermi	U+2023
⁃	Tire Madde İşareti	U+2043
⁌	Siyah Sola Mermi	U+204C
⁍	Siyah Sağa Mermi	U+204D
◘	Ters Mermi	U+25D8
◦	Beyaz Kurşun	U+25E6	circle
☙	Ters Döndürülmüş Çiçek Kalp Mermi	U+2619
❥	Döndürülmüş Ağır Siyah Kalp Mermi	U+2765
❧	Döndürülmüş Çiçekli Kalp Kurşunu	U+2767
⦾	Yuvarlak Beyaz Mermi	U+29BE
⦿	Yuvarlak Mermi	U+29BF

Not: CSS square anahtar kelime, Unicode'da karşılık gelen bir "Bullet" karakterine sahip değil. En yakın gelen karakter Siyah Küçük Kare (▪️) emojisidir (U+25AA).

Şimdi varsayılan liste işaretçisini şununla değiştirdiğimizde ne olacağını görelim. list-style-type: "•" (U+2022 kurşun). Bu, varsayılan madde işaretiyle aynı karakterdir, bu nedenle büyük işleme farklılıkları olmamalıdır. Test sayfamda, list-style-type seçeneğini belirleyin ve işaretçideki değişiklikleri gözlemleyin.

Gördüğünüz gibi, iki önemli değişiklik var:

1. İşaretçiden sonra artık minimum boşluk yoktur.
2. Mermi, sanki daha küçük bir şekilde işlenmiş gibi küçüldü. font-size.

Göre CSS Sayaç Stilleri Seviye 3, varsayılan liste işaretçisi (disc) şuna benzer olmalıdır: • U+2022 KURŞUN”. Görünüşe göre tarayıcılar, daha okunaklı hale getirmek için varsayılan madde işaretinin boyutunu artırıyor. Firefox bile özel bir yazı tipi kullanır, -moz-bullet-font, işaretçi için.

Küçük boyut sorunu CSS ile çözülebilir mi? Test sayfamda, işaretçi stilini açın ve değiştirdiğinizde ne olduğunu gözlemleyin. font-size, line-height, ve font-family işaretçinin.

Gördüğünüz gibi, artan font-size özel işaretçinin dikey olarak yanlış hizalanmasına neden olur ve bu, line-height. vertical-align Bu sorunu kolayca çözebilecek olan özellik şu platformda desteklenmiyor: ::marker.

Ama bunu değiştirdiğini fark ettin mi? font-family işaretçinin daha büyük olmasına neden olabilir mi? olarak ayarlamayı deneyin Tahoma. Büyük tarayıcılarda ve işletim sistemlerinde hangi yazı tipinin en iyi çalıştığını test etmemiş olsam da, bu küçük boyutlu sorun için potansiyel olarak yeterince iyi bir geçici çözüm olabilir.

İşaretçiyi liste öğesinin içine yerleştirdiğinizde Chromium hatasının artık oluşmadığını da fark etmiş olabilirsiniz. Bu, özel bir işaretçinin bu hata için bir geçici çözüm görevi görebileceği anlamına gelir. Bu da beni asıl soruna ve bu konuyu araştırmaya başlama sebebime götürüyor. Özel bir işaretleyici tanımlar ve onu liste öğesinin içine yerleştirirseniz, işaretçiden sonra boşluk olmaz ve standart yollarla boşluk eklemenin bir yolu yoktur.

1. Özel işaretçilerden sonra minimum boşluk yoktur.
2. ::marker desteklemiyor padding or margin.
3. padding-left on <li> işaretleyici konumlandırıldığından boşluğu artırmaz inside.

Özet

Makalede bahsettiğim tüm önemli gerçeklerin bir özeti:

1. Tarayıcılar bir varsayılan uygular padding-inline-start of 40px için <ul> ve <ol> elemanları.
2. Yerleşik liste işaretlerinden sonra minimum bir boşluk vardır (disc, decimal, vesaire.). Özel işaretçilerden (dize veya URL) sonra minimum boşluk yoktur.
3. Boşluğun uzunluğu eklenerek artırılabilir. padding-left için <ul>, ancak yalnızca işaretçi liste öğesinin (varsayılan mod) dışında konumlandırılmışsa.
4. Özel dize işaretçileri, yerleşik işaretçilerden daha küçük bir varsayılan boyuta sahiptir. değiştirme font-family on ::marker boyutlarını artırabilirler.

Sonuç

Makalenin başındaki kod örneğine dönüp baktığımda, sanırım şimdi neden boşluk karakteri olduğunu anlıyorum. content değer. SVG işaretçisinden sonra boşluk eklemenin daha iyi bir yolu yoktur. Bu, ihtiyaç duyulan bir geçici çözümdür çünkü hiçbir miktarda margin ve padding liste öğesinin içine yerleştirilmiş özel bir işaretçiden sonra bir boşluk oluşturabilir. A margin-right on ::marker kolayca yapabilirdi, ancak bu desteklenmiyor.

A kadar ::marker daha fazla özellik için destek ekler, web geliştiricilerinin genellikle işaretçiyi gizlemekten ve onu bir ::before sözde eleman Son zamanlarda bunu kendim yapmak zorunda kaldım çünkü işaretleyicileri değiştiremedim. background-color. Umarım, daha güçlü bir sürüm için çok uzun süre beklemek zorunda kalmayız. ::marker sözde eleman.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/