Duyarlı web tasarımının yeni döneminde makro ve mikro düzeni kontrol etme.
Günümüzde duyarlı tasarım
Günümüzde "duyarlı tasarım" terimini kullanırken büyük olasılıkla bir tasarımı mobil boyuttan tablet boyutuna ve masaüstü boyutuna yeniden boyutlandırırken düzeni değiştirmek için medya sorgularını kullanmayı düşünüyorsunuzdur.
Ancak yakında, duyarlı tasarımla ilgili bu algı, sayfa düzeni için tablo kullanmak kadar eski bir yöntem olarak kabul edilebilir.
Görüntü alanına dayalı medya sorguları size bazı güçlü araçlar sunar ancak çok fazla incelikten yoksundur. Kullanıcı ihtiyaçlarına yanıt verme ve bileşenlere duyarlı stiller ekleme özellikleri yoktur.
Bileşenlerinizi stillendirmek için genel görüntü alanı bilgilerini kullanabilirsiniz ancak bileşenler yine de kendi stillerine sahip olmaz. Tasarım sistemlerimiz sayfa tabanlı değil, bileşen tabanlı olduğunda bu yöntem işe yaramaz.
İyi haber şu ki ekosistem değişiyor ve bu değişim oldukça hızlı gerçekleşiyor. CSS gelişiyor ve yeni bir duyarlı tasarım dönemi yaklaşıyor.
Bu durumun yaklaşık her 10 yılda bir gerçekleştiğini görüyoruz. 10 yıl önce, 2010-2012 civarında, mobil ve duyarlı tasarımda büyük bir değişim ve CSS3'ün ortaya çıkışını gördük.
Dolayısıyla, ekosistem bir kez daha CSS'de oldukça büyük değişiklikler yapmaya hazır. Chrome'daki ve web platformundaki mühendisler, duyarlı tasarımın bir sonraki dönemi için prototip oluşturuyor, spesifikasyonları belirliyor ve uygulamaya başlıyor.
Bu güncellemeler arasında kullanıcı tercihine dayalı medya özellikleri, kapsayıcı sorguları ve katlanabilir ekranlar gibi yeni ekran türleri için medya sorguları yer alır.
Kullanıcıya yanıt verme
Yeni kullanıcı tercihi medya özellikleri, kullanıcının kendi tercihlerine ve ihtiyaçlarına uygun web deneyimleri tasarlamanıza olanak tanır. Bu, tercih medya özelliklerinin kullanıcı deneyimlerinizi kullanıcılarınızın deneyimlerine uyarlamanıza olanak tanıdığı anlamına gelir.
Bu kullanıcı tercihi medya özellikleri şunlardır:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Başka pek çok bilgi
Tercih özellikleri, kullanıcının işletim sisteminde ayarladığı tercihleri algılar ve özellikle erişilebilirlik ihtiyaçları olanlar için daha sağlam ve kişiselleştirilmiş bir web deneyimi oluşturmaya yardımcı olur.
prefers-reduced-motion
İşletim sistemi tercihlerini hareketi azalt olarak ayarlayan kullanıcılar, bilgisayarlarını kullanırken genel olarak daha az animasyon talep eder. Bu nedenle, web'i kullanırken gösterişli bir giriş ekranı, kart çevirme animasyonu, karmaşık yükleyici veya diğer gösterişli animasyonları beğenmeyebilirler.
prefers-reduced-motion ile sayfalarınızı azaltılmış hareketi göz önünde bulundurarak tasarlayabilir ve bu tercihi ayarlamamış olanlar için hareketle geliştirilmiş bir deneyim oluşturabilirsiniz.
Bu kartın her iki tarafında da bilgi var. Temel azaltılmış hareket deneyimi, bilgileri göstermek için çapraz geçiş kullanırken hareketi geliştirilmiş deneyim, kart çevirme kullanır.
Hareket, internette bilgi aktarmak için çok önemli olduğundan, "prefers-reduced-motion" "hareket yok" anlamına gelmemelidir. Bunun yerine, kullanıcılarınıza gereksiz hareketler olmadan rehberlik eden sağlam bir temel deneyim sunun ve bu erişilebilirlik ihtiyaçları veya tercihleri olmayan kullanıcılarınız için bu deneyimi kademeli olarak geliştirin.
prefers-color-scheme
Diğer bir tercih medya özelliği ise prefers-color-scheme. Bu özellik, kullanıcı arayüzünüzü kullanıcınızın tercih ettiği temaya göre özelleştirmenize yardımcı olur. Kullanıcılar, masaüstü veya mobil işletim sistemlerinde açık, koyu ya da günün saatine göre değişen otomatik temalar için tercih belirleyebilir.
Sayfanızı CSS özel özellikleri kullanarak oluşturduysanız renk değerlerini değiştirmek kolaydır. Medya sorgusunda yeni temaya dinamik olarak uyum sağlamak için backgroundColor ve textOnPrimary gibi renk teması değerlerinizi hızlıca güncelleyebilirsiniz.
Bu tercih sorgularından bazılarını test etmeyi kolaylaştırmak için her seferinde sistem tercihlerinizi açmak yerine emülasyon için Geliştirici Araçları'nı kullanabilirsiniz.
Koyu tema için tasarım yapma
Koyu tema tasarlarken yalnızca arka plan ve metin renklerini tersine çevirmek veya koyu kaydırma çubukları kullanmak yeterli değildir. Farkında olmayabileceğiniz birkaç nokta var. Örneğin, görsel titreşimi azaltmak için koyu arka plandaki renklerin doygunluğunu azaltmanız gerekebilir.
Derinlik oluşturmak ve bir öğeyi öne çıkarmak için gölge kullanmak yerine, öğenin arka plan renginde ışık kullanarak öğeyi öne çıkarabilirsiniz. Bunun nedeni, gölgelerin koyu arka planda o kadar etkili olmamasıdır.
Koyu temalar, daha özelleştirilmiş bir kullanıcı deneyimi sunmanın yanı sıra AMOLED ekranlarda pil ömrünü önemli ölçüde artırabilir. Bu ekranlar, yeni üst düzey telefonlarda gördüğümüz ve mobil cihazlarda giderek daha popüler hale gelen ekranlardır.
Koyu temalarla ilgili 2018 Android çalışması, ekran parlaklığına ve genel kullanıcı arayüzüne bağlı olarak %60'a varan güç tasarrufu sağlandığını gösterdi. %60 istatistiği, uygulama kullanıcı arayüzü için koyu tema ile açık tema kullanılarak %100 ekran parlaklığında duraklatılmış bir videonun bulunduğu YouTube oynatma ekranının karşılaştırılmasıyla elde edilmiştir.
Mümkün olduğunda kullanıcılarınıza her zaman koyu tema deneyimi sunmalısınız.
Kapsayıcıya duyarlı
CSS'te en heyecan verici yeni alanlardan biri, genellikle öğe sorguları olarak da adlandırılan kapsayıcı sorgularıdır. Sayfa tabanlı duyarlı tasarımdan kapsayıcı tabanlı duyarlı tasarıma geçişin, tasarım ekosistemini geliştirmek için neler yapacağını hafife almak zordur.
Kapsayıcı sorgularının sağladığı güçlü özelliklere bir örnek: Bağlantı listesi, yazı tipi boyutları ve genel düzen dahil olmak üzere kart öğesinin stillerini üst kapsayıcısına göre değiştirebilirsiniz:
Bu örnekte, iki farklı kapsayıcı boyutuna sahip iki özdeş bileşen gösterilmektedir. Her ikisi de CSS Grid kullanılarak oluşturulan bir düzende yer kaplar. Her bileşen, kendine ayrılan benzersiz alana sığar ve buna göre stilini belirler.
Bu düzeyde bir esneklik, yalnızca medya sorgularıyla mümkün değildir.
Kapsayıcı sorguları, duyarlı tasarıma çok daha dinamik bir yaklaşım sunar. Bu kart bileşenini bir kenar çubuğuna, ana bölüme veya sayfanın ana gövdesindeki bir ızgaraya yerleştirirseniz bileşen, duyarlı bilgilerini ve boyutlarını görüntü alanına göre değil, kapsayıcıya göre belirler.
Bunun için @container kuralı gerekir. Bu kural, @media ile bir medya sorgusuna benzer şekilde çalışır ancak @container, görüntü alanı ve kullanıcı aracısı yerine üst kapsayıcıyı sorgular.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Öncelikle üst öğede kapsama özelliğini ayarlayın. Ardından, min-width veya max-width kullanarak kapsayıcıdaki öğelerden herhangi birini boyutuna göre biçimlendirmek için bir @container sorgusu yazın.
Yukarıdaki kodda max-width kullanılıyor ve bağlantılar display:none olarak ayarlanıyor. Ayrıca, kapsayıcı genişliği 850px değerinden az olduğunda zaman yazı tipi boyutu küçültülüyor.
Kapsayıcı sorgu kartları
Bu demo bitki web sitesinde, ana sayfadaki, son görüntülenen öğelerin kenar çubuğundaki ve ürün tablosundaki ürün kartlarının her biri, aynı işaretlemeye sahip tamamen aynı bileşendir.
Bu düzenin tamamını oluşturmak için kullanılan medya sorguları yoktur, yalnızca kapsayıcı sorguları vardır. Bu sayede her ürün kartı, kendi alanını dolduracak şekilde uygun düzene geçer. Örneğin, ızgara, öğelerin kendi alanlarına akmasını sağlamak için minmax sütun düzenini kullanır ve bu alan çok sıkıştırıldığında (yani minimum boyuta ulaştığında) ızgarayı yeniden düzenler.
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Izgarada en az 350px boşluk olduğunda kart düzeni, varsayılan flex-direction değeri "row" olan display: flex olarak ayarlanarak yatay hale gelir.
Daha az alan olduğunda ürün kartları üst üste yığılır. Her ürün kartı kendi stilini belirler. Bu, yalnızca global stillerle mümkün olmazdı.
Kapsayıcı sorgularını medya sorgularıyla karıştırma
Kapsayıcı sorgularının birçok kullanım alanı vardır. Bunlardan biri de takvim bileşenidir. Takvim etkinliklerini ve diğer segmentleri, üst öğelerinin kullanılabilir genişliğine göre yeniden düzenlemek için kapsayıcı sorgularını kullanabilirsiniz.
Bu demo kapsayıcı, takvimin tarih ve haftanın günü düzenini ve stilini değiştirmek için sorgular. Ayrıca, planlanan etkinliklerin kenar boşluklarını ve yazı tipi boyutunu ayarlayarak alana daha iyi sığmalarını sağlar.
Ardından, daha küçük ekran boyutları için tüm düzeni değiştirmek üzere bir medya sorgusu kullanın. Bu örnekte, medya sorgularını (genel veya makro stilleri ayarlama) kapsayıcı sorgularıyla (kapsayıcının alt öğelerini ve mikro stillerini ayarlama) birleştirmenin ne kadar güçlü olduğu gösterilmektedir.
Artık aynı kullanıcı arayüzü bileşeninde makro ve mikro düzenleri düşünerek gerçekten güzel ve incelikli tasarım kararları verebiliriz.
Kapsayıcı sorgularını bugün kullanma
Bu demolar artık Chrome Canary'de bir işaretin arkasında oynanabilir. Canary'de about://flags adresine gidip #enable-container-queries işaretini etkinleştirin.
Bu sayede contain özelliği için @container, inline-size ve block-size değerleri ve LayoutNG Grid uygulaması desteklenecek.
İşaret, ilgili Chrome Geliştirici Araçları özelliklerini de etkinleştirir. Geliştirici Araçları'nda kapsayıcı sorgularını incelemeyi ve hata ayıklamayı öğrenin.
Kapsamlı stiller
Kapsayıcı sorgularını geliştirmek için @scope ile kapsamlı stiller kullanarak seçicilerinizin erişimini sınırlayın.
Kapsamlı stiller, adlandırma çakışmalarını önlemek için bileşene özgü stiller oluşturmanıza olanak tanır. CSS modülleri gibi birçok çerçeve ve eklenti, çerçeveler içinde bunu yapmamıza olanak tanır. Kapsamlı stiller, işaretlemeyi ayarlamanıza gerek kalmadan okunabilir CSS içeren bileşenler için yerel olarak kapsüllenmiş stiller yazmanıza olanak tanır.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
Kapsam belirleme, üst ve alt sınır belirtebileceğiniz "simit şeklinde" seçiciler oluşturmanıza olanak tanır. @scope kuralında yer alan seçiciler bu sınırlar arasında eşleştirilir.
Buna örnek olarak, sekmelerin kapsamlı stilleri almasını istediğiniz ancak bu sekmelerdeki panelin bu kapsamlı stillerden etkilenmesini istemediğiniz bir sekme paneli verilebilir.
Form faktörüne duyarlı
Duyarlı tasarımın yeni dönemiyle ilgili sohbetimizin bir sonraki konusu, form faktörlerindeki değişim ve web topluluğu olarak tasarlamamız gereken şeylerin (ör. şekil değiştiren ekran veya sanal gerçeklik) artan olanaklarıdır.
Katlanabilir veya esnek ekranlar ve ekran yayma için tasarım, günümüzde form faktörü değişimini görebileceğimiz bir örnektir. Ekran yayma da bu yeni form faktörlerini ve ihtiyaçları karşılamak için üzerinde çalışılan bir diğer özelliktir.
Ekranı kaplama için deneysel bir medya sorgusu bu konuda bize yardımcı olabilir. Şu anda şöyle davranıyor: @media
(spanning: <type of fold>). Demoda iki sütunlu bir tablo düzeni oluşturulur:
Biri --sidebar-width genişliğine sahiptir (varsayılan olarak 5rem), diğeri ise
1fr. Düzen, tek bir dikey katlaması olan çift ekranda görüntülendiğinde --sidebar-width değeri, sol katlamanın ortam değeriyle güncellenir.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
Bu sayede, kenar çubuğunun (bu örnekte gezinme) katlardan birinin alanını, uygulama kullanıcı arayüzünün ise diğerini doldurduğu bir düzen elde edilir. Bu sayede kullanıcı arayüzünde "katlama izi" oluşmaz.
Hata ayıklamaya yardımcı olması için Chrome Geliştirici Araçları emülatöründe katlanabilir ekranları test edebilir ve ekran yayma prototiplerini doğrudan tarayıcıda oluşturabilirsiniz.
Sonuç
Kullanıcı arayüzü tasarımını düz ekranın ötesinde keşfetmek, kapsayıcı sorgularının ve kapsamlı stillerin bu kadar önemli olmasının bir başka nedenidir. Bileşen stillerini sayfa düzeninden, genel stillerden ve kullanıcı stillerinden ayırma fırsatı sunarak daha esnek bir duyarlı tasarım sağlar. Bu sayede, artık ekranı kaplayan nüanslar da dahil olmak üzere sayfaya dayalı medya sorgularını kullanarak makro düzenler tasarlayabilirsiniz. Aynı zamanda bileşenlerde kapsayıcı sorguları içeren mikro düzenler kullanın ve kullanıcı deneyimlerini benzersiz tercihlerine ve ihtiyaçlarına göre özelleştirmek için kullanıcı tercihine dayalı medya sorguları ekleyin.
Yeni duyarlı tasarım bu.
Makro düzen ile mikro düzeni birleştirir ve tüm bunların yanı sıra kullanıcı özelleştirmesini ve form faktörünü de hesaba katar.
Bu değişikliklerin her biri, web için tasarım yapma şeklimizde önemli bir değişikliğe neden olur. Ancak bir araya geldiklerinde, duyarlı tasarım kavramını ele alış biçimimizde gerçekten büyük bir değişimi ifade ediyorlar. Duyarlı tasarımı görüntü alanı boyutunun ötesinde düşünmenin ve daha iyi bileşen tabanlı ve özelleştirilmiş deneyimler için tüm bu yeni eksenleri dikkate almanın zamanı geldi.
Duyarlı tasarımda yeni bir çağ başladı ve siz de bu yeni çağı keşfetmeye başlayabilirsiniz.
web.dev/learnCSS
CSS becerilerinizi geliştirmek ve temel bilgileri gözden geçirmek isterseniz ekibimin web.dev'de yayınladığı yepyeni ve tamamen ücretsiz CSS kursuna ve referansına web.dev/learnCSS adresinden erişebilirsiniz.
Duyarlı tasarımın yeni çağına ve beraberinde gelecek bazı temel öğelere dair bu genel bakışı beğendiğinizi umuyorum. Ayrıca, bunun web tasarımının geleceği açısından ne anlama geldiği konusunda benim kadar heyecanlı olduğunuzu umuyorum.
Bu, kullanıcı arayüzü topluluğu olarak bileşen tabanlı stilleri ve yeni form faktörlerini benimsememiz ve kullanıcıya duyarlı deneyimler oluşturmamız için büyük bir fırsat sunuyor.