Ayarlar bileşeni oluşturma

Kaydırma çubukları ve onay kutularından oluşan bir ayar bileşeninin nasıl oluşturulacağına ilişkin temel bir genel bakış.

Adam Argyle

Bu gönderide, JavaScript'iniz için bir Ayarlar bileşeni oluşturma birden fazla cihaz girişini destekleyen ve farklı cihazlarda çalışan izin verir. Demoyu deneyin.

Videoyu tercih ediyorsanız veya geliştirdiğimiz şeyin kullanıcı arayüzü/kullanıcı deneyimi önizlemesini istiyorsanız YouTube'da daha kısa adım adım açıklamalı kılavuz:

Genel Bakış

Bu bileşenin özelliklerini aşağıdaki bölümlere ayırdık:

1. Yerleşimler
2. Renk
3. Özel aralık girişi
4. Özel onay kutusu girişi
5. Erişilebilirlikle ilgili dikkat edilmesi gereken noktalar
6. JavaScript

Düzenler

Bu, tamamı CSS ızgarası olan ilk GUI Yarışması demosudur! Izgaralar ızgara için Chrome Geliştirici Araçları ile vurgulanmıştır:

Sadece boşluk

En yaygın düzen:

foo {
  display: grid;
  gap: var(--something);
}

Ben bu düzeni "yalnızca boşluklar için" çünkü bloklar arasına boşluk eklemek için yalnızca ızgara kullanıyor.

Bu strateji beş düzende kullanılıyor. Bunların tümü aşağıda gösterilmiştir:

Her bir giriş grubunu (.fieldset-item) içeren fieldset öğesi, şunları yapmak için gap: 1px kullanıyor: öğeler arasında ince çizgili kenarlıklar oluşturun. Karmaşık bir sınır çö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 sarmalama

En karmaşık düzen makro düzen, mantıksal düzen <main> ve <form> arasında bir sistem.

Sarmalama içeriğini ortalama

Hem Flexbox hem de ızgara, align-items veya align-content ve sarmalama öğeleriyle çalışırken content düzeni hizalama, grup olarak çocuklar arasında alan dağıtır.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

Ana öğe, place-content: center hizalamasını kullanıyor steno yani alt öğelerin hem bir hem de iki sütunlu düzende dikey ve yatay olarak ortalandığını gösterir.

Yukarıdaki videoyu izleyerek "içeriğin" sarmalasa bile ortada kalır olmuştur.

Minimum otomatik sığdırma ayarını tekrarla

<form>, her bölüm için uyarlanabilir bir ızgara düzeni kullanır. Bu düzen, kullanılabilir alana göre 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 ızgaranın row-gap (--space-xl) değeri, column-gap (--space-xxl) değerinden farklı duyarlı düzene özel bir dokunuş katın. Sütunlar üst üste geldiğinde büyük boşluk olmasını isteyebiliriz, ancak geniş ekranlardaki kadar büyük değildir.

grid-template-columns özelliği, 3 CSS işlevi kullanır: repeat(), minmax() ve min(). Una Kravets'in harika bir düzene sahip blogu var bir yayın paylaşarak RAM.

Düzenimizi Una'nınkiyle karşılaştırırsanız 3 özel ekleme var:

• Fazladan bir min() işlevi aktarılır.
• align-items: flex-start belirtiriz.
• max-width: 89vw stili vardır.

Ek min() işlevi Evan Minto tarafından post minmax() ve minmax() ile Doğal Olarak Duyarlı CSS Izgarası min() işlevini kullanın. Bunu da okumanızı öneririm. flex-start hizalama düzeltmesi: önceki esneme efektini kaldırın. Böylece, bu düzenin alt öğeleri ve doğal, doğuştan gelen yüksekliklere sahip olabilirler. İlgili içeriği oluşturmak için kullanılan Bu uyum ekleme işleminin kısa bir dökümünü YouTube videosunda bulabilirsiniz.

max-width: 89vw, bu yayındaki kısa bir özete değiyor. Stil uygulanmış ve uygulanmayan düzeni size göstereyim:

Neler oluyor? max-width belirtildiğinde bağlam sağlar, açıkça boyutlandırma veya denetimsiz auto-fit için boyut düzen algoritmasının tekrarlamaktan kaçınmanıza yardımcı olur. Basit gibi görünse de CSS ızgara spesifikasyonuna göre, boşluk "tam genişlik" olduğunda sağlanmalıdır. Maksimum boyut sağladım.

Peki, neden 89vw? Çünkü “işe yaradı” benim düzenim için uygun. Ben ve birkaç Chrome kişi daha makul bir değerin neden daha iyi gibi bir ifadenin 100vw yeterli olmadığını ve bu gerçekten bir hataysa,

Boşluk

Bu düzenin uyumunun büyük kısmı, sınırlı bir boşluk paletinden gelir (7) daha iyi olur.

: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ın ızgara, CSS @nest ve seviye 5 söz dizimi ile iyi bir şekilde kullanılması / @media. Aşağıda, tam <main> düzen grubu olan 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);
    }
  }
}

Ortalanmış içeriğe sahip, varsayılan olarak orta düzeyde dolgulu bir ızgara (mobil cihazlarda olduğu gibi). Ama Daha fazla görüntü alanı alanı arttıkça dolgu artar. 2021 CSS'si oldukça iyi görünüyor.

Daha önce bahsettiğimiz "sadece boşluk için" düzeni hatırlıyor musunuz? Arkadaş Bitkiler projesinin nasıl göründüğüne bakalım:

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

Renk

Kontrollü renk kullanımı, bu tasarımın hem etkileyici hem de dikkat çekici olmasına yardımcı oldu çok önemlidir. Şöyle 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);
}

Yüzey ve metin renklerimi gibi adların yerine sayılarla adlandırıyorum surface-dark ve surface-darker, çünkü medya sorgusunda açık ve koyu renkler anlam ifade etmez.

Bunları şu şekilde bir tercih edilen medya sorgusuna ç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);
    }
  }
}

Proje başlatmadan önce genel resme ve stratejiye hızlıca göz atmak renk söz dizimi ayrıntılarına gireceğiz. Ama biraz daha ileride olduğum için Son sözü hatırlayalım.

LCH mi?

LCH, renk teorisinin derinliklerine inmeden insan odaklı bir söz dizimidir. rengi ölçme şeklimize değil, rengi nasıl algıladığımıza (örneğin, 255). İnsanlar metinleri daha kolay yazabildiği ve başka şekillerde yazabildiği için bu yöntem ona insanlar da bu değişime uyum sağlayacaktır.

Bugün bu demoda, çevirdiğim söz dizimine ve değerlere karartabiliriz. 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 ve 0 ton anlamına gelir: a çok koyu renksiz gri. Ardından, açık mod için medya sorgusunda, --surface1: lch(90 0 0); ile 90% haline getirildi. Konuşmanın ana fikri budur. üzerine konuşacağız. 2 tema arasındaki açıklığı değiştirerek başlayın. ve erişilebilirliğin korunması için gerekli olan kontrast oranlarıdır.

lch() ile birlikte çalışmanın avantajı, hafifliğin insan odaklı olması ve bir % değişiklik, algısal ve tutarlı olması % farklı. Örneğin hsl(), şu şekilde değildir: güvenilir olarak tanımlar.

Yapılacak daha şey var şunun hakkında bilgi edinin: renk boşluklarından ve lch() adresinden ulaşabilirsiniz. Çok yakında!

CSS şu anda bu renklere hiç erişemiyor. Tekrar belirtmek isterim: Günümüzdeki en modern renkteki renklerin üçte birine erişimimiz yok. izleme Bunlar sadece herhangi bir renk değil, toplantı boyunca gösterilebileceğini belirleyin. Monitör donanımı değiştiği için web sitelerimiz kapatıldı ve tarayıcı uygulamalarından daha hızlı sonuçlar verir.

Lea Verou

Renk şemasıyla uyarlanabilir form kontrolleri

Çoğu tarayıcı, şu anda Safari ve Chromium olmak üzere koyu tema kontrollerini sunmaktadır, ancak tasarımınızın bunları kullandığını CSS veya HTML'de belirtmeniz gerekir.

Yukarıda, mülkün Stiller panelinden özelliğin etkisi gösterilmektedir Geliştirici Araçları'nı tıklayın. Demoda HTML etiketi kullanılıyor. Bence bu etiket genellikle daha iyi bir konum:

<meta name="color-scheme" content="dark light">

Bu konu hakkında daha fazla bilgiyi bu color-scheme sayfasında bulabilirsiniz. Thomas tarafından yazılmış makale Steiner. Yapılacak daha çok şey var koyu onay kutusu girişlerinden çok daha fazladır.

CSS accent-color

Geçtiğimiz gün içinde etkinlik Form öğelerinde accent-color, biçimi değiştirebilen tek bir CSS stilidir tarayıcı giriş öğesinde kullanılan ton rengi. Buradan daha fazla bilgi edinebilirsiniz. GitHub'ı tıklayın. Bunu da yeni stiller oluşturabilirsiniz. Tarayıcılar desteklediğinde, onay kutularım daha fazlasını yapabilirsiniz.

input[type="checkbox"] {
  accent-color: var(--brand);
}

Sabit gradyanlara sahip çarpıcı renkler

Renkler ölçülü bir şekilde kullanıldığında en çok öne çıkar. Bunu başarmak için de üzerinden çok daha kolay şekilde erişebiliyor.

Yukarıdaki videoda çok sayıda kullanıcı arayüzü geri bildirimi ve etkileşimi katmanı var. Bunlar, aşağıdakileri yaparak etkileşiminize kişiliği katmaya yardımcı olabilir:

• Bağlam vurgulanıyor.
• "Ne kadar dolu" olduğuna dair kullanıcı arayüzü geri bildirimi sağlama değer aralıktaysa.
• Bir alanın girişi kabul ettiğine dair kullanıcı arayüzü geri bildirimi sağlama.

Bir öğeyle etkileşim kurulduğunda geri bildirim sağlamak için CSS :focus-within elemanlarının görünümünü değiştirmek için kullanılan sanal sınıf .fieldset-item, ç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 birinin odak noktası:

1. .fieldset-item arka planına daha yüksek kontrastlı bir yüzey rengi atanır.
2. Daha yüksek kontrast için iç içe yerleştirilmiş svg beyaz renkle doldurulur.
3. İç içe yerleştirilmiş <picture> clip-path tam daireye genişler ve arka plan parlak sabit renk geçişiyle dolu.

Özel aralık

Aşağıdaki HTML giriş öğesine dayanarak size, Virtual Verde için görünüm:

<input type="range">

Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:

1. Aralık öğesi / kapsayıcı
2. Takip etme
3. Beğenme

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 ve net bir şekilde etiketlemek işe yarar. Stillerin geri kalanı genellikle sıfırlanmış stillerden oluşur. bileşenin zor parçalarını oluşturmak için tutarlı bir temel sağlar.

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;
}

Bu işin sırrı ise "ortaya çıkarmak"tır. parlak dolgu rengi. Bu işlem renk geçişini etkinleştirin. Renk geçişi, dolgu yüzdesine kadar ve bu değerden sonra kullanın. Doldurulmayan yüzeyin arkasında tam genişlikte görünmesi için şeffaflık bekleniyor.

İzleme dolgu stili

Tasarımım, dolgu stilini korumak için JavaScript gerektiriyor. Orada Bunlar yalnızca CSS stratejileridir, ancak küçük resim öğesinin aynı yükseklikte olmasını gerektirirler bu sınırların içinde bir uyum yakalayamadı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üzel bir görsel yükseltme için yeterli. Kaydırma çubuğu, arka planda JavaScript, --track-fill özelliği gerekli değildir, yalnızca bir mevcut değilse dolgu stili. JavaScript kullanılabiliyorsa, özel özelliğini kullanarak, kullanıcı değişikliklerini de gözlemleyerek özel mülkü değer.

Harika bir yayın Ana'dan CSS Püf Noktaları tek bir CSS çözümü olan Tudor, parça dolgusunu tıklayın. Bunu da buldum range öğesi çok ilham verici.

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şturmaktır. Burada, arka plan gradyanını birleştiren sabit arka plan baş parmakların, parçaların ve ilişkili SVG öğelerinin dinamik renkleri. box-shadow öğesinin izole edilmesine yardımcı olmak amacıyla etkileşim için stilleri ayırdım fareyle üzerine gelme için kullanılan 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;
  }
}

Hedef, kullanıcı geri bildirimi vermek için kolayca yönetilebilen bir görselden oluşuyordu ve animasyonlu bir görselden oluşuyordu. Kutu gölgesi kullanarak tetikleme ve düzeni efektiyle birlikte kullanabilirsiniz. Bunu yapıyorum kullanarak, bulanıklaştırılmamış ve resmin dairesel şekline uygun bir gölge oluşturarak öğesine dokunun. Daha sonra, fareyle üzerine gelindiğinde yayılma boyutunu değiştirip geçiriyorum.

Keşke vurgulama efekti onay kutularında bu kadar kolay olsaydı...

Tarayıcılar arası seçiciler

Tarayıcılar arası erişim elde etmek için bu -webkit- ve -moz- seçicilere ihtiyacım olduğunu fark ettim tutarlılık:

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

Özel Onay Kutusu

Aşağıdaki HTML giriş öğesine dayanarak size, Virtual Verde için görünüm:

<input type="checkbox">

Bu öğenin özelleştirmemiz gereken 3 bölümü vardır:

1. Onay kutusu öğesi
2. İlişkilendirilmiş etiketler
3. Vurgulama efekti

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, daha sonra tanıtacağımız sözde öğe için hazırlanır. seçin. Aksi takdirde genelde veya düşünceli bir tarzda ya da küçük yazılar. İmlecin işaretçi olmasını seviyorum. dış çizgi ofsetleri, varsayılan onay kutuları çok küçük ve accent-color destekleniyor ise, bu onay kutusunu işaretleyin.

Onay kutusu etiketleri

Onay kutularına etiket eklemek 2 neden önemlidir. Birincisi, "ne için açık veya kapalı" cevabını vermek üzere onay kutusu değerinin ne için kullanıldığını gösterir. İkincisi kullanıcı deneyimi için: Web kullanıcıları kullanıcı deneyimiyle etkileşime onay kutularını işaretleyebilirsiniz.

<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"> kimliğine göre bir onay kutusuna işaret eden bir for özelliği ekleyin. Onay kutunuzda hem adı hem de kimliği iki katına çıkarın URL'nin fare veya ekran okuyucu gibi çeşitli araç ve teknolojilerde bulunduğundan emin olun: <input type="checkbox" id="text-notifications" name="text-notifications"> :hover, :active ve daha fazlası bağlantıyla ücretsiz olarak geliyor. etkileşime geçmenin yollarını gösterir.

Onay kutusu vurgulama

Arayüzlerimin tutarlı olmasını istiyorum ve kaydırma çubuğu onay kutusuyla birlikte kullanmak istediğim küçük resim vurgulamasını seçiyorum. Küçük resim gölgeyi ölçeklendirmek için box-shadow özelliğini ve spread özelliğini kullanabilirsiniz. aşağı tüketim. Ancak bu etki burada işe yaramaz çünkü onay kutularımız be, kare.

Aynı görsel efekti yapay bir öğeyle ve bir bir o kadar da zor değil.

@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;
}

Daire sözde öğe oluşturmak basit bir iştir, ancak bunu yerleştirmek arka uçta olması daha zordu. İşte önceki ve ben düzelttikten sonra:

Bu kesinlikle mikro bir etkileşim, ancak görselliği korumak benim için önemli. sağlayabilir. Animasyon ölçeklendirme tekniği, başka yer. Özel bir özelliği yeni bir değere ayarladık ve CSS'nin bu özelliği geçirmesine izin verdik göre yapılır. Buradaki temel özellik translateZ(-1px)'dir. İlgili içeriği oluşturmak için kullanılan bir 3D alan oluşturdu ve bu sözde öğe alt öğeyi z-uzağının içine biraz geri gelecek şekilde yerleştirin.

Erişilebilirlik

YouTube videosunda fare, klavye ve bilgisayar ekran okuyucu etkileşimleri gibi çeşitli faktörlerden yararlanabilirsiniz. Şimdi Arkadaş Bitkiler Projesi’nin buradan inceleyebilirsiniz.

HTML Öğe Seçimleri

<form>
<header>
<fieldset>
<picture>
<label>
<input>

Bunların her biri, kullanıcının göz atma aracı için ipuçları ve ipuçları içerir. Bazı öğeler etkileşim ipuçları sunar, bazıları etkileşimi bağlar ve bazıları da etkileşimin şekillenmesine erişilebilirlik ağacı oluşturabilirsiniz.

HTML Özellikleri

Ekran okuyucuların ihtiyaç duymadığı öğeleri gizleyebiliriz. Bu durumda kaydırma çubuğunun yanındaki simge:

<picture aria-hidden="true">

Yukarıdaki videoda, Mac OS'te ekran okuyucu akışı gösterilmektedir. Girişin odak doğrudan bir kaydırma çubuğundan diğerine geçer. Bunun nedeni, sonraki kaydırıcıya giden yolda durak olabilecek simge. Bu olmadan kullanıcının durup dinlemesi ve resmin ötesine geçip geçmemesi diğer kullanıcılar da göremeyebilir.

SVG, matematikten oluşan bir gruptur. Fareyle üzerine gelindiğinde açılan bir <title> öğesi ekleyelim başlık ve matematiğin neden olduğuna dair, okunabilir bir yorum:

<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 test edildiğinden emin olunması için oyun kumandalarında ve ekran okuyucularda oldukça iyi performans gösteriyor.

JavaScript

Parça dolgu renginin JavaScript'ten nasıl yönetildiğini ele almıştım. Şimdi <form> ile ilgili JavaScript'e bakalım:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

Formla etkileşimde bulunulduğu ve form değiştirildiğinde, konsol bu formu şu şekilde günlüğe kaydeder: sunucuya gönderilmeden önce kolayca incelenebilmesi için bir nesneye ekleyebilirsiniz.

Sonuç

Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? Bu, projeyle ilgili bileşenlerine ayıralım. İlk sürümü kim, çerçevenizi seçin. 🙂

Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup beni tweet'le bağlantıları eklerim Aşağıdaki Topluluk remiksleri bölümüne göz atın!

Topluluk remiksleri

• @tomayac, fareyle üzerine gelin! Bu sürümde, öğeler: demo ve kaynak.