Bu yazıda, renklere uyarlanabilir, duyarlı ve erişilebilir FAB bileşenlerinin nasıl oluşturulacağına ilişkin düşüncelerimi paylaşmak istiyorum. Demoyu deneyin Ve kaynağı görüntüle!
Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:
genel bakış #
FAB’ler mobil cihazlarda masaüstünden daha yaygındır, ancak her iki senaryoda da yaygındır. Birincil eylemleri göz önünde bulundurarak onları kullanışlı ve her yerde mevcut hale getirirler. Bu kullanıcı deneyimi stili, Material UI tarafından ünlendi ve kullanım ve yerleştirme önerileri şu şekilde olabilir: burada bulundu.
Öğeler ve stiller #
Bu denetimler için HTML, bir kapsayıcı öğe ve bir veya daha fazla düğme kümesi içerir. Konteyner, FAB’leri görünüm alanı içinde konumlandırır ve düğmeler arasındaki boşluğu yönetir. Düğmeler mini veya varsayılan olabilir ve birincil ve ikincil eylemler arasında hoş bir çeşitlilik sağlar.
FAB konteyneri #
Bu eleman düzenli olabilir <div> ama görme engelli kullanıcılarımıza bir iyilik yapalım ve bu kabın amacını ve içeriğini açıklamak için bazı yararlı özelliklerle etiketleyelim.
FAB işaretlemesi #
ile başla .fabs stil için bağlanmak üzere CSS için sınıf, ardından ekleyin role="group" Ve aria-label bu yüzden sadece genel bir kap değil, adlandırılmış ve amaca yönelik.
div class="fabs" role="group" aria-label="Floating action buttons">
<!-- buttons will go here -->
</div>
FAB stili #
FAB’lerin kullanışlı olması için her zaman görüntü alanı içinde kalırlar. Bu, konum için harika bir kullanım örneğidir. fixed. Bu görünüm alanı pozisyonunda kullanmayı seçtim inset-block Ve inset-inline böylece konum, sağdan sola veya soldan sağa gibi kullanıcının belge modunu tamamlar. Yinelemeyi önlemek ve görünümün alt ve yan kenarlarından eşit mesafe sağlamak için özel özellikler de kullanılır:
.fabs {
--_viewport-margin: 2.5vmin;position: fixed;
z-index: var(--layer-1);
inset-block: auto var(--_viewport-margin);
inset-inline: auto var(--_viewport-margin);
}
Sonra konteyner görüntüsünü veriyorum flex ve yerleşim yönünü olarak değiştirin column-reverse. Bu, çocukları üst üste istifler (sütun) ve ayrıca görsel sıralarını tersine çevirir. Bu, ilk odaklanabilir öğeyi, HTML belgesine göre odağın normalde gittiği yer olan üst yerine alt öğe yapma etkisine sahiptir. Birincil eylemin stilinin mini düğmelerden daha büyük olması, gören kullanıcılara bunun birincil eylem olduğunu gösterdiğinden ve klavye kullanıcıları bunu kaynaktaki ilk öğe olarak odaklayacağından, görsel sırayı tersine çevirmek, gören kullanıcılar ve klavye kullanıcıları için deneyimi birleştirir. .
.fabs {
…display: flex;
flex-direction: column-reverse;
place-items: center;
gap: var(--_viewport-margin);
}
Merkezleme ile gerçekleştirilir place-itemsVe gap kapsayıcıya yerleştirilen FAB düğmelerinin arasına boşluk ekler.
FAB düğmeleri #
Bazı düğmelere her şeyin üzerinde yüzüyormuş gibi görünme zamanı geldi.
Varsayılan FAB #
Stil verilecek ilk düğme varsayılan düğmedir. Bu, tüm FAB düğmeleri için temel görevi görecektir. Daha sonra, bu temel stillerden olabildiğince azını değiştirirken alternatif bir görünüme ulaşan bir değişken oluşturacağız.
FAB işaretlemesi #
bu <button> eleman doğru seçimdir. Harika fare, dokunma ve klavye kullanıcı deneyimi ile birlikte geldiği için temel olarak bununla başlayacağız. Bu işaretlemenin en önemli yönü, simgeyi ekran okuyucu kullanıcılarından gizlemektir. aria-hidden="true" ve gerekli etiket metnini <button> işaretlemenin kendisi. Bu durumlarda etiket eklerken, title böylece fare kullanıcıları, simgenin iletişim kurmayı umduğu şey hakkında bilgi alabilir.
button data-icon="plus" class="fab" title="Add new action" aria-label="Add new action">
svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>
FAB stili #
İlk olarak, düğmeyi güçlü bir gölgeye sahip yastıklı yuvarlak bir düğmeye dönüştürelim, çünkü bunlar düğmenin ilk tanımlayıcı özellikleridir:
.fab {
--_size: 2rem;padding: calc(var(--_size) / 2);
border-radius: var(--radius-round);
aspect-ratio: 1;
box-shadow: var(--shadow-4);
}
Sonra renk ekleyelim. Daha önce GUI Mücadelelerinde kullandığımız bir stratejiyi kullanacağız. Açık ve koyu renkleri statik olarak tutan, açıkça adlandırılmış bir özel özellikler grubu oluşturun, ardından kullanıcının sistem tercihine bağlı olarak açık veya koyu değişkenlere ayarlanacak uyarlanabilir bir özel özellik oluşturun:
.fab {
…/* light button and button hover */
--_light-bg: var(--pink-6);
--_light-bg-hover: var(--pink-7);
/* dark button and button hover */
--_dark-bg: var(--pink-4);
--_dark-bg-hover: var(--pink-3);
/* adaptive variables set to light by default */
--_bg: var(--_light-bg);
/* static icon colors set to the adaptive foreground variable */
--_light-fg: white;
--_dark-fg: black;
--_fg: var(--_light-fg);
/* use the adaptive properties on some styles */
background: var(--_bg);
color: var(--_fg);
&:is(:active, :hover, :focus-visible) {
--_bg: var(--_light-bg-hover);
TheComedicComedian (prefers-color-scheme: dark) {
--_bg: var(--_dark-bg-hover);
}
}
/* if users prefers dark, set adaptive props to dark */
TheComedicComedian (prefers-color-scheme: dark) {
--_bg: var(--_dark-bg);
--_fg: var(--_dark-fg);
}
}
Ardından, SVG simgelerinin alana sığmasına yardımcı olmak için bazı stiller ekleyin.
.fab {
…& > svg
{
inline-size: var(--_size);
block-size: var(--_size);
stroke-width: 3px;
}
}
Son olarak, etkileşim için kendi görsel geri bildirimimizi eklediğimiz için düğmeden hafifçe vurarak vurgulamayı kaldırın:
.fab {
-webkit-tap-highlight-color: transparent;
}
Mini fab #
Bu bölümün amacı, FAB düğmesi için bir değişken oluşturmaktır. Bazı FAB’leri varsayılan eylemden daha küçük yaparak, kullanıcının en sık gerçekleştirdiği eylemi destekleyebiliriz.
Mini FAB işaretlemesi #
HTML, FAB ile aynıdır, ancak CSS’ye değişkene bir kanca vermek için bir “.mini” sınıfı ekliyoruz.
button data-icon="heart" class="fab mini" title="Like action" aria-label="Like action">
svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">...</svg>
</button>
Mini FAB stili #
Özel özelliklerin kullanımı sayesinde, gereken tek değişiklik, --_size değişken.
.fab.mini {
--_size: 1.25rem;
}
Ulaşılabilirlik #
FAB’lerle erişilebilirlik için hatırlanması gereken en önemli kısım, sayfanın klavye akışı içindeki yerleşimdir. Bu demo yalnızca FAB’lere sahiptir, klavye düzeni ve akışı açısından rekabet edecek hiçbir şey yoktur, bu da anlamlı bir klavye akışı gösterme fırsatı olmadığı anlamına gelir. Odaklanmak için yarışan unsurların olduğu bir senaryoda, bir kullanıcının kendisini FAB düğme akışına girerken bu akışın neresinde bulması gerektiğini derinlemesine düşünmenizi öneririm.
Kullanıcı FAB kapsayıcısına odaklandığında, zaten ekledik role="group" Ve aria-label="floating action buttons" ekran okuyucu kullanıcılarını odaklandıkları şeyin içeriği hakkında bilgilendiren. Stratejik olarak, varsayılan FAB’ı ilk sıraya yerleştirdim, böylece kullanıcılar önce birincil eylemi bulur. sonra kullanırım flex-direction: column-reverse; kolay erişim için kullanıcıların parmaklarına yakın, alttaki birincil düğmeyi görsel olarak sıralamak için. Bu güzel bir kazanç çünkü varsayılan düğme görsel olarak öne çıkıyor ve aynı zamanda klavye kullanıcıları için bir ilk, onlara çok benzer deneyimler sunuyor.
Son olarak, simgelerinizi ekran okuyucu kullanıcılarından gizlemeyi unutmayın ve onlara düğme için bir etiket sağladığınızdan emin olun, böylece bir sır olmaz. Bu zaten HTML’de yapılmıştır. aria-hidden="true" üzerinde <svg> Ve aria-label="Some action" üzerinde <button>S.
Animasyon #
Kullanıcı deneyimini geliştirmek için çeşitli animasyon türleri eklenebilir. Diğer GUI Mücadelelerinde olduğu gibi, azaltılmış bir hareket deneyimi ve tam bir hareket deneyimi amacını gerçekleştirmek için birkaç özel özellik oluşturacağız. Varsayılan olarak stiller, kullanıcının azaltılmış hareket istediğini varsayar ve ardından prefers-reduced-motion medya sorgusu, geçiş değerini tam harekete değiştirir.
Özel özelliklere sahip azaltılmış hareket stratejisi #
Aşağıdaki CSS’de üç özel özellik oluşturulur: --_motion-reduced, --_motion-okVe --_transition. İlk ikisi, kullanıcının tercihine göre uygun geçişleri tutar ve son değişken --_transition birine ayarlanacak --_motion-reduced veya --_motion-ok sırasıyla.
.fab {
/* box-shadow and background-color can safely be transitioned for reduced motion users */
--_motion-reduced:
box-shadow .2s var(--ease-3),
background-color .3s var(--ease-3);/* add transform and outline-offset for users ok with motion */
--_motion-ok:
var(--_motion-reduced),
transform .2s var(--ease-3),
outline-offset 145ms var(--ease-2);
/* default the transition styles to reduced motion */
--_transition: var(--_motion-reduced);
/* set the transition to our adaptive transition custom property*/
transition: var(--_transition);
/* if motion is ok, update the adaptive prop to the respective transition prop */
TheComedicComedian (prefers-reduced-motion: no-preference) {
--_transition: var(--_motion-ok);
}
}
Yukarıdakiler yerinde olduğunda, değişiklikler box-shadow, background-color, transform Ve outline-offset geçiş yapılabilir ve kullanıcıya etkileşiminin alındığına dair güzel bir kullanıcı arabirimi geri bildirimi verilir.
Ardından, tasarıma biraz daha yetenek katın. :active ayarlayarak durum translateYbiraz, bu düğmeye güzel bir basma efekti verir:
.fab {
…&:active
{
TheComedicComedian (prefers-reduced-motion: no-preference) {
transform: translateY(2%);
}
}
}
Ardından, son olarak, düğmelerdeki SVG simgelerinde yapılan değişiklikleri geçiş yapın:
.fab {
…&[data-icon="plus"]:hover > svg
{
transform: rotateZ(.25turn);
}& > svg {
TheComedicComedian (prefers-reduced-motion: no-preference) {
will-change: transform;
transition: transform .5s var(--ease-squish-3);
}
}
}
Çözüm #
Artık nasıl yaptığımı bildiğine göre, nasıl yapardın‽ 🙂
Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim.
Bir demo oluşturun, beni tweetle bağlantılar ve onu aşağıdaki topluluk remiksleri bölümüne ekleyeceğim!
Topluluk remiksleri #
Burada henüz görülecek bir şey yok.