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 pek çok tercih belirtmiştir. İşletim sisteminin ve uygulamaların kendilerine ait gibi görünmesini ve tarzını korumayı istiyorlar. Kullanıcı tarafından uyarlanabilen arayüzler, kullanıcı deneyimini iyileştirmek, kullanıcının kendini evde hissetmesini sağlamak ve sizin gibi hissettirmek için söz konusu tercihleri kullanmaya hazır olan arayüzlerdir. Doğru yapılırsa kullanıcı, kullanıcı deneyiminin uyum sağladığını veya yeni deneyime uyum sağladığını hiçbir zaman bilemeyebilir.

Kullanıcı tercihleri

Cihaz donanımı seçimi bir tercih, işletim sistemi bir tercih, uygulama ve işletim sisteminin renkleri tercihler, uygulama ve işletim sistemlerinin doküman dilleri ise tercihler. Kullanıcıların sahip olduğu tercihlerin sayısı giderek artıyor. Bir web sayfası her şeye erişemez ve bunun iyi bir nedeni vardır.

Aşağıda, CSS tarafından kullanılabilen kullanıcı tercihlerine birkaç örnek verilmiştir:

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

CSS'de yakında kullanıma sunulacak kullanıcı tercihleriyle ilgili birkaç örneği aşağıda bulabilirsiniz:

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

Medya sorguları

CSS ve web, medya sorguları aracılığıyla uyarlama ve yanıt verme olanağı sağlar. Medya sorguları, söz konusu koşul doğruysa bir stil grubu içeren bildirim temelli bir koşuldur. En yaygın neden, cihazın görüntü alanı boyutunun değişmesidir. Boyut 800 pikselden azsa bu durum için daha iyi stilleri aşağıda bulabilirsiniz.

Kullanıcıya göre uyarlanan

Uyarlanabilir olmayan arayüz, kullanıcı ziyaret ettiğinde hiçbir şeyi değiştirmeyen, temelde ayarlama yapma olanağı olmayan herkese tek bir deneyim sunan bir arayüzdür. Kullanıcıya göre uyarlanabilen bir arayüzde, beş farklı kullanıcı için beş farklı görünüm ve stil bulunabilir. İşlevsellik aynı olmakla birlikte, estetik açıdan 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

Oluşturacakları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 kontrolleri 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 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 göre uyarlanabilir 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şturun
• Düzen duyarlı formlar
• Göreli birimleri ve mantıksal özellikleri kullanın

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 kullanımınıza sunulmuştur.

Gerekenler

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

2. Hazırlanın

Kodu alma

Bu proje için ihtiyacınız olan her şeyi bir GitHub deposunda bulabilirsiniz. Başlamak için kodu alıp en sevdiğ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ışmayı kaydetmek için hesap oluşturun.
4. Çatal'ı tıklayın.

Alternatif: Yerel olarak çalışma

Kodu indirip yerel olarak çalışmak istiyorsanız, Node.js 12 veya sonraki bir sürümüne sahip olmanız ve ayarlanmış ve kullanıma hazır bir kod düzenleyicinizin olması gerekir.

Git'i kullanın

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 çalıştırma

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. 3000 numaralı bağlantı noktasında sunucuyu 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 ders, kullanıcıya göre uyarlanabilen etkileşimi desteklemek için kullanılan HTML özelliklerini ele alır. Bu atölyede özellikle CSS'lere odaklanacağız. Form veya web sitesi oluşturma konusunda yeniyseniz, sağlanan HTML kodunu incelemeniz faydalı olacaktır. HTML öğesi seçimleri, erişilebilirlik ve düzen söz konusu olduğunda kritik öneme sahip olabilir.

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

3. Uyarlanabilir etkileşimler

Git dalı: beginning

Bu bölümün sonunda ayarlar formunuz şuna uyarlanır:

• Oyun kumandası + klavye
• Fare + dokunma
• Ekran okuyucu veya benzeri yardımcı teknolojiler

HTML özellikleri

Form girişlerinizi gruplandırma, sıralama ve etiketlemeye yardımcı olacak anlamsal öğeler zaten seçilmiş olduğundan, kaynak kodunda sağlanan HTML harika bir başlangıç noktasıdır.

Formlar genellikle işletmeler için temel etkileşim noktasıdır. Bu nedenle formun, web'in kolaylaştırabileceği çok sayıda giriş türüne uyum sağlaması önemlidir. Örneğin, mobil cihazlarda dokunularak kullanılabilecek bir forma sahip olmanız büyük olasılıkla önemlidir. Bu bölümde, düzen ve stilden önce uyarlanabilir giriş kullanılabilirliğini sunuyorsunuz.

Gruplandırma girişleri

HTML'deki <fieldset> öğesi, benzer girişleri ve kontrolleri birlikte gruplandırmak için kullanılır. Formunuzda biri hacim, diğeri bildirimler için olmak üzere iki grubunuz var. Bölümlerin tamamının atlanabilir olması, kullanıcı deneyimi açısından önemlidir.

Öğeleri sıralama

Öğelerin sırası mantıksal bir sıralamayla sağlanır. Bu, kullanıcı deneyimi açısından önemlidir. Bu nedenle oyun kumandası, klavye veya ekran okuyucu teknolojilerindeki görsel deneyim sırası aynıdır.

Klavye etkileşimi

Web kullanıcıları, formlarda sekmeler arasında gezinmeye alışmıştır. Sekme tuşları, beklenen HTML öğelerini sağlamanız durumunda tarayıcı bunu halleder. <button>, <input>, <h2> ve <label> gibi öğeler otomatik olarak klavye veya ekran okuyucu hedefleri haline gelir.

Yukarıdaki videoda, sekme tuşunun ve oklarının arayüzde nasıl hareket edebileceği ve nasıl değişiklik yapabileceği gösterilmektedir. Ancak giriş öğelerinin etrafındaki mavi dış çizgi çok dar. Bu etkileşimin biraz nefes alması için aşağıdaki stilleri ekleyin.

style.css

input {
  outline-offset: 5px;
}

Denenebilecekler

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 tuşuna 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ğlayarak öğe odağını formda hareket ettirin.

Fare etkileşimi

Web kullanıcıları, formlarla fareleriyle etkileşim kurmaya alışmıştır. Farenizi formun üzerinde kullanmayı deneyin. Kaydırma çubukları ve onay kutuları da kullanılabilir, ancak siz bunu daha iyi yapabilirsiniz. Bu onay kutuları, fare ile tıklanamayacak kadar küçüktür.

Etiketleriniz ve girişleri arasında bağlantı kurmak için iki kullanıcı deneyimi özelliğinden nasıl yararlandığınızı biliyor musunuz?

İlk özellik, etkileşimde bulunulacak seçenekler içeriyor ve etiketin fare için hedeflenmesi, küçük bir kareden çok daha kolay.

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

Bu uygunsuz bağlantı, bir sonraki bölümde ele alınacak olan ekran okuyucuların deneyimini de iyileştirir.

İlişkilendirilmemiş: Öğeleri bağlayan özellik yok

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

İlişkilendirilmiş: Öğeleri bağlayan özellikler

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

Sağlanan HTML tüm girişleri ve etiketleri zaten ilişkilendirdi. Bu kavram sizin için yeniyse daha ayrıntılı bir şekilde araştırmanızda fayda vardır.

Denenebilecekler

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

Ekran okuyucu etkileşimi

Yardımcı teknolojiler bu formla etkileşim kurabilir ve birkaç HTML özelliği sayesinde kullanıcı deneyimini daha sorunsuz hale getirebilir.

Geçerli formda Chrome'da ekran okuyucuyla gezinen kullanıcılar için <picture> öğesinde gereksiz bir duraklama vardır (Chrome'a özel değildir). Ekran okuyucusu olan bir kullanıcı, görme bozukluğu nedeniyle büyük olasılıkla ekran okuyucuyu kullanıyordur. Dolayısıyla, resim üzerinde durmak işe yaramaz. Belirli bir özelliğe sahip öğeleri ekran okuyuculardan gizleyebilirsiniz.

index.html

<picture aria-hidden="true">

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

input[type="range"] kaydırma öğesi öğesinde özel bir ARIA özelliği var: aria-labelledby="media-volume". Bu, ekran okuyucunun kullanıcı deneyimini geliştirmek için kullanacağı özel bir talimat sağlar.

Denenebilecekler

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

4. Uyarlanabilir düzenler

Git dalı: layouts

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

• Özel özellikler ve kullanıcıya göre göreli birimler içeren bir boşluk sistemi oluşturun
• Esnek, duyarlı hizalama ve boşluk kullanımı için CSS Izgarası yazın
• Uluslararası olarak uyarlanabilir düzenler için mantıksal özellikleri kullanma
• Kompakt ve geniş düzenler arasında uyum sağlayacak medya sorguları yazın.

Boşluk

Güzel bir düzenin en önemli unsurlarından biri, aralık seçeneklerinin sınırlı bir paletidir. Bu, içeriklerin doğal uyum ve uyum bulmasına yardımcı olur.

Özel mülkler

Bu atölyede, yedi özel mülk boyutu temel alınmıştır.

• Bunları style.css öğesinin ü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 birbirleri arasında kullanacağı ifadelere yakın. Ayrıca uyarlanan ve kullanıcının tercihini gözeten okunabilir tüm birim boyutları için özel olarak rem birimleri kullanıyorsunuz.

Sayfa stilleri

Daha sonra, bazı doküman stilleri ayarlamanız, öğelerden kenar boşluklarını kaldırmanız ve yazı tipini Nice sans-serif'e ayarlamanız gerekir.

• Şunları style.css içine 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 kullanabiliyorsunuz. Böylece uzay yolculuğunuz başlıyor.

Yazı biçimi

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

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

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

small {
  line-height: 1.5;
}

h1, h2 ve h3'ün stilleri küçük ve biçimseldir. Ancak metin kaydırma işlemi için small öğesinde ek line-height gerekir. Aksi takdirde çok kalabalık olur.

Mantıksal özellikler

body sayfasındaki 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 şekilde kullanılacaktır. Bunlar da rem birimi gibi kullanıcılara uyarlatır. Bu düzen başka bir dile çevrilebilir ve kullanıcının ana dilinde alışkın olduğu doğal yazı ve doküman yönergelerine ayarlanabilir. Mantıksal özellikler yalnızca tek bir alan, yön veya hizalama tanımıyla bunun için destek sunar.

Izgara ve flexbox zaten akışa bağlıdır. Diğer bir deyişle, bir dil için yazılan stiller bağlamsal olur ve diğerlerine uygun şekilde uygulanır. Uyarlanabilir yön, içerik akışının doküman yönergelerine göre akışını gösterir.

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

CSS Izgara 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. Makro düzenlerden mikro düzenlere kadar dışarıdan içeriden de çalışacaksınız. Boşluk bırakma özel özellikleriniz yalnızca dolgu veya kenar boşluğu değerleri değil, aynı zamanda sütun boyutları, kenarlık yarıçapları ve diğer özellikler açısından da kritik hale gelir.

Her CSS ızgara düzeninin aynı anda yer aldığı Chrome Geliştirici Araçları ekran görüntüsünü aşağıda bulabilirsiniz:

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 da öğelerin yığınlanması için idealdir. Ayrıca gap sayesinde ek bir avantaj da sunar. Daha önce, * seçicisini kullanarak tüm öğelerde margin: 0 ayarını yapmıştınız. Bu, boşluklar için gap kullandığınızdan artık önemlidir. Boşluk, bir kapsayıcıdaki alanı yönetmek için kullanılan tek bir yer değildir, aynı zamanda akışla ilgilidir.

&lt;form&gt;

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ılık özelliğini de hesaba katar:

• max-width, düzen algoritmasının ne kadar büyük olabileceğine karar verirken kullanacağı bir değer sağlıyor.
• gap, özel özellikleri kullanıyor ve column-gap öğesinden farklı bir row-gap iletiyor.
• align-items, öğe yüksekliklerini uzatmamak için flex-start olarak ayarlandı.
• grid-template-columns söz dizimi karmaşık ancak hedef kısa ve öz; sütunları 35ch genişliğinde tutun ve en fazla 10ch olacak şekilde sütunlara yer verin. Alan varsa öğeleri sütunlara yerleştirin. Aksi takdirde satırlar iyi olur.

2. Tarayıcıyı yeniden boyutlandırmayı deneyin. Formun küçük bir görüntü alanındaki satırlara daralmasını izleyin. Ancak, alan varsa, medya sorguları olmadan uyarlayarak yeni sütunlar akar. Medya sorgusu olmayan bu duyarlı stiller stratejisi, özellikle bileşenler veya içerik merkezli düzenler için yararlı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 ızgarası olmalıdır.

<header>

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

Her başlık, alt öğeler arasında ekstra 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, karta benzer bir görünüm oluşturmaktan ve girişleri birlikte gruplandırmaktan sorumludur. Bir sonraki bölüme 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, simge ve onay kutusunu ilişkili etiketleri ve denetimlerle birlikte ortalamaktan sorumludur. Izgara şablonunun ilk sütunu (var(--space-lg)), simgeden daha geniş bir sütun oluşturur. Böylece, alt öğenin içinde ortalanacak bir yer vardır.

Bu düzen, özel özelliklerde daha önce kaç tasarım kararının alındığını gösterir. Dolgu, boşluklar ve bir sütun, önceden tanımladığınız değerler kullanılarak sistem uyum 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; ayarlardan, simge dairesinin boyutundan, daire şekli oluşturmaktan ve resmin içindeki bir resmin ortalamasından sorumludur.

<resim> ve [onay kutusu] hizalama

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

Bu düzen, :is sözde seçicisini kullanarak resim ve onay kutusu öğelerine ortalamayı izole eder.

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

.fieldset-item <svg>

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

Bu işlem, svg simgesinin boyutunu beden sisteminden bir değere ayarlar.

.sm-stack

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

Bu yardımcı program sınıfı, onay kutusu için yardımcı metinde boşluk bırakacak onay kutusu etiketi öğeleri içindir.

input[type=&quot;checkbox&quot;]

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.

Denenebilecekler

1. Chrome Geliştirici Araçları'nı açın ve Elements panelindeki HTML'deki Izgara rozetlerini bulun. Hata ayıklama araçlarını etkinleştirmek için bu anahtarları tıklayın.
2. Chrome Geliştirici Araçları'nı açın ve Stiller bölmesinde bir boşluk bekleyin.
3. Chrome Geliştirici Araçları'nı açın, Stiller bölmesine gidin ve Stiller'den Düzenler'e geçin. Ayarları açıp kapatarak ve düzenleri etkinleştirerek bu alanı keşfedebilirsiniz.

Medya sorguları

Aşağıdaki CSS, aralıkları veya düzenlemeyi görüntü alanı bağlamına göre optimum olacak şekilde 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ştirildiğ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ı alanı olduğu için main uygulamasına daha fazla dolgu sağlar. Bu, küçük ve az miktarda dolguyla başlaması anlamına gelir. Ancak şimdi daha fazla alan açıldıkça daha da geniş hale gelir.

&lt;form&gt;

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, halihazırda auto-fit ile görüntü alanı boyutuna duyarlıydı, ancak mobil cihazda test yapılırken bir cihazın yatay olarak döndürülmesi iki form grubunu yan yana yerleştirmiyor. orientation medya sorgusu ve görüntü alanı genişlik kontrolü ile bu yatay bağlama uyarlayın. Şimdi, cihaz yataysa ve en az 640 piksel genişliğindeyse --repeat özel özelliğini auto-fit anahtar kelimesi yerine bir sayı ile değiştirerek 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ı olduğunda kullanılan başka bir boşluk genişletmesidir. 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 özelliklere de aktarılır.

Denenebilecekler

1. Tarayıcınızı genişletip daraltın ve alanın ayarlanması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 formunuzda:

• Koyu ve açık renk tercihlerine uyarlama
• Markanın onaltılık renk şemasından türetilmiş bir renk şemasına sahip olma
• Erişilebilir renklere sahip olmalıdır

HSL

Bir sonraki bölümde, açık ve koyu bir 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 açıklı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çılar ile matematik işlemleri yapabilir. CSS'de bu yüzdeler üzerinde hafiflik ve doygunluk hesaplamaları yapabilirsiniz. Renk kanalı hesaplamalarını özel özelliklerle birleştirerek varyantların bir temel renkten hesaplandığı modern ve dinamik bir renk şemasından yararlanabilirsiniz. Böylece, koddaki birkaç rengi yönetmekten kaçınabilirsiniz.

Özel mülkler

Bu bölümde, geri kalan stillerinizde kullanmak üzere bir dizi özel özellik oluşturacaksınız. Daha önce :root etiketinde yaptığınız aralık kümesine benzer şekilde, renkler eklersiniz.

Uygulamanızın marka renginin #0af olduğunu varsayalım. İlk göreviniz, bu on altılık renk değerini bir HSL renk değerine dönüştürmek: hsl(200 100% 50%). Bu dönüşüm, markanızın HSL'de renk kanallarını gösterir. Bu kanalları kullanarak, destekleyici çeşitli marka renklerini hesaplamak için calc() kullanabilirsiniz.

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

Bu bölümde yer alan 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ı ayıklanır ve kendi özel mülklerine yerleştirilir.

1. Üç özelliği 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 renk olduğundan, koyu yüzeylerde kullanmak üzere renklerin solgunlaştırılması iyi bir uygulamadır (aksi takdirde göze titreşebilir veya görünmez olabilirler). Markanızın rengini solgunlaştırmak için ton ve ışığı olduğu gibi kullanırsınız. Ancak doygunluğu bazı bölümlere ayırarak yarıya indirirsiniz: calc(var(--saturation) / 2). Markanızın rengi temada düzgün bir şekilde gösteriliyor ancak kullanım için doygunluğu azaltılmış.

Metin

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

Koyu temamızdaki okuma metninde temel olarak marka tonunu kullanırsınız ancak bu renk tonu ile neredeyse beyaz renkler elde edersiniz. Birçok kullanıcı metnin beyaz olduğunu düşünse de aslında çok açık mavidir. Renk tonunu korumak, tasarım uyumunu oluşturmanın etkili bir yoludur. --text1% 85 beyaz, --text2% 65 beyazdır ve her ikisi de çok az doygunluğa sahiptir.

2. Kodu projenize ekledikten sonra Chrome Geliştirici Araçları'nı açın ve bu kanal değerlerini değiştirmeyi keşfedin. HSL ve kanallarının birbiriyle nasıl etkileşim kurduğunu hissedin. Zevkiniz daha fazla ya da daha az doygunluk istiyor olabilir.

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 renk olacağı için metin çok açık renkli. Metin renklerinin yüksek ışıklandırma değerleri (%85 ve daha yüksek) kullandığı durumlarda, yüzeylerde daha düşük değerler (%30 ve daha düşük) kullanılır. Yüzey ve metin arasında açıklık aralıkları arasında sağlıklı bir aralık olması, kullanıcıların okuması için erişilebilir renklere yardımcı olur.

3. Renklerin, %10 açıklık ve% 10 doygunlukla en koyu griden başladığına, ardından daha açık hale geldiklerinde ise doygunluğuna dönüştüğüne dikkat edin. Her yeni yüzey bir öncekinden% 5 daha hafiftir. Daha hafif yüzeylerde doygunluk da biraz düşürülür. Tüm yüzeylerinizi% 10 doygunluğa getirmeyi deneyin. Beğendiniz mi yoksa daha mı az?

Açık tema

Koyu temayı belirten sağlıklı bir metin ve yüzey renkleri grubu göz önüne alındığında, prefers-color-scheme medya sorgusu içindeki renk özel özelliklerini güncelleyerek açık tema tercihine uyum sağlama zamanı geldi.

Renklerin iyi kontrastını korumak için yüzeyleriniz ve metin renkleri arasındaki açıklık değerlerinde büyük bir fark sağlamak amacıyla aynı tekniği kullanırsınız.

Marka

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

Sırada marka rengi var. Doygunluğun tekrar tümüyle güç kazanabilmesi 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 temanın çok açık mavi metin renklerine benzer şekilde, açık temada metin renkleri çok koyu mavidir. HSL renginin açıklık değerleri olarak% 10 ve% 30 değerlerini 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%);
  }
}

Kalıpları ilk bozan bu yüzey renkleridir. Şimdiye kadar oldukça makul ve doğrusal görünen bir şey artık bozulmuş. İşin iyi tarafı, HSL ışık teması renk kombinasyonlarıyla hemen buradaki kodda oynayabilmeniz ve çok soğuk veya mavi olmayan hoş bir açık renk şeması oluşturmak için açıklığı ve doygunluğu ayarlayabilmenizdir.

Renk sistemini kullanma

Renkler tanımlandığına göre şimdi bunları kullanma zamanı. Göz alıcı bir vurgu marka renginiz, iki metin renginiz ve dört yüzey renginiz 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);
}

Sayfa birincil renkleri, oluşturduğunuz ilk yüzey ve metin renkleridir. Ayrıca, varsayılan kontrast miktarını maksimum seviyeye getirir. Açık ve koyu renk açma/kapatma düğmesi test edilmeye başlayabilir.

&lt;fieldset&gt;

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

Bu, tasarımınızın karta benzeyen öğesidir. 1 piksellik kenarlık ve 1 piksellik boşluk aynı renkte ve her bir .fieldset-item öğesinin arkasındaki yüzeyi temsil ediyor. Bu yöntem, hoş bir görsel uyum sağlar ve bakımı kolay olur.

.fieldset-item

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

Her form girişi kendi yüzeyindedir. Umarız bunların nasıl bir araya geldiğini ve ışığın varyasyonlarının nasıl bir araya geldiğini görürsünüz.

.fieldset-item > resim

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

Bu, simgenin etrafındaki dairenin şeklini göstermek için biçimsel bir seçimdir. Bir sonraki bölümde etkileşimleri eklediğinizde bunun nedeni ortaya çıkacaktır.

.fieldset-item svg

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

Formdaki simgeler, --text2 alternatif metnini kullanacak şekilde ayarlanmıştır. Dolgulu simgelerin metinden biraz daha hafif olduğu tasarımlar bu simgelerin çok ağır görünmesini önler.

.fieldset-item:focus-svg içinde

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

Bu seçici, içindeki girişlerden biriyle etkileşim kurulduğunda giriş kapsayıcısı öğesiyle eşleşir ve marka vurgusu ile vurgulamak için SVG'yi hedefler. Bu, formun iyi bir kullanıcı deneyimi geri bildirimini sağlar. Girişlerle etkileşim kurulduğunda alakalı ikonografisi vurgulanır.

&lt;small&gt;

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

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

Koyu form kontrolleri

:root {
  color-scheme: dark light;
}

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

6. Uyarlanabilir animasyon

Git dalı: animations

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

• Kullanıcının hareket tercihlerine ayarlama
• Kullanıcı etkileşimine yanıt verme

Az hareket edene kıyasla az hareket edenler

İşletim sisteminde hareket için bulunan kullanıcı tercihi, animasyon içermeyen bir değer sunmaz. Seçenek hareketi azaltmaktır. Daha az hareketi tercih eden kullanıcılar için çapraz geçiş animasyonları, renk geçişleri ve daha fazlası tercih ediliyor.

Bu ayarlar sayfasında, ekranda çok fazla hareket yoktur. Hareket, sanki öğe kullanıcıya doğru hareket ediyormuş gibi bir ölçek efektidir. CSS kodunuzu daha az hareketi kapsayacak şekilde düzenlemek çok önemlidir. Böylece, ölçeklendirme geçişlerini azaltabilirsiniz.

Etkileşim stilleri

&lt;fieldset&gt;

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

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

Kullanıcılar, <fieldset> kart görünümlü öğelerinden birinin girişleriyle etkileşimde bulunduğunda bu işlem, artış efekti ekler. Arayüz bir öğeyi ileriye taşıyarak, bağlamsal form grubu kullanıcıya yönlendirilirken 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şim kurarken belirli öğe katmanı arka planı, vurgulanan yüzey rengine dönüşür. Bu, kullanıcının dikkatini çekmeye ve girişin alındığını belirten başka bir destekleyici arayüz özelliğidir. Çoğu durumda renk geçişlerinin azaltılmasına gerek yoktur.

.fieldset-item > resim

@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 az hareketle ilgili herhangi bir tercihi yoksa kullanacağınız bir clip-path animasyonunu görebilirsiniz. İlk seçici ve stiller, daire klip yolunu% 10 daraltır ve bazı geçiş parametrelerini ayarlar. İkinci seçici ve stil, kullanıcıların bir girişle etkileşim kurmasını ve simgenin dairesini büyütmesini bekler. Bir sorun olduğunda hafif ama düzgün bir efekt.

7. Tebrikler

Git dalı: complete

Tebrikler, kullanıcıya göre uyarlanabilen 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 atılması gereken temel adımları biliyorsunuz.