Tamamen Özel Liste Stilleri | Modern CSS Çözümleri

Bu öğretici, aşağıdakilere ek olarak kolay özel liste stili için CSS ızgara düzeninin nasıl kullanılacağını gösterecektir:

• Sözde öğelerin içeriği olarak veri öznitelikleri
• Sıralı listeleri şekillendirmek için CSS sayaçları
• Liste başına öğe stili için CSS özel değişkenleri
• Duyarlı çok sütunlu listeler

Güncelleme: ::marker sözde seçici artık modern tarayıcılarda iyi bir şekilde desteklenmektedir. Bu öğretici, yukarıda listelenen öğeler için kullanışlı CSS ipuçları içeriyor olsa da, şunları yapmak isteyebilirsiniz: atlamak ::marker çözüm

İlk önce HTML’mizi bir tane ile ayarlayacağız ul ve bir li. Hizalamayı, aralığı ve satır yüksekliğini kontrol etmeye yardımcı olması için daha uzun bir madde işareti ekledim.

<ul role="list">
<li>Unordered list item</li>
<li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
<li>Unordered list item</li>
</ul>
<ol role="list">
<li>Ordered list item</li>
<li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookie</li>
<li>Ordered list item</li>
</ol>

kullanımına dikkat edin role="list". İlk başta ekstra görünebilir, ancak CSS ile doğal liste stilini kaldıracağız. CSS, öğelerin anlamsal değerini çoğu zaman etkilemezken, list-style: none bazı ekran okuyucular için liste semantiğini kaldırabilir. En kolay düzeltme, role bu anlambilimi eski haline getirmek için öznitelik. Daha fazlasını şuradan öğrenebilirsiniz: Bu makale Scott O’Hara’dan.

İlk olarak, bunları boşluklu bir ızgara olarak tanımlamanın yanı sıra liste stillerini sıfırlıyoruz.

ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}

bu gap fayda, arasına boşluk eklemektir ligibi daha eski bir yöntemin yerini alarak li + li { margin-top: ... }.

Ardından, liste öğelerini hazırlayacağız:

li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}

Ayrıca, ızgarayı kullanmak için liste öğelerini ayarladık. Ve kullanmanın daha eski bir “hack”ini yükselttik. padding-left bir kombinasyonu ile mutlak konumlandırılmış bir sözde öğe için boşluk bırakmak için 0 genişlik ilk sütun ve gap. Bunun nasıl çalıştığını birazdan göreceğiz. Sonra kullanırız align-items: start varsayılan yerine stretchve bir tür stil uygulayın.

Şimdi, bu tam olarak ölçeklenebilir bir çözüm olmayabilir, ancak eğlence için her liste öğesi için madde işareti olarak kullanılacak bir emoji tanımlayacak özel bir veri özniteliği ekleyeceğiz.

Öncelikle güncelleyelim ul HTML:

<ul role="list">
<li data-icon="🦄">Unordered list item</li>
<li data-icon="🌈">
Cake ice cream sweet sesame snaps dragée cupcake wafer cookie
</li>
<li data-icon="😎">Unordered list item</li>
</ul>

Emojileri madde işareti olarak uygulamak için, veri özniteliklerinin değer olarak kullanılabileceği oldukça sihirli bir teknik kullanıyoruz. content sözde öğeler için özellik:

ul li::before {
content: attr(data-icon);
font-size: 1.25em;
}

İşte sonuç, ::before ızgaranın nasıl çalıştığını göstermeye yardımcı olmak için incelenen eleman:

Emojinin hala görünür olması için genişliği almasına izin verilir, ancak etkin bir şekilde boşluğa oturur. İlkini ayarlayarak deneme yapabilirsiniz. li ızgara sütunu auto bu, emoji sütunu ile liste metni sütunu arasında tam olarak boşluk uygulanmasına neden olur.

CSS sayaçları uygulanabilir bir çözüm oldu IE8’den beriama biz kullanmanın ekstra bir güzelliğini ekleyeceğiz CSS özel değişkenleri her sayının arka plan rengini de değiştirmek için.

Sayacımızı adlandırarak önce CSS sayaç stillerini uygulayacağız orderedlist:

ol {
counter-reset: orderedlist;
}
ol li::before {
counter-increment: orderedlist;
content: counter(orderedlist);
}

Bu, varsayılandan çok farklı görünmeyen aşağıdakileri başarır ol stil:

Ardından, sayaç numaralarına bazı temel stiller uygulayabiliriz:

font-family: "Indie Flower";
font-size: 1.25em;
line-height: 0.75;
width: 1.5rem;
padding-top: 0.25rem;
text-align: center;
color: #fff;
background-color: purple;
border-radius: 0.25em;

İlk olarak, bir Google yazı tipi uyguluyoruz ve font-size. bu line-height uygulananın yarısı line-height arasında li (en azından bu yazı tipi için işe yaradı, biraz sihirli bir sayı olabilir). Ana ile ilgili olarak istediğimiz sayıyı hizalar. li Metin içeriği.

Ardından, açık bir genişlik belirtmemiz gerekiyor. Değilse, metin görünse bile arka plan görünmeyecektir.

Metnin arka plana göre hizalanmasını düzeltmek için dolgu eklenir.

Şimdi elimizde şu var:

Bu kesinlikle daha özel hissettiriyor, ancak onu değiştirerek biraz daha zorlayacağız. background-color şöyle bir CSS özel değişkenine:

ol {
--li-bg: purple;
}
ol li::before {
background-color: var(--li-bg);
}

İkinci ve üçüncü satır içi stiller ekleyene kadar aynı görünecektir. li değişken değerini güncellemek için:

<ol role="list">
<li>Ordered list item</li>
<li style="--li-bg: darkcyan">
Cake ice cream sweet sesame snaps dragée cupcake wafer cookie
</li>
<li style="--li-bg: navy">Ordered list item</li>
</ol>

Ve işte final ul ve ol hepsi bir araya getirildi:

Stephanie Eckles (@5t3ph)

Örneğimizde yalnızca 3 kısa liste öğesi vardı, ancak tabana ızgara uyguladığımızı unutmayın ol ve ul.

Oysa önceki hayatımda, listeleri bölmek ve eşit olarak bölünmüş çok sütunlu listeler elde etmek için ekstra sınıflar uygulamak için PHP’de modül ile eğlenceli şeyler yaptım.

CSS ızgarası ile artık onu doğal yanıt verme, eşit sütunlar ve içerik satırı uzunluğuna saygı ile üç satırda uygulayabilirsiniz:

ol,
ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));
gap: 1rem;
}

Mevcut örneğimize uygulayarak (kaldırdığınızdan emin olun max-width üzerinde li birinci) verim:

güncelleyerek bu görünüm arasında geçiş yapabilirsiniz. $multicolumn Codepen’deki değişken true.

İçinde düz metinden fazlası varsa li – masum gibi bir şey dahil <a> – ızgara şablonumuz bozulacak.

Ancak, bu çok kolay bir çözüm – sarın li içerik bir span. Izgara şablonumuz, öğelerin ne olduğuyla ilgilenmez, ancak sözde öğenin ilk sayıldığı yerde yalnızca iki öğe bekler.

Bu makalenin ilk yayınlandığı tarihten sonraki aylarda, ::marker tüm modern tarayıcılarda çok daha iyi hale geldi.

bu ::marker sözde seçici, doğrudan değiştirmeye ve şekillendirmeye izin verir ol veya ul madde işareti/sayısal listeleyin.

Çözümü tamamen değiştirebiliriz ul mermi kullanarak ::marker ama bizim seviyemizi düşürmemiz gerekiyor ol çözüm, çünkü izin verilen yalnızca birkaç özellik var ::marker:

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

Dan beri content hala izin verilen bir mülk, data-icon özel emoji işaretçilerine izin vermek için çözüm 🎉

Sadece takas etmemiz gerekiyor ::before ile ::marker:

ul li::marker {
content: attr(data-icon);
font-size: 1.25em;
}

Ardından, artık gerekli olmayan ızgara özelliklerini li ve bazılarını geri ekleyin padding Kaldırılanları değiştirmek için gap:

li {
padding-left: 0.5em;
}

Son olarak, daha önce kaldırmıştık margin ancak boşluk sağlamak için bazı sol kenar boşluklarını geri eklememiz gerekiyor. ::marker taşma nedeniyle kesilmesini önlemek için:

ol,
ul {
margin: 0 0 0 2em;
}

Ve görsel sonuçlar, aşağıda görebileceğiniz gibi, önceki çözümümüzle aynıdır. demo.

Sıralı listemiz için artık geçiş yapabilir ve yerleşik sayaçtan yararlanabiliriz.

bizim de düşürmemiz lazım background-color ve border-radius için özel mülkümüzü kullanmaya geçeceğiz. color değer. Ve özel mülk adımızı şu şekilde değiştireceğiz: --marker-color açıklık için.

Dolayısıyla azaltılmış stillerimiz aşağıdaki gibidir:

ol {
--marker-color: purple;
}
li::marker {
content: counter(list-item);
font-family: "Indie Flower";
font-size: 1.5em;
color: var(--marker-color);
}

HTML’deki CSS özel özellik adını da güncellemeyi unutmayın!

Bu yakalamaya dikkat et: Değiştirme display için mülk li niyet kaldırmak en ::marker sözde öğe. Bu nedenle, liste içerikleri için farklı bir görüntüleme türüne ihtiyacınız varsa, bunu ek bir sarma öğesini iç içe yerleştirerek uygulamanız gerekir.

İşte şimdi kullanılan güncellenmiş özel liste stillerimiz ::marker.

kontrol ettiğinizden emin olun mevcut tarayıcı desteği benzersiz hedef kitlenize göre hangi özel liste stili çözümünü kullanacağınıza karar vermek için! kullanmayı tercih edebilirsin ::marker daha önce gösterilen çözümlerden birinden ilerici bir geliştirme olarak.

Stephanie Eckles (@5t3ph)

kullanma hakkında daha fazla ayrıntı için ::markerödeme bu mükemmel makale Adam Argyle tarafından.