İşaretleyicileri ve Dize Stillerini Listeleme

0
20

Listeler – hepimiz onlarla bir şekilde çalıştık. HTML’lerden bahsediyorum

    ve

      . Çoğu zaman, stil kontrolü istediğimiz için listenin işaretlerini liste stili: yok ile tamamen kapatır ve oradan şekillendirmeye başlarız. Diğer zamanlarda, disk, daire veya kare gibi çok sınırlı sayıda sıralanmamış liste işaretçisi arasından seçim yaparız; veya (çok) daha geniş bir sıralı liste işaretçisi yelpazesi. Hatta zaman zaman kullanılacak bir görüntünün URL’sini bile sağlayabiliriz.

      Peki ya işaretçileri liste öğelerinin içeriğinden farklı bir şekilde biçimlendirmek istersek? Bu her zaman en iyi ihtimalle zor olmuştur. Şimdi, :: marker sözde elemanı sayesinde, çok daha kolay. İşaretleyicilere uygulanacak tüm CSS yelpazesine sahip değilsiniz, ancak yine de yapılabilecek çok şey var.

      :: marker Firefox’ta mevcuttur ve Igalia, Chrome’un çalışmaları sayesinde.

      Bu listeyi düşünün:

      CodePen Embed Yedeklemesi

      Varsayılan olarak bu, 1’den 5’e kadar numaralandırılmış, Arap rakamları (1, 2, 3, vb.) Kullanılarak, her biri bir nokta (nokta) ile numaralandırılmış, tümü yazı tipi yüzündeki metin içerikleriyle eşleşecek sıralı bir liste verir. boyut, stil, renk vb.

      Sayıların küçültülmesini veya farklı bir renge dönüştürülmesini gerektiren bir tasarım yönünüz varsa, bu efekti işaretçileri bastırarak ve sözde öğe ve CSS sayaçlarından ve negatif metin girintilemeden önce :: kullanarak ve… peki, bir bilim adamının hepsini açıklaması gerekirdi.

      :: marker girin. Bu stilleri yukarıdaki listeye ekleyin ve ardından gösterilen sonucu alacaksınız.

      CodePen Embed Yedeklemesi

      Tek ihtiyacın olan bu!

      Tüm CSS’nizi yeniden yazmaya başlamadan önce dikkatli olun: :: marker aracılığıyla uygulayabileceğiniz özellikler şu anda oldukça sınırlıdır. Şubat 2021 itibariyle, işaretçilerin tanıması gereken özellikler şunlardır:

      Tüm font özellikleri (font-face, font-size, vb.) White-space özelliği color özelliği Uluslararasılaştırma özellikleri text-com-upright, unicode-bidi ve direction İçerik özelliği Tüm animasyon ve geçiş özellikleri

      Bazı tarayıcılarda bazı eklemeler vardır, ancak neredeyse tüm eklemeler kutu modeliyle değil, metin stiliyle ilgilidir. Dolayısıyla, tüm liste numaralarınızı gölgeli arka planlı dairelere koyabileceğinizi düşünüyorsanız, :: marker sizi oraya götürmez — oluşturulan içerikten önce :: hackfest’e geri dönmeniz gerekir. Şimdilik, her neyse: belirtim açıkça gelecekte :: marker için daha fazla özelliğe izin verilebileceğini söylüyor.

      Ayrıca, çeşitli tarayıcılarda hata oluşturmaya neden olan beyaz alanla ilgili bir sınırlama vardır. Örneğin, Chrome, işaretçilerdeki tüm beyaz boşlukları beyaz boşluk olarak değerlendirir: belirtimin söylediği gibi ön, ancak değiştirmenize izin vermez. Bu, Chrome’un LayoutNG (Yeni Nesil) gönderildiğinde düzeltilmelidir, ancak o zamana kadar düzeltilmemelidir. Öte yandan Firefox, beyaz boşluk değerlerini yok sayar ve beyaz boşlukları varsayılan olarak normal akışlı metin gibi ele alır.

      Bu sınırlar göz önünde bulundurularak, içerik özelliğiyle işaretçilerinizi yine de canlandırabilirsiniz. Sayıları takip eden nokta yerine, her sayıyı bir sayaçlar ve dizeler kombinasyonuyla parantez içine koyabilirsiniz.

      CodePen Embed Yedeklemesi

      İçerik değerinde kapanış parantezinden sonraki boşluğa dikkat edin. Bu, işaretleyici ve liste içeriği arasında biraz boşluk sağlamak için dahil edilmiştir. Normalde bir işaretleme veya dolgu kullanmayı düşünebilirsiniz, ancak daha önce gördüğümüz gibi, bu özellikler :: marker ile uygulanamaz. Hangi sinir bozucu! Ayrıca CSS sayaç listesi öğesini not edin. Bu, CSS’nin başka hiçbir yerinde tanımlanmamıştır – bu, tüm tarayıcıların (CSS sayaçlarını anlayan) sıralı listelerdekiler gibi liste öğelerini saymak için kullandığı yerleşik bir sayaçtır. Bunu CSS’nizde de kullanabilirsiniz!

      Tek yapmak istediğiniz bir liste işaretçisinin metin içeriğini değiştirmekse ve stillerinden herhangi birini değiştirmeyi umursamıyorsanız, bunu :: marker ile veya string için yeni çapraz tarayıcı desteği ile yapabilirsiniz. liste stili tür özelliğindeki değerler.

      li.warning {list-style-type: “⚠”; }

      CodePen Embed Yedeklemesi

      İşte liste işaretçileri dünyasında yeni olan budur. Sık sık yapmanız gereken bir şey olmayabilir, ancak yaparsanız, bu alandaki yeteneklerin arttığını ve gelecekte daha da iyi olacağını bilmek güzel. Bazı akıllı işaretçiler bulursanız bize bildirin!

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz