Tercih edilen medya sorgularıyla kullanıcıya göre uyarlanabilir arayüzler oluşturma

1. Başlamadan önce

Kullanıcılar günümüzde cihazlarında birçok tercih belirtiyor. İşletim sisteminin ve uygulamaların kendilerine aitmiş gibi görünmesini ve hissettirmesini isterler. Kullanıcıya göre uyarlanabilen arayüzler, kullanıcı deneyimini iyileştirmek, kullanıcıların kendilerini daha rahat hissetmelerini ve arayüzü kendilerine aitmiş gibi hissetmelerini sağlamak için bu tercihleri kullanmaya hazır olan arayüzlerdir. Doğru şekilde yapıldığında kullanıcı, kullanıcı deneyiminin uyarlanmakta olduğunu veya uyarlandığını fark etmeyebilir.

Kullanıcı tercihleri

Cihaz donanımı seçimi bir tercihtir, işletim sistemi bir seçimdir, uygulama ve işletim sistemi renkleri tercihtir, uygulama ve işletim sistemi belge dilleri tercihtir. Kullanıcıların tercihleri her geçen gün artıyor. Web sayfaları her şeye erişemez ve bunun iyi bir nedeni vardır.

CSS tarafından kullanılabilecek kullanıcı tercihlerine dair birkaç örneği aşağıda bulabilirsiniz:

• Cihaz görüntü alanı boyutu
• Cihaz yönü (dikey | yatay)
• Yazı tipi boyutu
• Online/çevrimdışı
• Ağ kalitesi
• Renk şeması (açık | koyu)
• Arayüz animasyonları (açık | azaltılmış)
• Giriş kalitesi (fare | dokunma | ekran kalemi)
• Doküman yönü ve yazma modu (soldan sağa, yukarıdan aşağıya vb.)
• Görüntü modu (tam ekran | bağımsız | minimal kullanıcı arayüzü | tarayıcı)

CSS'ye yakında eklenecek kullanıcı tercihlerine dair birkaç örneği aşağıda bulabilirsiniz:

• Azaltılmış veri/lite modu
• Renk aralığı
• Kontrast (daha az | daha fazla | azalt)
• Renkler (kullanıcının renklerini sayfaya zorunlu kılar)
• Şeffaflık (açık | azaltılmış)

Medya sorguları

CSS ve web, medya sorguları aracılığıyla uyarlama ve duyarlılık sağlar. Medya sorguları, bir koşul doğruysa bir dizi stil içeren bildirimsel bir koşuldur. En yaygın olanı, cihazın görüntü alanı boyutuna ilişkin bir koşuldur: Boyut 800 pikselden küçükse bu durum için daha iyi stiller vardır.

Kullanıcıya uyarlanabilir

Uyumsuz arayüz, kullanıcı ziyaret ettiğinde hiçbir şeyi değiştirmez. Temelde herkese aynı deneyimi sunar ve ayarlama yapma imkanı tanımaz. Kullanıcıya uyarlanabilir bir arayüz, beş farklı kullanıcı için beş farklı görünüm ve stile sahip olabilir. İşlevsellik aynıdır ancak estetik daha iyi algılanır ve kullanıcı arayüzünü ayarlayabilen kullanıcılar için arayüzün kullanılabilirliği daha kolaydır.

Ön koşullar

• HTML ve CSS bilgisi
• Google Chrome Geliştirici Araçları gibi geliştirici araçları hakkında bilgi sahibi olma

Ne oluşturacaksınız?

Bu codelab'de, aşağıdakilere uyum sağlayan kullanıcıya uyarlanabilir bir form oluşturacaksınız:

• Form kontrolleri ve çevreleyen kullanıcı arayüzü öğeleri için açık ve koyu renk şeması sunarak sistem renk şeması tercihi
• Birden fazla animasyon türü sunarak sistem hareket tercihlerini
• Mobil ve masaüstü deneyimleri sunmak için küçük ve büyük cihaz görüntü alanları
• Klavye, ekran okuyucu, dokunma ve fare gibi çeşitli giriş türleri
• Herhangi bir dil ve okuma/yazma modu

Neler öğreneceksiniz?

Bu codelab'de, kullanıcıya uyarlanabilir bir form oluşturmanıza yardımcı olacak modern web özellikleri hakkında bilgi edineceksiniz. Şunları öğreneceksiniz:

• Açık ve koyu temalar oluşturma
• Animasyonlu ve erişilebilir formlar oluşturma
• Düzen duyarlı formlar
• Göreceli birimler ve mantıksal özellikler kullanın.

Bu codelab, kullanıcıya uyarlanabilir arayüzlere odaklanır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve yalnızca kopyalayıp yapıştırmanız için paylaşılmıştır.

Gerekenler

• Google Chrome 89 ve sonraki sürümler veya tercih ettiğiniz tarayıcı

2. Kurun

Kodu alma

Bu proje için ihtiyacınız olan her şey bir GitHub deposunda yer alır. Başlamak için kodu alıp tercih ettiğiniz geliştirici ortamında açmanız gerekir. Alternatif olarak, bu Codepen'i çatallayabilir ve oradan çalışabilirsiniz.

Önerilen: Codepen'i kullanın

1. Yeni bir tarayıcı sekmesi açın.
2. https://codepen.io/argyleink/pen/abBMeeq adresine gidin.
3. Hesabınız yoksa çalışmanızı kaydetmek için bir hesap oluşturun.
4. Fork'u (Çatalla) tıklayın.

Alternatif: Yerel olarak çalışma

Kodu indirip yerel olarak çalışmak istiyorsanız Node.js'nin 12 veya daha yeni bir sürümüne ve kullanıma hazır bir kod düzenleyiciye ihtiyacınız vardır.

Git'i kullanma

1. https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces adresini ziyaret edin.
2. Depoyu bir klasöre klonlayın.
3. Varsayılan dalın beginning olduğuna dikkat edin.

Dosyaları kullanma

Kaynak kodu indirme

1. İndirilen ZIP dosyasını bir klasöre açın.

Projeyi çalıştırma

Yukarıdaki adımlardan birinde oluşturulan proje dizinini kullanın, ardından:

1. Sunucuyu çalıştırmak için gereken bağımlılıkları yüklemek üzere npm install komutunu çalıştırın.
2. Sunucuyu 3000 numaralı bağlantı noktasında başlatmak için npm start komutunu çalıştırın.
3. Yeni bir tarayıcı sekmesi açın.
4. http://localhost:3000 adresine gidin.

HTML hakkında

Bu derste, kullanıcıya uyarlanabilir etkileşimi desteklemek için kullanılan HTML'nin özellikleri ele alınacaktır. Bu atölye çalışmasında özellikle CSS'ye odaklanılmaktadır. Form veya web sitesi oluşturma konusunda yeniyseniz sağlanan HTML'yi incelemeniz önerilir. HTML öğesi seçimleri, erişilebilirlik ve düzen açısından kritik öneme sahip olabilir.

Başlamaya hazır olduğunuzda, dinamik ve uyarlanabilir bir kullanıcı deneyimine dönüştüreceğiniz iskelet budur.

3. Uyarlanabilir etkileşimler

Git dalı: beginning

Bu bölümün sonunda ayarlar formunuz şunlara uyum sağlayacak:

• Oyun kumandası + klavye
• Fare + dokunma
• Ekran okuyucu veya benzer bir yardımcı teknoloji

HTML özellikleri

Kaynak kodda sağlanan HTML, form girişlerinizi gruplandırmaya, sıralamaya ve etiketlemeye yardımcı olacak semantik öğeler önceden seçildiği için harika bir başlangıç noktasıdır.

Formlar genellikle bir işletme için önemli bir etkileşim noktasıdır. Bu nedenle, formun web'in kolaylaştırabileceği birçok giriş türüne uyum sağlayabilmesi önemlidir. Örneğin, mobil cihazlarda dokunarak kullanılabilen bir formun olması muhtemelen önemlidir. Bu bölümde, düzen ve stilden önce uyarlanabilir giriş kullanılabilirliğini sağlarsınız.

Girişleri gruplandırma

HTML'deki <fieldset> öğesi, benzer girişleri ve kontrolleri bir arada gruplandırmak için kullanılır. Formunuzda biri ses düzeyi, diğeri bildirimler için olmak üzere iki grup var. Bu, kullanıcı deneyimi açısından önemlidir. Böylece tüm bölümler atlanabilir.

Öğeleri sıralama

Öğeler mantıksal bir sırayla sunulur. Bu, kullanıcı deneyimi açısından önemlidir. Böylece görsel deneyim sırası oyun kumandası, klavye veya ekran okuyucu teknolojileri için aynı veya benzer olur.

Klavye etkileşimi

Web kullanıcıları, formlarda sekme tuşuyla gezinmeye alışmıştır. Beklenen HTML öğelerini sağlarsanız tarayıcı bu işlemi gerçekleştirir. <button>, <input>, <h2> ve <label> gibi öğeler kullanıldığında bunlar otomatik olarak klavye veya ekran okuyucu hedefleri haline gelir.

Yukarıdaki videoda, sekme tuşu ve okların arayüzde nasıl gezinebileceği ve değişiklik yapabileceği gösterilmektedir. Mavi çerçeve, giriş öğelerinin etrafında çok sıkı. Bu etkileşimin biraz nefes almasını sağlamak için aşağıdaki stilleri ekleyin.

style.css

input {
  outline-offset: 5px;
}

Deneyebileceğiniz şeyler

1. index.html içinde kullanılan HTML öğelerini inceleyin.
2. Tarayıcınızda demo sayfasını tıklayın.
3. Öğe odağını formda taşımak için tab ve shift+tab tuşlarına basın.
4. Kaydırma çubuklarının ve onay kutularının değerlerini değiştirmek için klavyeyi kullanın.
5. Bluetooth oyun kumandası bağlayın ve formda öğe odağını hareket ettirin.

Fare etkileşimi

Web kullanıcıları, formlarla farelerini kullanarak etkileşim kurmaya alışmıştır. Formda farenizi kullanmayı deneyin. Kaydırma çubukları ve onay kutuları işe yarar ancak daha iyisini yapabilirsiniz. Bu onay kutuları, fareyle tıklamak için oldukça küçüktür.

Etiketlerinizi ve girişlerini bağlamak için iki kullanıcı deneyimi özelliğinden yararlanabilirsiniz.

İlk özellik, etkileşimde bulunulacak seçeneklerin olması ve etiketin fareyle hedeflenmesinin küçük bir kareye göre çok daha kolay olmasıdır.

İkinci özellik ise bir etiketin tam olarak hangi giriş için olduğunu bilmektir. Şu anda CSS olmadan, bazı özellikler sağlamadığınız sürece hangi etiketin hangi onay kutusu için olduğunu belirlemek oldukça zordur.

Bu açık bağlantı, bir sonraki bölümde ele alınan ekran okuyucularla ilgili deneyimi de iyileştirir.

İlişkisiz: Öğeleri birbirine bağlayan özellik yok.

<input type="checkbox">
<label>...</label>

İlişkili: Öğeleri birbirine bağlayan özellikler

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

Sağlanan HTML'de tüm girişler ve etiketler zaten ilişkilendirilmiş. Bu kavram sizin için yeniyse daha fazla araştırma yapmanızda fayda var.

Deneyebileceğiniz şeyler

1. Farenizle bir etiketin üzerine gelin ve onay kutusunun vurgulandığını görün.
2. Onay kutusunu seçebilen tıklanabilir yüzey alanını görselleştirmek için Chrome Geliştirici Araçları ile bir etiket öğesini inceleyin.

Ekran okuyucu etkileşimi

Yardımcı teknoloji bu formla etkileşime girebilir ve birkaç HTML özelliğiyle kullanıcı deneyimini daha sorunsuz hale getirebilir.

Chrome'da ekran okuyucuyla mevcut formda gezinen kullanıcılar için <picture> öğesinde gereksiz bir duraklama oluyor (Chrome'a özgü değil). Ekran okuyucu kullanan bir kullanıcı, muhtemelen görme engeli nedeniyle ekran okuyucu kullanıyordur. Bu nedenle, bir resimde durmak faydalı olmaz. Bir özellik kullanarak öğeleri ekran okuyuculardan gizleyebilirsiniz.

index.html

<picture aria-hidden="true">

Artık ekran okuyucular, tamamen görsel olan öğeyi atlar.

Kaydırma çubuğu öğesi input[type="range"], özel bir ARIA özelliğine (aria-labelledby="media-volume") sahiptir. Bu, ekran okuyucunun kullanıcı deneyimini iyileştirmek için kullanacağı özel talimatlar sağlar.

Deneyebileceğiniz şeyler

1. Formda odağı taşımak için işletim sisteminizin ekran okuyucu teknolojisini kullanın.
2. Formda bazı ekran okuyucu yazılımlarını indirip deneyin.

4. Uyarlanabilir düzenler

Git dalı: layouts

Bu bölümün sonunda ayarlar sayfası:

• Özel özellikler ve kullanıcı göreli birimleri ile bir boşluk sistemi oluşturun.
• Esnek, duyarlı hizalama ve boşluklar için CSS Grid yazma
• Uluslararası düzeyde uyarlanabilir düzenler için mantıksal özellikleri kullanın.
• Kompakt ve geniş düzenler arasında geçiş yapmak için medya sorguları yazın.

Boşluk

Güzel bir düzenin anahtarı, sınırlı sayıda boşluk seçeneği kullanmaktır. Bu sayede içerikler doğal bir uyum ve ahenk yakalar.

Özel özellikler

Bu atölye, yedi özel nitelik boyutuna dayanmaktadır.

• Bunları style.css listesinin en üstüne taşıyın:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Adlandırma, kullanıcıların alanı tanımlamak için birbirleriyle konuşurken kullanacakları ifadelere yakındır. Ayrıca rem birimlerini yalnızca uyum sağlayan ve kullanıcının tercihini dikkate alan, okunaklı tam birim boyutlandırma için kullanırsınız.

Sayfa stilleri

Ardından, bazı doküman stillerini ayarlamanız, öğelerden kenar boşluklarını kaldırmanız ve yazı tipini güzel bir sans-serif olarak ayarlamanız gerekir.

• style.css alanına aşağıdakileri ekleyin:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Boşluk özel niteliklerini ilk kez kullandınız. Uzay yolculuğunuz başlar.

Tipografi

Bu düzenin yazı tipi uyarlanabilir. system-ui anahtar kelimesi, kullanıcının işletim sisteminin en uygun arayüz yazı tipi olarak belirlediği yazı tipini kullanır.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1, h2 ve h3 stilleri küçük ve stilistik. Ancak small öğesi, metin kaydırıldığında ek line-height gerektirir. Aksi takdirde çok sıkışık olur.

Mantıksal özellikler

body üzerindeki padding öğesinin, tarafı belirtmek için mantıksal özellikleri (block-start, block-end) kullandığına dikkat edin. Mantıksal özellikler, codelab'in geri kalanında yoğun bir şekilde kullanılacaktır. Onlar da rem birimi gibi kullanıcıya uyum sağlar. Bu düzen başka bir dile çevrilebilir ve kullanıcının ana dilinde alışık olduğu doğal yazı ve belge yönlerine ayarlanabilir. Mantıksal özellikler, boşluk, yön veya hizalama için tek bir tanımla bu desteği sağlar.

Izgara ve flexbox zaten akışa göredir. Yani bir dil için yazılan stiller bağlamsal olur ve diğer diller için uygun şekilde uygulanır. Uyarlanabilir yön; içerik, doküman yönüne göre akar.

Mantıksal özellikler, daha az stil yazarak daha fazla kullanıcıya ulaşmanızı sağlar.

CSS Grid Layouts

grid CSS özelliği, karmaşık görevleri çözmek için birçok özelliğe sahip güçlü bir düzen aracıdır. Birkaç basit ızgara düzeni ve bir karmaşık düzen oluşturacaksınız. Ayrıca dıştan içe, makro düzenlerden mikro düzenlere doğru çalışacaksınız. Boşluk özel nitelikleriniz yalnızca dolgu veya kenar boşluğu değerleri olarak değil, sütun boyutları, kenarlık yarıçapları ve daha fazlası olarak da kritik hale gelecektir.

Aşağıda, Chrome Geliştirici Araçları'nın her bir CSS ızgara düzenini aynı anda yer paylaşımlı olarak gösterdiği bir ekran görüntüsü verilmiştir:

1. style.css öğesine aşağıdaki stillerin her birini ekleyerek devam edin:

<main>

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

Izgara, varsayılan olarak her alt öğeyi kendi satırına yerleştirir. Bu nedenle, öğeleri üst üste yığmak için idealdir. Ayrıca gap kullanmanın ek avantajına da sahiptir. Daha önce, * seçiciyle tüm öğelerde margin: 0 değerini ayarlamıştınız. Bu, artık boşluklarınız için gap kullandığınızdan önemlidir. Boşluk, yalnızca bir kapsayıcıdaki alanı yönetmek için tek bir yer değil, aynı zamanda akışla da ilgilidir.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

Bu, tasarımın en zorlu tablo düzenidir ancak en heyecan verici duyarlı yönü de budur:

• max-width, düzen algoritmasının ne kadar büyük olabileceğine karar verirken kullanacağı bir değer sağlar.
• gap, özel özellikleri kullanıyor ve column-gap'den farklı bir row-gap iletiyor.
• align-items, öğe yüksekliklerini uzatmamak için flex-start olarak ayarlanır.
• grid-template-columns, karmaşık bir söz dizimine sahiptir ancak hedefi basittir: Sütunları 35ch genişliğinde ve en az 10ch olacak şekilde ayarlayın. Yer varsa öğeleri sütunlara, yoksa satırlara yerleştirin.

2. Tarayıcıyı yeniden boyutlandırmayı test edin. Formun küçük bir görüntü alanında satırlara daraldığını, ancak yer varsa yeni sütunlara aktığını ve medya sorguları olmadan uyum sağladığını görebilirsiniz. Medya sorgusu içermeyen duyarlı stiller stratejisi, özellikle bileşenler veya içerik odaklı düzenler için kullanışlıdır.

<section>

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

Her bölüm, alt öğeler arasında orta düzeyde boşluk bulunan bir satır tablosu olmalıdır.

<header>

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

Her başlık, alt öğeler arasında çok küçük boşluklar bulunan bir satır ızgarası olmalıdır.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Bu düzen, kart benzeri bir görünüm oluşturmaktan ve girişleri gruplandırmaktan sorumludur. overflow: hidden ve gap: 1px, sonraki bölümde renk eklediğinizde netleşir.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

Bu düzen, simgeyi ve onay kutusunu ilişkili etiketleri ve kontrolleriyle ortalamaktan sorumludur. Izgara şablonunun ilk sütunu olan var(--space-lg), simgeden daha geniş bir sütun oluşturur. Böylece alt öğe, ortalanabileceği bir yere sahip olur.

Bu düzende, özel özelliklerde kaç tasarım kararının verildiği gösterilir. Dolgu, boşluklar ve sütun, önceden tanımladığınız değerler kullanılarak sistemin uyumu içinde boyutlandırıldı.

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

Bu düzen; ayarlar, simge dairesinin boyutu, daire şekli oluşturma ve bir resmi bu dairenin içinde ortalama işlemlerinden sorumludur.

<picture> ve [checkbox] hizalaması

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

Bu düzende, :is sözde seçici kullanılarak ortalama işlemi yalnızca resim ve onay kutusu öğelerine uygulanır.

3. picture > svg seçicisini .fieldset-item svg ile şu şekilde değiştirin:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Bu, SVG simge boyutunu, boyut sistemindeki bir değere ayarlar.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

Bu yardımcı sınıf, onay kutusu etiket öğelerinin onay kutusu için yardımcı metni boşlukla ayırması amacıyla kullanılır.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

Bu stiller, boşluk kümemizdeki değerleri kullanarak onay kutusunun boyutunu artırır.

Deneyebileceğiniz şeyler

1. Chrome Geliştirici Araçları'nı açın ve Öğeler panelindeki HTML'de Izgara rozetlerini bulun. Hata ayıklama araçlarını etkinleştirmek için bu düğmeleri tıklayın.
2. Chrome Geliştirici Araçları'nı açın ve Stiller panelinde bir boşluğun üzerine gelin.
3. Chrome Geliştirici Araçları'nı açın, Stiller bölmesine gidin ve Stiller'den Düzenler'e geçin. Ayarlarını değiştirerek ve düzenleri etkinleştirerek bu alanı keşfedin.

Medya sorguları

Aşağıdaki CSS, stilleri görüntü alanı boyutuna ve yönüne göre uyarlar. Bu sayede, boşluklar veya düzen, görüntü alanı bağlamına göre en uygun şekilde ayarlanır.

Not: Her bölümün CSS'si, style.css içinde değiştirdiği seçiciden sonra eklenmelidir.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

Bu iki medya sorgusu, daha fazla görüntü alanı mevcut olduğundan main öğesine daha fazla dolgu sağlar. Bu, başlangıçta küçük bir dolgu miktarıyla kompakt bir şekilde başladığı ancak daha fazla alan kullanılabilir hale geldikçe daha geniş bir alana yayıldığı anlamına gelir.

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

Form, auto-fit ile görüntü alanı boyutuna zaten duyarlıydı ancak mobil cihazda test edilirken cihaz yatay konuma getirildiğinde iki form grubu yan yana yerleştirilmiyor. orientation medya sorgusu ve görüntü alanı genişliği kontrolüyle bu yatay düzene uyum sağlayın. Şimdi, cihaz yatay modda ve en az 640 piksel genişliğindeyse --repeat özel niteliğini auto-fit anahtar kelimesi yerine bir sayıya geçirerek iki sütunu zorunlu kılın.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

Bu medya sorgusu, daha fazla görüntü alanı mevcut olduğunda kullanılan başka bir boşluk genişletmesidir. Izgara şablonu, şablondaki daha büyük bir özel niteliği (var(--space-xxl)) kullanarak ilk sütunu genişletir. Dolgu, daha büyük özel özelliklere de uygulanır.

Deneyebileceğiniz şeyler

1. Tarayıcınızı genişletip daraltın ve alanın nasıl ayarlandığını izleyin.
2. Mobil cihazda önizleme
3. Mobil cihazda yatay modda önizleme

5. Uyarlanabilir renk

Git dalı: colors

Bu bölümün sonunda ayarlar formunuz:

• Koyu ve açık renk tercihlerine uyum sağlama
• Markanın onaltılık renk kodundan türetilen bir renk şeması kullanın.
• Erişilebilir renkler kullanın.

HSL

Bir sonraki bölümde, açık ve koyu tema oluşturmanıza yardımcı olması için HSL ile bir renk sistemi oluşturacaksınız. CSS'deki şu temel kavram üzerine kurulmuştur: calc().

HSL; ton, doygunluk ve parlaklık anlamına gelir. Ton, saatteki bir nokta gibi bir açıdır. Doygunluk ve açıklık ise yüzdelerdir. calc(), yüzdeler ve açılarla ilgili matematik işlemleri yapabilir. CSS'de bu yüzdeler üzerinden açıklık ve doygunluk hesaplamaları yapabilirsiniz. Renk kanalı hesaplamalarını özel özelliklerle birleştirerek varyantların temel bir renkten hesaplandığı modern ve dinamik bir renk şeması elde edersiniz. Bu sayede, kodda çok sayıda rengi yönetmek zorunda kalmazsınız.

Özel özellikler

Bu bölümde, stillerinizin geri kalanında kullanılacak bir dizi özel özellik oluşturacaksınız. Daha önce :root etiketinde yaptığınız boşluk ayarına benzer şekilde renkler ekleyeceksiniz.

Uygulamanızın marka renginin #0af olduğunu varsayalım. İlk göreviniz, şu onaltılık renk değerini HSL renk değerine dönüştürmek: hsl(200 100% 50%). Bu dönüşüm, markanızın renk kanallarını HSL olarak gösterir. Bu kanalları kullanarak calc() markanızı destekleyen çeşitli renkleri hesaplayabilirsiniz.

Not: Bu uygulama koyu renk şemasını tercih eder, ardından açık temaya uyum sağlar. İlk renk şemasını oluştururken bu önemlidir. Bu şema koyu tema olacaktır.

Bu bölümdeki aşağıdaki kod bloklarının her biri aynı :root seçiciye eklenmelidir.

Marka kanalları

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Üç HSL kanalı çıkarıldı ve kendi özel niteliklerine yerleştirildi.

1. Üç özelliği de olduğu gibi kullanın ve marka rengini yeniden oluşturun.

Marka

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Renk şemanız varsayılan olarak koyu olduğundan, koyu yüzeylerde kullanılacak renklerin doygunluğunu azaltmak iyi bir uygulamadır (aksi takdirde gözü yorabilir veya erişilemez olabilir). Marka renginizin doygunluğunu azaltmak için ton ve açıklığı olduğu gibi kullanır, ancak doygunluğu bölme işlemiyle yarıya indirirsiniz: calc(var(--saturation) / 2). Artık marka renginiz temaya uygun ancak kullanım için doygunluğu azaltılmış durumda.

Metin

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Koyu temamızdaki okuma metni için marka rengini temel olarak kullanırsınız ancak bundan neredeyse beyaz renkler oluşturursunuz. Birçok kullanıcı, metnin beyaz olduğunu düşünür ancak aslında çok açık mavidir. Aynı renk tonunu kullanmak, tasarımda uyum sağlamanın etkili bir yoludur. --text1 %85 beyaz, --text2 ise %65 beyazdır ve her ikisinin de doygunluğu çok düşüktür.

2. Kodu projenize ekledikten sonra Chrome Geliştirici Araçları'nı açın ve bu kanal değerlerini değiştirerek denemeler yapın. HSL ve kanallarının birbiriyle nasıl etkileşim kurduğunu deneyimleyin. Belki de daha fazla veya daha az doygunluk tercih ediyorsunuzdur.

Platform

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

Koyu modda yüzeyler koyu olacağından metin çok açık renklidir. Metin renklerinin yüksek parlaklık değerleri (%85 ve daha yüksek) kullandığı yerlerde yüzeyler daha düşük değerler (%30 ve daha düşük) kullanır. Yüzey ve metin arasındaki açıklık aralıkları arasında sağlıklı bir fark olması, kullanıcıların okuyabileceği erişilebilir renkler elde edilmesine yardımcı olur.

3. Renklerin %10 parlaklık ve %10 doygunlukla en koyu griyle başladığına, ardından daha açık hale geldikçe doygunluğun azaldığına dikkat edin. Her yeni yüzey, bir öncekinden %5 daha hafiftir. Daha açık yüzeylerde doygunluk da biraz azaltılır. Yüzeylerinizin doygunluğunu %10'a ayarlamayı deneyin. Daha çok mu yoksa daha az mı beğendiniz?

Açık tema

Koyu temayı belirten sağlıklı bir metin ve yüzey renkleri kümesiyle, prefers-color-scheme medya sorgusundaki renk özel niteliklerini güncelleyerek açık tema tercihine uyum sağlama zamanı geldi.

Renklerin kontrastını korumak için yüzeyleriniz ile metin renkleriniz arasındaki parlaklık değerlerinde büyük bir fark bırakma tekniğini kullanacaksınız.

Marka

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

İlk olarak marka rengini seçelim. Doygunluğun tam gücüne geri getirilmesi gerekiyor.

Metin

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

Koyu temada çok açık mavi metin renkleri olduğu gibi, açık temada da metin renkleri çok koyu mavidir. HSL renginin açıklık değerlerinin %10 ve %30 olduğunu görmek, bu renklerin koyu olduğunu gösterir.

Yüzey

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

Bu yüzey renkleri, kalıpları ilk kıran renklerdir. Şimdiye kadar oldukça makul ve doğrusal görünen her şey artık bozuldu. HSL açık tema renk kombinasyonlarını doğrudan kodda deneyebilir, parlaklık ve doygunluğu ayarlayarak çok soğuk veya mavi olmayan hoş bir açık renk şeması oluşturabilirsiniz.

Renk sistemini kullanma

Renkler tanımlandığına göre artık bunları kullanabilirsiniz. Markanızın dikkat çekici bir vurgu rengi, iki metin rengi ve dört yüzey rengi var.

• Aşağıdaki kod bölümleri için eşleşen seçiciyi bulun ve renk CSS'sini mevcut kod bloğuna ekleyin.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

Sayfanın birincil renkleri, oluşturduğunuz ilk yüzey ve metin renkleridir. Bu renkler, varsayılan kontrast miktarını da maksimuma çıkarır. Açık ve koyu tema arasında geçiş yapma özelliğini test etmeye başlayabilirsiniz.

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

Bu, tasarımınızın kart benzeri öğesidir. 1 piksellik kenarlık ve 1 piksellik boşluk aynı renktedir ve her .fieldset-item öğesinin arkasındaki yüzeyi temsil eder. Bu sayede hoş bir görsel uyum yakalanır ve düzeni korumak kolaylaşır.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

Her form girişi kendi yüzeyinde yer alır. Umarım bunların nasıl bir araya geldiğini ve parlaklık varyasyonlarının nasıl katmanlandığını görüyorsunuzdur.

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

Bu, simgeyi çevreleyen daire şeklini göstermek için yapılan stilistik bir seçimdir. Bunun nedeni, bir sonraki bölümde etkileşim eklediğinizde netleşecektir.

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

Formdaki simgeler, --text2 alternatif metnini kullanacak şekilde ayarlanmış. Dolu simgelerin metinden biraz daha açık renkte olduğu tasarımlar, simgelerin çok ağır görünmesini engeller.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

Bu seçici, içindeki girişlerden biriyle etkileşim kurulduğunda giriş kapsayıcı öğesiyle eşleşir ve SVG'yi markanızın vurgu rengiyle vurgulamak için hedef alır. Bu sayede, girişlerle etkileşimde bulunulduğunda ilgili simgeler vurgulanarak formun kullanıcı deneyimi iyileştirilir.

<small>

small {
  color: var(--text2);
}

Küçük metin. Başlıklara ve paragraflara (birincil içerik) kıyasla biraz daha sönük olmalıdır.

Koyu form kontrolleri

:root {
  color-scheme: dark light;
}

Bu güzel son dokunuş, tarayıcıya bu sayfanın hem koyu hem de açık temaları desteklediğini bildirir. Tarayıcı, koyu form kontrolleriyle bizi ödüllendirir.

6. Uyarlanabilir animasyon

Git dalı: animations

Bu bölümün sonunda ayarlar sayfası:

• Kullanıcının hareket tercihlerine uyum sağlama
• Kullanıcı etkileşimine yanıt verme

İndirgenmiş hareket ve hareket yok

İşletim sisteminde hareket için bulunan kullanıcı tercihi, animasyon yok değeri sunmuyor. Bu seçenek, hareketi azaltmak için kullanılır. Çapraz geçiş animasyonları, renk geçişleri ve daha fazlası, daha az hareket tercih eden kullanıcılar için hâlâ tercih edilebilir.

Bu ayarlar sayfasında, ekranda hareket açısından çok fazla hareket yoktur. Hareket, öğe kullanıcıya doğru ilerliyormuş gibi bir ölçek efekti gibidir. CSS kodunuzu, azaltılmış harekete uyum sağlayacak şekilde ayarlamak çok kolaydır. Bu sayede ölçeklendirme geçişlerini azaltabilirsiniz.

Etkileşim stilleri

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Kullanıcı, kart görünümlü <fieldset> öğelerden birinin girişleriyle etkileşimde bulunduğunda kaldırma efekti eklenir. Arayüz, bir öğeyi öne çıkararak bağlamsal form grubu kullanıcıya yaklaştırılırken kullanıcının odaklanmasına yardımcı olur.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

Kullanıcı bir girişle etkileşimde bulunduğunda, belirli öğe katmanının arka planı vurgulanmış bir yüzey rengine dönüşür. Bu, kullanıcının dikkatini çekmeye ve girişin alındığını bildirmeye yardımcı olan başka bir destekleyici arayüz özelliğidir. Çoğu durumda renk geçişlerinin azaltılması gerekmez.

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

Burada, yalnızca kullanıcının azaltılmış hareketle ilgili tercihi yoksa kullanacağınız bir clip-path animasyonu gösterilmektedir. İlk seçici ve stiller, daire kırpma yolunu %10 daraltır ve bazı geçiş parametrelerini ayarlar. İkinci seçici ve stil, kullanıcıların bir girişle etkileşimde bulunmasını bekler, ardından simgenin dairesini büyütür. Tamamlandığında hafif ama hoş bir efekt gösterilir.

7. Tebrikler

Git dalı: complete

Tebrikler, kullanıcıya uyum sağlayan bir arayüzü başarıyla oluşturdunuz.

Artık çeşitli kullanıcı senaryolarına ve ayarlarına uyum sağlayan arayüzler oluşturmak için gereken temel adımları biliyorsunuz.