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

1. Başlamadan önce

Kullanıcılar, cihazlarında birçok tercih belirtiyor. İşletim sisteminin ve uygulamaların kendilerine aitmiş gibi görünmesini ve hissettirmesini isterler. Kullanıcıya uyarlanabilir arayüzler, kullanıcı deneyimini iyileştirmek, daha samimi ve kişisel hale getirmek için bu tercihleri kullanmaya hazır olan arayüzlerdir. Doğru şekilde yapıldığında, kullanıcı deneyiminin uyarlanmakta olduğunu veya uyarlanmış olduğunu kullanıcı fark etmeyebilir.

Kullanıcı tercihleri

Cihaz donanımı tercihtir, işletim sistemi seçimdir, uygulama ve işletim sistemi renkleri tercihtir, uygulama ve işletim sistemi belge dilleri tercihtir. Kullanıcıların tercihleri giderek artıyor. Bir web sayfası her şeye erişemez ve bunun iyi bir nedeni vardır.

CSS'nin kullanabileceği 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 | kalem)
• Belge yönü ve yazma modu (soldan sağa, yukarıdan aşağıya vb.)
• Görüntüleme modu (tam ekran | bağımsız | minimal kullanıcı arayüzü | tarayıcı)

CSS'ye yakında eklenecek kullanıcı tercihlerinden bazı örnekleri aşağıda bulabilirsiniz:

• Veri tasarrufu / Basit mod
• Renk aralığı
• Kontrast (azalt | artır)
• Renkler (kullanıcının renklerini sayfaya uygular)
• Şeffaflık (açık | azaltılmış)

Medya sorguları

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

Kullanıcıya uyarlanabilir (User-adaptive)

Uyarlanmayan bir arayüz, kullanıcı ziyaret ettiğinde hiçbir şeyi değiştirmeyen, temelde herkese aynı deneyimi sunan ve ayarlama olanağı sunmayan bir arayüzdür. 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 görünüm 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

Ne oluşturacaksınız?

Bu codelab'de, aşağıdakilere uyum sağlayan ve kullanıcıya göre uyarlanabilen bir form oluşturacaksınız:

• Form denetimleri ve etrafındaki kullanıcı arayüzü öğeleri için açık ve koyu renk şeması sunan sistem renk şeması tercihi
• Birden fazla animasyon türü sunan sistem hareketi tercihleri
• Mobil ve masaüstü deneyimleri sunan 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 göre uyarlanabilen bir form oluşturmanıza yardımcı olacak modern web özellikleri hakkında bilgi edineceksiniz. Öğreneceğiniz konular:

• Açık ve koyu temalar oluşturma
• Animasyonlu ve erişilebilir formlar oluşturma
• Duyarlı formları düzenleme
• Göreli birimleri ve mantıksal özellikleri kullanma

Bu codelab, kullanıcılara göre uyarlanabilen arayüzlere odaklanmaktadı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. Hazırlanın

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 en sevdiğiniz geliştirme ortamında açmanız gerekir. Alternatif olarak, bu Codepen'i çatallayıp 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ışmayı kaydetmek için hesap oluşturun.
4. Fork'u (Çatal) tıklayın.

Alternatif: Yerel olarak çalışma

Kodu indirip yerel olarak çalışmak istiyorsanız Node.js sürüm 12 veya daha yeni bir sürümün yanı sıra bir kod düzenleyiciyi kurup hazır hale getirmeniz gerekir.

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 indir

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

Projeyi yürütme

Yukarıdaki adımlardan birinde oluşturulan proje dizinini kullanın ve 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 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 göre uyarlanabilen etkileşimi desteklemek için kullanılan HTML'nin yönleri ele alınacaktır. Bu atölye çalışması özellikle CSS'ye odaklanmaktadı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, bu iskeleti dinamik ve uyarlanabilir bir kullanıcı deneyimine dönüştüreceksiniz.

3. Uyarlanabilir etkileşimler

Git dalı: beginning

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

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

HTML'deki özellikler

Kaynak kodunda sağlanan HTML, form girişlerinizi gruplandırmanıza, sıralamanıza ve etiketlemenize yardımcı olacak semantik öğeler önceden seçildiği için mükemmel bir başlangıç noktasıdır.

Formlar genellikle işletmeler 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, dokunmatik ekranlı mobil cihazlarda kullanılabilen bir formun olması önemlidir. Bu bölümde, düzen ve stilden önce uyarlanabilir girişin kullanılabilirliğini sağlarsınız.

Girişleri gruplandırma

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

Öğeleri sıralama

Öğelerin sırası mantıksal bir düzende sağlanır. Bu, kullanıcı deneyimi açısından önemlidir. Böylece görsel deneyim sırası, gamepad, klavye veya ekran okuyucu teknolojilerinde aynı ya da benzer olur.

Klavye etkileşimi

Web kullanıcıları, formlarda sekme tuşunu kullanarak ilerlemeye alışmıştır. Neyse ki beklenen HTML öğelerini sağlarsanız tarayıcı bu işlemi sizin yerinize yapar. <button>, <input>, <h2> ve <label> gibi öğeler otomatik olarak klavye veya ekran okuyucu hedefleri haline gelir.

Yukarıdaki videoda, sekme tuşu ve oklar kullanılarak arayüzde nasıl hareket edileceği ve değişikliklerin nasıl yapılacağı gösterilmektedir. Ancak mavi ana hat, giriş öğelerinin etrafında çok dar. Bu etkileşime biraz alan kazandırmak için aşağıdaki stilleri ekleyin.

style.css

input {
  outline-offset: 5px;
}

Deneyebilecekleriniz

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ı çalışıyor ancak daha iyi bir deneyim sunabilirsiniz. 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 nasıl yararlanabileceğinizi öğrenin.

İlk özellik, etkileşimde bulunulacak seçeneklere sahip olmaktır. Etiket, küçük bir kareye kıyasla fareyle hedeflemek için çok daha kolaydır.

İkinci özellik, 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 okuyucuların deneyimini de iyileştirir.

İlişkilendirilmemiş: Öğ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 ayrıntılı bir şekilde incelemeniz önerilir.

Deneyebilecekleriniz

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 formu kullanan kullanıcılar için <picture> öğesinde gereksiz bir duraklama oluyor (Chrome'a özgü değil). Ekran okuyucu kullanan bir kullanıcı, görme engeli nedeniyle ekran okuyucu kullanıyor olabilir. Bu nedenle, resimlerde duraklatma özelliği yararlı değildir. Öğeleri bir özellik kullanarak ekran okuyuculardan gizleyebilirsiniz.

index.html

<picture aria-hidden="true">

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

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

Deneyebilecekleriniz

1. Formda odaklanılacak yeri değiştirmek 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öreceli birimleri ile boşluk sistemi oluşturma
• Esnek ve duyarlı hizalama ve aralık için CSS Grid yazma
• Uluslararası olarak uyarlanabilir düzenler için mantıksal özellikler kullanın
• Kompakt ve geniş düzenler arasında uyum sağlamak için medya sorguları yazma

Aralık

İyi bir düzenin anahtarı, sınırlı bir aralık seçeneği paletidir. Bu sayede içerik, doğal bir uyum ve ahenk yakalar.

Özel özellikler

Bu atölye çalışması, yedi özel nitelik boyutundan oluşan bir set üzerine kurulmuştur.

• Bunları style.css'nın en üstüne yerleştirin:

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, insanların alanı tanımlamak için birbirleriyle konuşurken kullandığı kelimelere yakındır. Ayrıca, rem birimlerini yalnızca uyarlanabilen ve kullanıcı tercihlerini göz önünde bulunduran, okunabilir tam birim boyutlandırması için kullanırsınız.

Sayfa stilleri

Ardından, bazı belge stilleri ayarlamanız, öğelerdeki 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 özelliklerini ilk kez kullandınız. Bu işlemle 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 stilistiktir. Ancak small öğesi, metin kaydırıldığında ek line-height öğesine ihtiyaç duyar. Aksi takdirde çok sıkışık olur.

Mantıksal özellikler

body üzerindeki padding öğesinin, tarafı belirtmek için mantıksal özellikler (block-start, block-end) kullandığını unutmayın. Mantıksal özellikler, codelab'in geri kalanında yoğun bir şekilde kullanılacak. Bu birimler de 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ın olduğu doğal yazım ve belge yönlendirmelerine ayarlanabilir. Mantıksal özellikler, yalnızca bir boşluk, yön veya hizalama tanımıyla bu desteği etkinleştirir.

Grid ve flexbox zaten akışa göre olduğundan bir dil için yazılan stiller bağlama göre belirlenir ve diğer diller için uygun şekilde uygulanır. Uyarlanabilir yön; içerik, dokümanın 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 Düzenleri

grid CSS özelliği, karmaşık görevlerin üstesinden gelmek 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, makro düzenlerden mikro düzenlere doğru, dıştan içe doğru çalışacaksınız. Boşluk özel özellikleriniz 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 gelir.

Chrome Geliştirici Araçları'nın her CSS ızgara düzenini aynı anda kapladığına dair ekran görüntüsünü aşağıda bulabilirsiniz:

1. style.css'ye 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 yerleştirmek için idealdir. Ayrıca gap kullanmanın ek avantajını da sunar. Daha önce, aralığınız için gap kullandığınızdan artık önemli olan * seçiciyle tüm öğelerde margin: 0 ayarlamıştınız. Boşluk yalnızca bir kapsayıcıdaki alanı yönetmek için kullanılan bir yer değildir, 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 ızgara düzenidir ancak en heyecan verici duyarlı yönü oluşturur:

• max-width, düzen algoritmasının ne kadar büyük olabileceğine karar verirken kullanacağı bir değer sağlar.
• gap, özel özellikler kullanıyor ve column-gap'den farklı bir row-gap değeri iletiyor.
• Öğe yüksekliklerinin uzamaması için align-items, flex-start olarak ayarlanır.
• grid-template-columns biraz karmaşık bir söz dizimine sahip olsa da amaç özlü olmaktır. Sütunları 35ch genişliğinde ve asla 10ch'den daha dar tutmayın. Yer varsa öğeleri sütunlara yerleştirin, aksi takdirde satırlar da uygundur.

2. Tarayıcıyı yeniden boyutlandırmayı deneyin. Formun küçük bir görüntü alanında satırlara daralmasını, ancak yer varsa yeni sütunlar eklenmesini izleyin. Bu işlem, medya sorguları olmadan uyarlanarak yapılır. Medya sorgusu içermeyen duyarlı stiller stratejisi, özellikle bileşenler veya içeriğe odaklı düzenler için yararlıdır.

<section>

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

Her bölüm, alt öğeler arasında orta 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 çok küçük boşluk 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 birlikte gruplandırmaktan sorumludur. Sonraki bölümde renk eklediğinizde overflow: hidden ve gap: 1px 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 birlikte ortalamaktan sorumludur. Izgara şablonunun ilk sütunu olan var(--space-lg), simgeden daha geniş bir sütun oluşturur. Böylece alt öğe, bu sütun içinde ortalanabilir.

Bu düzen, özel özelliklerde kaç tasarım kararının verildiğini gösterir. 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 çemberinin boyutu, çember şekli oluşturma ve görüntüyü çemberin içine ortalama işlemlerinden sorumludur.

<picture> & [checkbox] hizalama

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

Bu düzen, :is sözde seçicisini kullanarak ortalamayı resim ve onay kutusu öğeleriyle sınırlar.

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

.fieldset-item <svg>

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

Bu, SVG simge boyutunu beden ölçüsü sistemi değerine ayarlar.

.sm-stack

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

Bu yardımcı sınıf, onay kutusu için yardımcı metne boşluk eklemek üzere onay kutusu etiketi öğeleri içindir.

input[type="checkbox"]

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

Bu stiller, aralık grubumuzdaki değerleri kullanarak onay kutusunun boyutunu artırır.

Deneyebilecekleriniz

1. Chrome Geliştirici Araçları'nı açın ve Öğeler panelindeki HTML'de ızgara rozetlerini bulun. Hata ayıklama araçlarını etkinleştirmek için bunları tıklayın.
2. Chrome Geliştirici Araçları'nı açın ve Stiller bölmesinde 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, görüntü alanı bağlamında en uygun olacak şekilde aralığı veya düzeni ayarlamak amacıyla stilleri görüntü alanı boyutuna ve yönüne göre uyarlar.

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ı olduğundan main daha fazla dolgu verir. Bu nedenle, başlangıçta küçük ve kompakt bir dolgu miktarıyla başlar ancak daha fazla alan kullanılabilir hale geldikçe giderek daha geniş hale 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 duyarlıydı ancak bir mobil cihazda test edilirken cihazı yatay moda çevirmek iki form grubunu yan yana getirmiyor. orientation medya sorgusu ve görüntü alanı genişliği kontrolü ile bu ortam bağlamına uyum sağlayın. Artık cihaz yatay konumdaysa ve genişliği en az 640 pikselse --repeat özel niteliğini auto-fit anahtar kelimesi yerine bir sayıyla değiştirerek iki sütun 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ı olduğunda başka bir aralık genişletmedir. Izgara şablonu, şablonda daha büyük bir özel özellik (var(--space-xxl)) kullanarak ilk sütunu genişletir. Dolgu, daha büyük özel özellikler için de artırılır.

Deneyebilecekleriniz

1. Tarayıcınızı genişletip daraltın ve alanın nasıl ayarlandığını görün.
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 kodundan türetilmiş bir renk şeması olmalıdır.
• 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. Bu, CSS'deki şu temel kavram üzerine kurulmuştur: calc().

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

Özel özellikler

Bu bölümde, stillerinizin geri kalanında kullanılacak bir dizi özel özellik oluşturursunuz. :root etiketinde daha önce yaptığınız aralık ayarlarına benzer şekilde renkler ekleyeceksiniz.

Uygulamanızın marka renginin #0af olduğunu varsayalım. İlk göreviniz, bu 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 HSL'deki renk kanallarını gösterir. Bu kanalları, calc() kullanarak çeşitli destekleyici marka renklerini hesaplamak için kullanabilirsiniz.

Not: Bu uygulama, koyu renk şemasını tercih eder ve 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çicisine eklenmelidir.

Marka kanalları

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

Üç HSL kanalı çıkarılıp kendi özel özelliklerine 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 renkler gözü yorabilir veya erişilemez olabilir). Marka renginizin doygunluğunu azaltmak için ton ve parlaklığı olduğu gibi kullanır, ancak doygunluğu bölerek yarıya indirirsiniz: calc(var(--saturation) / 2). Marka renginiz artık temaya uygun ancak kullanılmak üzere 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ıyor ancak bu renkten neredeyse beyaz renkler oluşturuyorsunuz. Birçok kullanıcı, aslında çok açık mavi olan metnin beyaz olduğunu düşünecektir. Renk tonu içinde kalmak, tasarımda uyum oluşturmanın etkili bir yoludur. --text1% 85 beyaz, --text2% 65 beyaz ve her ikisinin de doygunluğu çok düşük.

2. Kodu projenize ekledikten sonra Chrome Geliştirici Araçları'nı açın ve bu kanal değerlerini değiştirmeyi deneyin. HSL ve kanallarının birbirleriyle nasıl etkileşim kurduğunu hissedin. Belki de zevkinize göre daha fazla veya daha az doygunluk istiyorsunuz.

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

Yüzeyler koyu modda karanlık olacağından metin çok açık renkte gösterilir. Metin renklerinde yüksek parlaklık değerleri (%85 ve üzeri) kullanılıyorsa yüzeylerde daha düşük değerler (%30 ve altı) kullanılır. Yüzey ve metin arasındaki parlaklık aralıklarının sağlıklı olması, kullanıcıların okuyabileceği erişilebilir renkler olmasını sağlar.

3. Renklerin% 10 parlaklık ve% 10 doygunlukla en koyu griden başlayıp daha açık hale geldikçe doygunluğunu kaybettiğini fark edin. Her yeni yüzey, bir öncekinden% 5 daha hafiftir. Açık renkli yüzeylerde doygunluk biraz fazla düşürülüyor. Yüzeylerinizi% 10 doygunlukta ayarlamayı deneyin. Daha mı çok yoksa daha mı az beğendiniz?

Açık tema

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

Renklerin iyi bir kontrast oluşturmasını sağlamak için yüzeyleriniz ve metin renkleriniz arasındaki parlaklık değerlerinde büyük bir fark bırakma tekniğini kullanırsınız.

Marka

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

İlk olarak marka rengi. Doygunluğun tam gücüne geri getirilmesi gerekir.

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 metin renkleri çok açık maviydi. Açık temada ise metin renkleri çok koyu mavi. HSL renginin açıklık değerleri olarak% 10 ve% 30'u görmek, bu renklerin koyu olduğunu gösterir.

Surface

@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, desenleri bozan ilk renklerdir. Şimdiye kadar oldukça makul ve doğrusal görünen şey artık bozuldu. İyi yanı, HSL açık tema renk kombinasyonlarıyla doğrudan kodda oynayabilmeniz ve çok soğuk veya mavi olmayan güzel bir açık renk şeması oluşturmak için parlaklığı ve doygunluğu ayarlayabilmenizdir.

Renk sistemini kullanma

Renkler tanımlandığına göre artık bunları kullanabilirsiniz. Markanızın güzel 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ği test edilmeye başlanabilir.

<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 elde edebilir ve bu uyumu kolayca koruyabilirsiniz.

.fieldset-item

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

Her form girişi kendi yüzeyindedir. Umarım bu renklerin nasıl bir araya geldiğini ve açık renk tonlarının nasıl katman oluşturduğunu görüyorsunuzdur.

.fieldset-item > picture

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

Bu, simgenin etrafındaki daire şeklini göstermek için yapılan stilistik bir tercihtir. Bir sonraki bölümde etkileşimler eklediğinizde bunun nedeni netleşir.

.fieldset-item svg

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

Formdaki simgeler, alternatif metin --text2'yı kullanacak şekilde ayarlanır. Dolu simgelerin metinden biraz daha açık renkli 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 hedefleyerek markanızın vurgu rengiyle öne çıkarır. Bu, formun güzel bir kullanıcı deneyimi geri bildirimi sağlar. Girişlerle etkileşimde bulunulduğunda ilgili simgeler vurgulanır.

<small>

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

Küçük bir metin. Başlıklar ve paragraflarla (birincil içerik) karşılaştırıldığında biraz daha soluk olmalıdır.

Koyu form kontrolleri

:root {
  color-scheme: dark light;
}

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

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 olmaması karşılaştırması

İşletim sisteminde hareket için bulunan kullanıcı tercihi, animasyon yok değeri sunmuyor. Hareket azaltma seçeneği Az hareket tercih eden kullanıcılar için geçişli animasyonlar, renk geçişleri ve diğer özellikler hâlâ kullanışlıdır.

Bu ayarlar sayfasında, ekranda hareket açısından çok fazla hareket yoktur. Hareket, öğe kullanıcıya doğru hareket ediyormuş gibi bir ölçeklendirme efektidir. CSS kodunuzu azaltılmış harekete uyacak şekilde ayarlamak çok kolay olduğundan ölçeklendirme geçişlerini azaltırsınız.

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ı, <fieldset> kartı görünümündeki öğ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 doğru getirilirken kullanıcının odaklanmasına yardımcı oluyor.

.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ı belirtmeye 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%);
  }
}

Kullanıcının azaltılmış hareket konusunda tercihi yoksa kullanacağınız clip-path animasyonu aşağıda verilmiştir. İ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 çemberini büyütür. İyi olduğunda ince ama hoş bir efekt.

7. Tebrikler

Git dalı: complete

Tebrikler, kullanıcıya uyarlanabilir 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.