Simge Düğmesi CSS Stil Kılavuzu

Bu kılavuz önceki bölümün üzerine inşa edilecek “CSS Düğme Şekillendirme Kılavuzu” simge düğmelerinin kullanım durumunu keşfetmek için. Simge + metni ve yalnızca simge düğmelerini ele alacağız.

Not: SVG’nin artık mükemmel bir desteğe sahip olması nedeniyle, tercih edilen uygulama, onu simge sistemlerine karşı simge yazı tiplerine karşı kullanmaktır. SVG’lere özel olarak girmeyeceğiz, ancak SVG simgelerinin kullanımda olduğunu varsayacağız.

İlk olarak, mevcut düğmelerimizden daha kolay genişletmeyi yapalım ve metnin yanına bir svg simgesi bırakalım:

<a href="javascript:;" class="button">
<svg
class="button__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
Button Link
</a>

Simge + metin kullanım durumu için SVG ile ilgili 3 temel özellik vardır:

1. Yeni bir kullanımı button__icon sınıf
2. bu viewBox değer, simge sınırlarına sıkı sıkıya bağlıdır, ideal olarak, değerler varyansa sahip olsa bile (örn. 24 vs. 32)
3. Erişilebilirlik için şunları uygularız:

• aria-hidden="true" – dekoratif olduğu ve görünür düğme metni tarafından henüz sağlanmayan herhangi bir anlamsal değer sağlamadığı için yardımcı teknolojinin SVG’yi atlamasını sağlar
• focusable="false" – bazı IE sürümlerinde “çift odak” olayını önler

Simge düğmelerinin erişilebilirliği hakkında daha fazla bilgi için: Okumak bu mükemmel makale hem erişilebilirlik hem de SVG’ler konusunda uzman olan Sara Soueidan tarafından

Dolayı display: inline-flex tabana uygulanan .buttonve hayır width SVG’deki öznitelik, varsayılan olarak simge henüz görünmez.

Öyleyse önce yeni boyutumuza boyutlar ekleyelim .button__icon kullanarak, sınıf em birimine göre tutmak için font-size kullanımda:

.button__icon {
width: 0.9em;
height: 0.9em;
}

Göre varsayılan özellikSVG parçaları dahil path sahip olmak fill siyah. Bunu ayarlamak için özel anahtar kelimeyi kullanacağız. currentColor düğmenin uygulanan metnini genişletecek olan color SVG’ye:

.button__icon {
fill: currentColor;
}

Ayarlanacak son şey, simge ve düğme metni arasına biraz boşluk eklemektir; em birim:

.button__icon {
margin-right: 0.5em;
}

Simgenin metinden sonra veya düğmenin “sonunda” (sağdan sola diller için) yerleştirilmesine izin vermek için bir yardımcı sınıf eklememiz gerekiyor. Mevcut marjı sıfırlıyoruz ve sola çeviriyoruz:

.button__icon {
&--end {
margin-right: 0;
margin-left: 0.5em;
}
}

<a href="javascript:;" class="button">
Button Link
<svg
class="button__icon button__icon--end"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
</a>

Yalnızca simge düğmelerine ek olarak her iki normal düğmeyi (simgeli veya simgesiz) istediğimizi varsayacağız. Bu önemlidir çünkü yeniden kullanacağız. .button sınıfa ek olarak yeni bir sınıfa ekliyoruz, böylece sıfırlamaları ve temel görsel stilleri yeniden tanımlamamız gerekmiyor. Geçersiz kılmalar minimum düzeydedir.

<a href="javascript:;" class="button icon-button" aria-label="Icon-only Button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
class="icon-button__icon"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
</a>

Simge + metin düğmesindeki değişiklikler:

1. eklenmesi icon-button sınıfa a
2. eklenmesi aria-label="Icon-only Button" görsel metni kaldırdığımız için erişilebilir bir metin alternatifi sağlamak
3. SVG’deki sınıfın şu şekilde değiştirilmesi: icon-button__icon

Önemli: değeri aria-label tarif etmeli düğme ne işe yarar olumsuzluk simge nedir. Daha fazla okuma ve bir metin alternatifi sağlamanın diğer yolları için, bkz. Sara Soueidan’ın makalesi

İşte ayarlamalardan önce elde ettiğimiz şey – boş görünen bir düğme çünkü genişlik sorununa geri döndük:

Öncelikle yeni sınıfımızı oluşturalım. Dolayı CSS’deki “C”bu kuralın sonra yerleştirilmesi gerekir .button kural:

.icon-button {
width: 2.5rem;
height: 2.5rem;
padding: 0.35em;
border-radius: 50%;
&__icon {
width: 100%;
height: 100%;
fill: currentColor;
}
}

Yeni tanımlıyoruz width ve height bu, tasarım gereksinimlerinize göre tamamen ayarlanabilir, ancak bir kareye eşit olmalıdır. Bu, şu durumlarda bir “daire” görünümünün oluşturulmasına izin verir: border-radius: 50% uygulanır.

Ardından, SVG simgesi ve düğme sınırı arasına biraz nefes alma odası eklemek için (yine zevklerinize/tasarım gereksinimlerinize göre) bir dokunuş ekleriz.

Ardından, kendimizi tanımlarız icon-button__icon sınıf. Buradaki fark, bizim istediğimiz width ve height konteynerinkiyle eşleşmesi için, bunu şu şekilde ayarladık: 100%. Bu, yalnızca simgeyi yalnızca yeniden tanımlayarak birden çok boyutta yalnızca simge düğmelerine genişletmeye izin verir. font-size üzerindeki mülk .icon-button sınıf.

İşte ilerleme:

İstediğimiz tam olarak bu değil, ancak aşağıdaki özellikleri ayarlayarak düzeltebiliriz. .button sınıf. kullanacağız :not() yalnızca normal düğmelere yönelik özellikleri hariç tutmak için seçici:

.button {

&:not(.icon-button) {
min-width: 10ch;
min-height: 44px;
padding: 0.25em 0.75em;
}
}

Şimdi peşinde olduğumuz şeye sahibiz:

kullanımını içerir .button--small bir önceki bölümde oluşturulan sınıfın yanı sıra stillerin her iki öğe için de iyi çalıştığını doğrulamak için bir “gerçek düğme”:

Stephanie Eckles (@5t3ph)

Erişilebilir düğme renkleri oluşturmak için ButtonBuddy’yi deneyin. Oluşturduğum bu web uygulaması, tüm kontrast vektörlerini düğme renk paletinizde elde etmenize yardımcı olacak.