Kaydırma çubukları ve onay kutularından oluşan bir ayarlar bileşeninin nasıl oluşturulacağına dair temel bir genel bakış.
Bu gönderide, web için duyarlı, birden fazla cihaz girişini destekleyen ve tarayıcılarda çalışan bir Ayarlar bileşeni oluşturma konusundaki düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.
Videoları tercih ediyorsanız veya oluşturduğumuz kullanıcı arayüzü/kullanıcı deneyiminin önizlemesini görmek istiyorsanız YouTube'da kısa bir açıklamalı kılavuzu inceleyebilirsiniz:
Genel Bakış
Bu bileşenin özelliklerini aşağıdaki bölümlere ayırdım:
- Düzenler
- Renk
- Özel aralık girişi
- Özel onay kutusu girişi
- Erişilebilirlikle ilgili dikkat edilmesi gereken noktalar
- JavaScript
Düzenler
Bu, tamamen CSS Izgara kullanan ilk GUI Challenge demosu. Her ızgara, ızgara için Chrome Geliştirici Araçları ile vurgulanmıştır:
Sadece boşluk için
En yaygın düzen:
foo {
display: grid;
gap: var(--something);
}
Bu düzeni, bloklar arasına boşluk eklemek için yalnızca ızgara kullandığından "yalnızca boşluk için" olarak adlandırıyorum.
Bu stratejiyi kullanan beş düzen vardır. Bunların tümü aşağıda gösterilmiştir:
Her giriş grubunu (.fieldset-item) içeren fieldset öğesi, öğeler arasındaki ince çizgi kenarlıkları oluşturmak için gap: 1px öğesini kullanır. Karmaşık kenarlık çözümü yok.
.grid { display: grid; gap: 1px; background: var(--bg-surface-1); & > .fieldset-item { background: var(--bg-surface-2); } }
.grid { display: grid; & > .fieldset-item { background: var(--bg-surface-2); &:not(:last-child) { border-bottom: 1px solid var(--bg-surface-1); } } }
Doğal ızgara kaydırma
En karmaşık düzen, <main> ile <form> arasındaki mantıksal düzen sistemi olan makro düzen oldu.
Sarmalayıcı içeriği ortalamayı
Hem Flexbox hem de ızgara, align-items veya align-content olanağı sunar. Sarmal öğelerle çalışırken content düzen hizalamaları, boşluğu alt öğeler arasında grup olarak dağıtır.
main {
display: grid;
gap: var(--space-xl);
place-content: center;
}
Ana öğe, alt öğelerin hem bir hem de iki sütunlu düzenlerde dikey ve yatay olarak ortalanması için place-content: center hizalama kısayolunu kullanır.
Yukarıdaki videoda, sarmalama işlemi gerçekleşmesine rağmen "içeriğin" nasıl ortada kaldığını izleyin.
Otomatik sığdırma minimum ve maksimum değerlerini tekrarla
<form>, her bölüm için uyarlanabilir bir ızgara düzeni kullanır.
Bu düzen, mevcut alana bağlı olarak bir sütundan iki sütuna geçer.
form {
display: grid;
gap: var(--space-xl) var(--space-xxl);
grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
align-items: flex-start;
max-width: 89vw;
}
Bu ızgara, duyarlı düzene özel bir dokunuş katmak için row-gap (--space-xl) için column-gap (--space-xxl) değerinden farklı bir değere sahiptir. Sütunlar yığıldığında büyük bir boşluk olmasını isteriz ancak bu boşluk geniş ekrandaki kadar büyük olmamalıdır.
grid-template-columns mülkü 3 CSS işlevi kullanır: repeat(), minmax() ve min(). Una Kravets'in bu konuyla ilgili harika bir sayfa düzeni blog yayını var. Bu yayında, RAM olarak adlandırılan bir düzenden bahsediliyor.
Una'nın düzeniyle karşılaştırıldığında, düzenimizde 3 özel ekleme var:
- Ek bir
min()işlevi iletiyoruz. align-items: flex-startdeğerini belirtiriz.max-width: 89vwstili vardır.
Evan Minto, ek min() işlevini minmax() ve min() ile Doğası gereği duyarlı CSS ızgara başlıklı blog yayınında ayrıntılı bir şekilde açıklamıştır. Bu yayını okumanızı öneririz. flex-start Hizalama düzeltmesi, varsayılan esneme efektini kaldırmak içindir. Böylece bu düzenin alt öğelerinin eşit yüksekliklere sahip olması gerekmez, doğal ve doğal yüksekliklere sahip olabilirler. Bu YouTube videosunda, bu hizalama eklemesinin kısa bir dökümü yer alır.
max-width: 89vw, bu yayında kısaca ele alınmalıdır.
Stil uygulanmış ve uygulanmamış haldeki düzeni göstereyim:
Neler oluyor? max-width belirtildiğinde, auto-fit düzen algoritmasının alana kaç tekrar sığdırabileceğini bilmesi için bağlam, açık boyutlandırma veya kesin boyutlandırma sağlanır. Alanın "tam genişlik"te olduğu açık olsa da CSS ızgara spesifikasyonuna göre belirli bir boyut veya maksimum boyut belirtilmelidir. Maksimum boyutu belirttim.
Peki neden 89vw? Çünkü düzenim için "işe yaradı".
Birkaç Chrome çalışanıyla birlikte, 100vw gibi daha makul bir değerin neden yeterli olmadığını ve bunun gerçekten bir hata olup olmadığını araştırıyoruz.
Boşluk
Bu düzenin uyumunun büyük bir kısmı, tam olarak 7 tane olan sınırlı bir boşluk paletinden kaynaklanıyor.
:root {
--space-xxs: .25rem;
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-xxl: 6rem;
}
Bu akışlar, ızgara, CSS @nest ve @media'nın 5. seviye söz dizimine çok uygundur. Aşağıda, tamamen <main> düzen stili grubu içeren bir örnek verilmiştir.
main {
display: grid;
gap: var(--space-xl);
place-content: center;
padding: var(--space-sm);
@media (width >= 540px) {
& {
padding: var(--space-lg);
}
}
@media (width >= 800px) {
& {
padding: var(--space-xl);
}
}
}
Varsayılan olarak ortalanmış içeriğe sahip, orta düzeyde dolgu yapılmış bir ızgara (mobil cihazlarda olduğu gibi). Ancak daha fazla görüntü alanı kullanılabilir hale geldikçe dolgu artırılarak yayılırlar. 2021 CSS oldukça iyi görünüyor.
"Just for gap" (Boşluk için) adlı önceki düzeni hatırlıyor musunuz? Bu bileşendeki görünümlerinin daha kapsamlı bir versiyonunu aşağıda bulabilirsiniz:
header {
display: grid;
gap: var(--space-xxs);
}
section {
display: grid;
gap: var(--space-md);
}
Renk
Renklerin kontrollü kullanımı, bu tasarımın etkileyici ve minimalist bir şekilde öne çıkmasına yardımcı oldu. Bunu şu şekilde yapıyorum:
:root {
--surface1: lch(10 0 0);
--surface2: lch(15 0 0);
--surface3: lch(20 0 0);
--surface4: lch(25 0 0);
--text1: lch(95 0 0);
--text2: lch(75 0 0);
}
Bir medya sorgusunda bunları çevireceğim ve açık ile koyu anlamlı olmayacak olduğundan yüzey ve metin renklerimi surface-dark ve surface-darker gibi adlar yerine sayılarla adlandırıyorum.
Bunları şu şekilde bir tercih medya sorgusunda çeviriyorum:
:root {
...
@media (prefers-color-scheme: light) {
& {
--surface1: lch(90 0 0);
--surface2: lch(100 0 0);
--surface3: lch(98 0 0);
--surface4: lch(85 0 0);
--text1: lch(20 0 0);
--text2: lch(40 0 0);
}
}
}
Renk söz dizimi ayrıntılarına geçmeden önce genel tabloya ve stratejiye hızlıca göz atmak önemlidir. Ancak biraz ileri gittim. Bu nedenle biraz geri döneceğim.
LCH?
Renk teorisi konusunda çok fazla bilgi vermeden LCH'nin, rengi matematikle (255 gibi) nasıl ölçtüğümüze değil, nasıl algıladığımıza odaklanan, kullanıcı odaklı bir söz dizimi olduğunu söyleyebiliriz. Bu, insanlar tarafından daha kolay yazılabilmesi ve diğer kullanıcıların bu düzenlemelere uyum sağlayabilmesi nedeniyle belirgin bir avantaj sağlar.
Bugünkü demoda, açık ve koyu renk oluşturmak için değiştirdiğim söz dizimi ve değerlere odaklanalım. 1 yüzey ve 1 metin rengine bakalım:
:root {
--surface1: lch(10 0 0);
--text1: lch(95 0 0);
@media (prefers-color-scheme: light) {
& {
--surface1: lch(90 0 0);
--text1: lch(40 0 0);
}
}
}
--surface1: lch(10 0 0), 10% açıklık, 0 renk doygunluğu ve 0 renk tonu anlamına gelir: çok koyu, renksiz gri. Ardından, açık mod için medya sorgusunda açıklık, --surface1: lch(90 0 0); ile 90% olarak değiştirilir. Stratejinin ana fikri budur. Tasarımda gerekli olan veya erişilebilirliği koruyan kontrast oranlarını koruyarak 2 tema arasında yalnızca açıklığı değiştirerek başlayın.
Burada lch() ile ilgili bonus, hafifliğin insana yönelik olmasıdır. Bu nedenle, % değişikliğiyle ilgili olarak kendimizi iyi hissedebiliriz. Bu değişiklik, algısal olarak ve tutarlı bir şekilde % farklı olacaktır. Örneğin hsl(), o kadar güvenilir değildir.
Renk alanları ve lch() hakkında daha fazla bilgi edinebilirsiniz. Yakında kullanıma sunulacak.
CSS şu anda bu renklere hiç erişemiyor. Tekrar belirtmek isteriz: Çoğu modern monitördeki renklerin üçte birine erişemiyoruz. Üstelik bunlar herhangi bir renk değil, ekranda gösterilebilecek en canlı renklerdir. Monitör donanımı, CSS özelliklerinden ve tarayıcı uygulamalarından daha hızlı geliştiğinden web sitelerimizde renklerin solması sorunu yaşanıyor.
Lea Verou
Renk şeması içeren uyarlanabilir form denetimleri
Birçok tarayıcıda koyu tema kontrolleri bulunur (şu anda Safari ve Chromium). Ancak tasarımınızda bu kontrolleri kullanacağınızı CSS veya HTML'de belirtmeniz gerekir.
Yukarıda, DevTools'un Stiller panelinden mülkün etkisi gösterilmektedir. Demoda HTML etiketi kullanılıyor. Bu etiket, genel olarak daha iyi bir konumdur:
<meta name="color-scheme" content="dark light">
Thomas Steiner tarafından yazılan bu color-scheme makaleden konuyla ilgili tüm bilgileri edinebilirsiniz. Karanlık onay kutusu girişlerinden çok daha fazlasını elde edebilirsiniz.
CSS accent-color
Tarayıcıların giriş öğesinde kullanılan renk tonunu değiştirebilen tek bir CSS stili olan form öğelerindeki accent-color ile ilgili yakın zamanda hareketlilik oldu. GitHub'da bu konuyla ilgili daha fazla bilgi edinebilirsiniz. Bu bileşen için stillerimize ekledim. Tarayıcılar bunu desteklediği için onay kutularım pembe ve mor renk vurgularıyla daha uyumlu olacak.
input[type="checkbox"] {
accent-color: var(--brand);
}
Sabit renk geçişleri ve odak içi çarpıcı renk efektleri
Renklerin en iyi şekilde öne çıkması için az miktarda kullanılması gerekir. Bunu yapmanın en sevdiğim yollarından biri de renkli kullanıcı arayüzü etkileşimleridir.
Yukarıdaki videoda, kullanıcı arayüzü geri bildirimi ve etkileşiminin birçok katmanı vardır. Bu katmanlar, aşağıdakileri yaparak etkileşime kişilik kazandırmaya yardımcı olur:
- Bağlamı vurgulama
- Değerin aralıktaki "doluluk" düzeyiyle ilgili kullanıcı arayüzü geri bildirimi sağlama.
- Bir alanın giriş kabul ettiğine dair kullanıcı arayüzü geri bildirimi sağlama
CSS, bir öğeyle etkileşim kurulduğunu bildirmek için çeşitli öğelerin görünümünü değiştirmek üzere :focus-within sözde sınıfını kullanır. .fieldset-item'ı inceleyelim. Çok ilginç:
.fieldset-item {
...
&:focus-within {
background: var(--surface2);
& svg {
fill: white;
}
& picture {
clip-path: circle(50%);
background: var(--brand-bg-gradient) fixed;
}
}
}
Bu öğenin alt öğelerinden biri odaklandığında:
.fieldset-itemarka planına daha yüksek kontrastlı bir yüzey rengi atanır.- İç içe yerleştirilmiş
svg, daha yüksek kontrast için beyazla doldurulur. - İç içe yerleştirilmiş
<picture>clip-pathtam bir daireye genişler ve arka plan parlak sabit degrade ile doldurulur.
Özel aralık
Aşağıdaki HTML giriş öğesini kullanarak görünümünü nasıl özelleştirdiğimi göstereceğim:
<input type="range">
Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:
Aralık öğesi stilleri
input[type="range"] {
/* style setting variables */
--track-height: .5ex;
--track-fill: 0%;
--thumb-size: 3ex;
--thumb-offset: -1.25ex;
--thumb-highlight-size: 0px;
appearance: none; /* clear styles, make way for mine */
display: block;
inline-size: 100%; /* fill container */
margin: 1ex 0; /* ensure thumb isn't colliding with sibling content */
background: transparent; /* bg is in the track */
outline-offset: 5px; /* focus styles have space */
}
CSS'nin ilk birkaç satırı, stillerin özel bölümleridir. Bunların net bir şekilde etiketlenmesinin işinize yarayacağını umuyorum. Stillerin geri kalanı, bileşenin zor kısımlarını oluşturmak için tutarlı bir temel sağlamak amacıyla çoğunlukla sıfırlanan stillerdir.
Parça stilleri
input[type="range"]::-webkit-slider-runnable-track {
appearance: none; /* clear styles, make way for mine */
block-size: var(--track-height);
border-radius: 5ex;
background:
/* hard stop gradient:
- half transparent (where colorful fill we be)
- half dark track fill
- 1st background image is on top
*/
linear-gradient(
to right,
transparent var(--track-fill),
var(--surface1) 0%
),
/* colorful fill effect, behind track surface fill */
var(--brand-bg-gradient) fixed;
}
Bunun için canlı dolgu rengini "göstermeniz" gerekir. Bu işlem, üstteki sert duraklı degrade ile yapılır. Renk geçişi, dolgu yüzdesine kadar şeffaftır ve bu yüzdenin üzerindeki kısımlarda doldurulmamış parça yüzeyi rengini kullanır. Bu doldurulmamış yüzeyin arkasında, şeffaflığın ortaya çıkarmasını bekleyen tam genişlikli bir renk vardır.
Parça dolgu stili
Tasarımımın, dolgu stilini koruması için JavaScript'e ihtiyacı var. Yalnızca CSS stratejileri vardır ancak bunlar, küçük resim öğesinin parçayla aynı yükseklikte olmasını gerektirir ve bu sınırlar içinde bir uyum bulamadım.
/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')
/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
const max = slider.getAttribute('max') || 10;
const percent = slider.value / max * 100;
return `${parseInt(percent)}%`;
};
/* on page load, set the fill amount */
sliders.forEach(slider => {
slider.style.setProperty('--track-fill', rangeToPercent(slider));
/* when a slider changes, update the fill prop */
slider.addEventListener('input', e => {
e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
})
})
Bence bu, görsel açıdan iyi bir yükseltme. Kaydırma çubuğu JavaScript olmadan mükemmel çalışır. --track-fill özelliği gerekli değildir. Bu özellik yoksa doldurma stili olmaz. JavaScript kullanılabilir durumdaysa özel özelliği doldururken kullanıcı değişikliklerini de gözlemleyin ve özel özelliği değerle senkronize edin.
Ana Tudor tarafından CSS-Tricks'da yayınlanan bu mükemmel makalede, parça doldurma için yalnızca CSS'den oluşan bir çözüm gösterilmektedir. Bu range öğesini de çok ilham verici buldum.
Küçük resim stilleri
input[type="range"]::-webkit-slider-thumb {
appearance: none; /* clear styles, make way for mine */
cursor: ew-resize; /* cursor style to support drag direction */
border: 3px solid var(--surface3);
block-size: var(--thumb-size);
inline-size: var(--thumb-size);
margin-top: var(--thumb-offset);
border-radius: 50%;
background: var(--brand-bg-gradient) fixed;
}
Bu stillerin çoğu, güzel bir daire oluşturmak için kullanılır.
Burada da küçük resimlerin, parçaların ve ilişkili SVG öğelerinin dinamik renklerini birleştiren sabit arka plan gradyanını görüyorsunuz.
Fareyle üzerine gelmeyle vurgulama için kullanılan box-shadow teknik
@custom-media --motionOK (prefers-reduced-motion: no-preference);
::-webkit-slider-thumb {
…
/* shadow spread is initally 0 */
box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
/* if motion is OK, transition the box-shadow change */
@media (--motionOK) {
& {
transition: box-shadow .1s ease;
}
}
/* on hover/active state of parent, increase size prop */
@nest input[type="range"]:is(:hover,:active) & {
--thumb-highlight-size: 10px;
}
}
Amaç, kullanıcı geri bildirimleri için kolayca yönetilebilen ve animasyonlu bir görsel öne çıkarmaktı. Kutu gölgesi kullanarak efektle düzenlemeyi tetiklemeyi önleyebilirim. Bunu, bulanık olmayan ve küçük resim öğesinin dairesel şekline uyan bir gölge oluşturarak yapıyorum. Ardından, fareyle üzerine geldiğinizde yayılma boyutunu değiştirip geçiş yaparım.
Keşke onay kutularında da vurgulama efekti bu kadar kolay olsaydı…
Tarayıcılar arası seçiciler
Tarayıcılar arası tutarlılık elde etmek için şu -webkit- ve -moz- seçicilere ihtiyacım olduğunu fark ettim:
input[type="range"] {
&::-webkit-slider-runnable-track {}
&::-moz-range-track {}
&::-webkit-slider-thumb {}
&::-moz-range-thumb {}
}
Özel onay kutusu
Aşağıdaki HTML giriş öğesini kullanarak görünümünü nasıl özelleştirdiğimi göstereceğim:
<input type="checkbox">
Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:
Onay kutusu öğesi
input[type="checkbox"] {
inline-size: var(--space-sm); /* increase width */
block-size: var(--space-sm); /* increase height */
outline-offset: 5px; /* focus style enhancement */
accent-color: var(--brand); /* tint the input */
position: relative; /* prepare for an absolute pseudo element */
transform-style: preserve-3d; /* create a 3d z-space stacking context */
margin: 0;
cursor: pointer;
}
transform-style ve position stilleri, öne çıkan anlara stil uygulamak için daha sonra tanıtacağımız sözde öğeye hazırlanır. Aksi takdirde, çoğunlukla kendi tarzıma göre küçük şeyler yazıyorum. İşaretçinin işaretçi olmasını, dış çizgi ofsetlerini beğeniyorum. Varsayılan onay kutuları çok küçük. accent-color destekleniyorsa bu onay kutularını marka renk şemasına ekleyin.
Onay kutusu etiketleri
Onay kutuları için etiketler eklemek 2 nedenden dolayı önemlidir. İlki, onay kutusu değerinin ne için kullanıldığını temsil etmek ve "ne için açık veya kapalı?" sorusuna yanıt vermek İkincisi, kullanıcı deneyimi için. Web kullanıcıları, ilişkili etiketleri aracılığıyla onay kutularıyla etkileşime geçmeye alışmıştır.
<input type="checkbox" id="text-notifications" name="text-notifications" >
<label for="text-notifications"> <h3>Text Messages</h3> <small>Get notified about all text messages sent to your device</small> </label>
Etiketinize, <label for="text-notifications"> kimlikli bir onay kutusunu işaret eden bir for özelliği ekleyin. Fare veya ekran okuyucu gibi çeşitli araç ve teknolojilerle bulunmasını sağlamak için onay kutunuzdaki adı ve kimliği iki kez girin:
<input type="checkbox" id="text-notifications" name="text-notifications">.
:hover, :active ve daha fazlası bu bağlantıyla ücretsiz olarak sunulur. Böylece formunuzla etkileşim kurma yolları artar.
Onay kutusunu vurgulama
Arayüzlerimin tutarlı olmasını istiyorum. Kaydırma çubuğu öğesinde, onay kutusunu kullanarak kullanmak istediğim güzel bir küçük resim vurgusu var. Küçük resim, gölgeyi büyütmek ve küçültmek için box-shadow ve spread mülkünü kullanabildi. Ancak onay kutularımız kare olduğu ve kare olması gerektiği için bu efekt burada kullanılamaz.
Aynı görsel efekti bir sözde öğe ve maalesef çok sayıda karmaşık CSS kullanarak elde ettim:
@custom-media --motionOK (prefers-reduced-motion: no-preference);
input[type="checkbox"]::before {
--thumb-scale: .01; /* initial scale of highlight */
--thumb-highlight-size: var(--space-xl);
content: "";
inline-size: var(--thumb-highlight-size);
block-size: var(--thumb-highlight-size);
clip-path: circle(50%); /* circle shape */
position: absolute; /* this is why position relative on parent */
top: 50%; /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
left: 50%;
background: var(--thumb-highlight-color);
transform-origin: center center; /* goal is a centered scaling circle */
transform: /* order here matters!! */
translateX(-50%) /* counter balances left: 50% */
translateY(-50%) /* counter balances top: 50% */
translateZ(-1px) /* PUTS IT BEHIND THE CHECKBOX */
scale(var(--thumb-scale)) /* value we toggle for animation */
;
will-change: transform;
@media (--motionOK) { /* transition only if motion is OK */
& {
transition: transform .2s ease;
}
}
}
/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
--thumb-scale: 1;
}
Bir daire sözde öğesi oluşturmak kolay bir işlemdir ancak bu öğeyi, bağlı olduğu öğenin arkasına yerleştirmek daha zordu. Sorunu düzeltmeden önceki ve sonraki durumu aşağıda görebilirsiniz:
Bu kesinlikle küçük bir etkileşim ama görsel tutarlılığı korumak benim için önemli. Animasyon ölçeklendirme tekniği, diğer yerlerde kullandığımızla aynıdır. Özel bir mülkü yeni bir değere ayarlar ve CSS'nin hareket tercihlerine göre geçiş yapmasına izin veririz. Buradaki temel özellik translateZ(-1px)'tür. Üst öğe bir 3D alan oluşturdu ve bu sözde öğe alt öğe, kendisini z uzayında biraz geriye yerleştirerek bu alana dokundu.
Erişilebilirlik
Bu YouTube videosunda, bu ayarlar bileşeni için fare, klavye ve ekran okuyucu etkileşimleri mükemmel bir şekilde gösteriliyor. Burada bazı ayrıntıları belirteceğim.
HTML Öğesi Seçenekleri
<form>
<header>
<fieldset>
<picture>
<label>
<input>
Bunların her biri, kullanıcının tarama aracıyla ilgili ipuçları ve öneriler içerir. Bazı öğeler etkileşim ipuçları sağlar, bazıları etkileşimi bağlar, bazıları ise ekran okuyucunun gezindiği erişilebilirlik ağacını şekillendirmeye yardımcı olur.
HTML Özellikleri
Ekran okuyucuların ihtiyaç duymadığı öğeleri (bu durumda kaydırma çubuğunun yanındaki simge) gizleyebilirsiniz:
<picture aria-hidden="true">
Yukarıdaki videoda, Mac OS'teki ekran okuyucu akışı gösterilmektedir. Giriş odağının doğrudan bir kaydırma çubuğundan diğerine nasıl geçtiğine dikkat edin. Bunun nedeni, bir sonraki kaydırma çubuğunun önünde durduğunuz simgeyi gizlemiş olmamızdır. Bu özellik olmadan kullanıcının durup dinlemesi ve göremeyebileceği resmin yanından geçmesi gerekir.
SVG bir dizi matematik işlemidir. Fareyle üzerine geldiğinizde görünen bir başlık ve matematik işleminin ne oluşturduğuyla ilgili kullanıcı tarafından okunabilir bir yorum için <title> öğesi ekleyelim:
<svg viewBox="0 0 24 24">
<title>A note icon</title>
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>
Bunun dışında, formun fare, klavye, video oyunu kumandaları ve ekran okuyucularda gerçekten iyi test edilebilmesi için yeterince net işaretlenmiş HTML kullandık.
JavaScript
Parça dolgu renginin JavaScript'ten nasıl yönetildiğini daha önce ele aldık. Şimdi <form> ile ilgili JavaScript'e göz atalım:
const form = document.querySelector('form');
form.addEventListener('input', event => {
const formData = Object.fromEntries(new FormData(form));
console.table(formData);
})
Formla her etkileşimde bulunulduğunda ve form değiştirildiğinde konsol, formu bir sunucuya gönderilmeden önce kolayca incelenebilmesi için tabloya bir nesne olarak kaydeder.
Sonuç
Bunu nasıl yaptığımı öğrendiğinize göre, siz ne yapardınız? Bu, bileşen mimarisini eğlenceli hale getirir. En sevdikleri çerçevede slot içeren ilk sürümü kim yapacak? 🙂
Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup bana tweetleyin. Bağlantıları aşağıdaki Topluluk remiksleri bölümüne ekleyeceğim.