SORU
8 Temmuz 2010, PERŞEMBE


CSS liste-her madde için madde işareti olarak Unicode karakter

Kullanmak için, örneğin, Yıldız İşareti (a~) mermi olarak ihtiyacım var.

Mermi olarak tanımlayan, özel metin kullanmak için nasıl CSS3 module: Lists okudum, ama benim için çalışmıyor. Bu tarayıcılar basit mi desteklemiyor sanırım ::marker pseudo-element

Nasıl, görüntü kullanmadan yapmak ?

CEVAP
24 Kasım 2012, CUMARTESİ


Mermi Gibi Metin Kullanarak

Kaçtı Hex HTML bir Varlık ile li:before (veya herhangi bir düz metin) kullanın.


Örnek

Benim örnek kurşun gibi onay işareti ile listeler çıkarır.

CSS:

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

Tarayıcı Uyumluluk

Kendim test etmedim, ama IE8 olarak desteklenmesi gerekir. En azından o quirksmode & css-tricks ne diyor.

Resimler, veya komut dosyaları gibi eski/yavaş çözümleri uygulamak için Koşullu yorumlar kullanabilirsiniz. Daha da iyisi, bu görüntüler için <noscript> Her iki kullanın.

HTML:

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

Arka plan resimleri

Arka plan görüntüleri gerçekten işlemek için kolay, ama...

  1. background-size tarayıcı desteği aslında itibarıyla 9.
  2. Ve ( . HTML metin rengi özel ^em>deli) yazı tipleri çok daha az HTTP istekleri ile yapabilirsiniz.
  3. Script bir çözüm sadece HTML Varlık enjekte ve aynı CSS çalışma yapalım.
  4. İyi bir CSS sıfırlama kodu list-style (daha mantıklı bir seçim) daha kolay olabilir.

Keyfini çıkarın.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Glyn Dewis

    Glyn Dewis

    25 AĞUSTOS 2007
  • SPBedition

    SPBedition

    24 HAZİRAN 2013
  • WK

    WK

    9 Ocak 2006