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 tabloları kullanmak kadar eski olarak kabul edilebilir.
Görünüm 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 yetenekleri yoktur.
Bileşenlerinizi stilize etmek için genel görünüm alanı bilgilerini kullanabilirsiniz ancak bileşenler yine de kendi stillerine sahip olmaz. Bu durum, tasarım sistemlerimiz sayfa tabanlı değil bileşen tabanlı olduğunda 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 duyarlı tasarımda yeni bir dönem başlıyor.
Bu durum yaklaşık 10 yılda bir yaşanır. 10 yıl önce, 2010-2012 civarında mobil ve duyarlı tasarım ile CSS3'ün ortaya çıkmasıyla büyük bir değişim yaşandı.
Bu nedenle, ekosistem CSS'de yine büyük değişiklikler yapmaya hazır. Chrome'daki ve web platformundaki mühendisler, duyarlı tasarımın yeni dönemi için prototipler oluşturuyor, özellikleri belirliyor ve uygulamaya başlıyor.
Bu güncellemeler arasında kullanıcı tercihlerine dayalı medya özellikleri, kapsayıcı sorguları ve katlanabilir ekranlar gibi yeni ekran türleri için medya sorguları yer alıyor.
Kullanıcıya duyarlı
Yeni kullanıcı tercihi medya özellikleri, web deneyimlerini kullanıcının kendi özel tercihlerine ve ihtiyaçlarına uygun şekilde tasarlamanıza olanak tanır. Bu, tercih edilen medya özelliklerinin kullanıcı deneyimlerinizi kullanıcılarınızın deneyimlerine göre 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 belirlediği tercihleri algılar ve özellikle erişilebilirlik ihtiyaçları olan kullanıcılar için daha güçlü ve kişiselleştirilmiş bir web deneyimi oluşturmaya yardımcı olur.
prefers-reduced-motion
Azaltılmış hareket için işletim sistemi tercihlerini ayarlayan kullanıcılar, bilgisayarlarını genel olarak kullanırken daha az animasyon isteğinde bulunuyor. Bu nedenle, web'i kullanırken gösterişli bir giriş ekranı, kart çevirme animasyonu, karmaşık bir yükleyici veya diğer gösterişli animasyonlardan hoşlanmayabilirler.
prefers-reduced-motion ile sayfalarınızı hareket azaltma özelliğini 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 bulunur. Temel azaltılmış hareket deneyiminde bu bilgileri göstermek için çapraz geçiş kullanılırken hareketin iyileştirildiği deneyimde kart çevirme kullanılır.
Hareket, internette bilgi aktarmak için çok önemli olduğundan prefers-reduced-motion özelliği "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 deneyimi, erişilebilirlik ihtiyaçları veya tercihleri olmayan kullanıcılarınız için kademeli olarak iyileştirin.
prefers-color-scheme
Bir diğer tercih edilen 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 cihazlarda kullandıkları işletim sisteminde açık, koyu ya da günün saatine göre değişen otomatik temaları tercih edebilir.
Sayfanızı CSS özel özellikleri kullanarak ayarlarsanız renk değerlerini değiştirmek kolaylaşır. Renk teması değerlerinizi (ör. backgroundColor ve textOnPrimary) medya sorgusundaki yeni temaya dinamik olarak uyacak şekilde hızlıca güncelleyebilirsiniz.
Bu tercih sorgularından bazılarını test etmeyi kolaylaştırmak için her seferinde sistem tercihlerini açmak yerine emülasyon için DevTools'u kullanabilirsiniz.
Koyu tema için tasarım
Koyu tema için tasarım yaparken yalnızca arka plan ve metin renklerini tersine çevirmek veya koyu kaydırma çubukları kullanmak yeterli değildir. Farkında olmayabileceğiniz birkaç nokta vardır. Ö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ölgeler kullanmak yerine, öğeyi öne çıkarmak için arka plan renginde ışık kullanmak isteyebilirsiniz. Bunun nedeni, gölgelerin koyu arka planda etkili olmamasıdır.
Koyu temalar yalnızca daha özelleştirilmiş bir kullanıcı deneyimi sunmakla kalmaz, aynı zamanda AMOLED ekranlarda pil ömrünü önemli ölçüde iyileştirebilir. Bu ekranlar, yeni nesil üst düzey telefonlarda görülmekte olup mobil cihazlarda giderek daha popüler hale gelmektedir.
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'lık istatistik, uygulama kullanıcı arayüzü için koyu tema kullanılarak% 100 ekran parlaklığında duraklatılmış bir video ile YouTube oynatma ekranının açık tema ile 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'deki en heyecan verici yeni alanlardan biri, genellikle öğe sorguları olarak da adlandırılan kapsayıcı sorgularıdır. Sayfaya dayalı duyarlı tasarımdan kapsayıcıya dayalı duyarlı tasarıma geçişin, tasarım ekosisteminin gelişimi açısından ne kadar önemli olduğunu anlatmak zordur.
Container sorgularının sunduğu güçlü özelliklere dair bir örneği aşağıda bulabilirsiniz. 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, CSS Grid kullanılarak oluşturulan bir düzende yer kaplayan iki farklı kapsayıcı boyutuna sahip iki özdeş bileşen gösterilmektedir. Her bileşen, kendine özgü alan tahsisine uyar ve buna göre stilini belirler.
Bu 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, bu kart bileşenini bir kenar çubuğuna, önemli bölümüne veya sayfanın ana gövdesindeki bir ızgaraya yerleştirirseniz bileşenin kendisinin duyarlı bilgilerini ve boyutlarını kapsayıcıya göre belirlediği, görüntü alanına göre belirlemediği anlamına gelir.
Bu, @container at-kuralını gerektirir. Bu kural, @media ile medya sorgusuna benzer şekilde çalışır ancak @container, görünüm alanı ve kullanıcı aracısı yerine üst kapsayıcıyı sorgulayarak bilgi alır.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Öncelikle üst öğede kapsama ayarlayın. Ardından, @container
kapsayıcıdaki öğeleri boyutlarına göre stilize etmek için min-width veya max-width kullanarak bir sorgu yazın.
Yukarıdaki kodda max-width kullanılır ve bağlantılar display:none olarak ayarlanır. Ayrıca, kapsayıcı 850px genişliğinden daha küçük olduğunda yazı tipi boyutu küçültülür.
Kapsayıcı sorgu kartları
Bu demo bitki web sitesinde, ana resimdeki, son görüntülenen öğelerin kenar çubuğundaki ve ürün ızgarasındaki dahil olmak üzere tüm ürün kartları, aynı işaretlemeye sahip, tam olarak aynı bileşendir.
Bu düzenin tamamını oluşturmak için medya sorgusu kullanılmamıştır. Yalnızca kapsayıcı sorguları kullanılmıştır. Bu sayede her ürün kartı, alanını doldurmak için uygun düzene geçebilir. Örneğin, ızgara, öğelerin kendi alanlarına akmasına izin vermek için minmax sütun düzenini kullanır ve bu alan çok sıkıştırıldığında (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 alan olduğunda kart düzeni, varsayılan flex-direction değeri "row" olan display: flex olarak ayarlanarak yatay hale gelir.
Daha az yer olduğunda ürün kartları üst üste gelir. Her ürün kartı kendi stilini oluşturur. Bu, yalnızca genel stillerle mümkün olmazdı.
Kapsayıcı sorgularını medya sorgularıyla karıştırma
Container 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, takvimin tarih ve haftanın günü düzenini ve stilini değiştirmek için kapsayıcı sorgularını kullanır. Ayrıca, planlanmış etkinliklerdeki kenar boşluklarını ve yazı tipi boyutunu ayarlayarak etkinliklerin alana daha iyi sığmasına yardımcı olur.
Ardından, daha küçük ekran boyutları için düzenin tamamını kaydırmak ü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 bunların mikro stillerini ayarlama) birleştirmenin ne kadar etkili olduğu gösterilmektedir.
Bu sayede, aynı kullanıcı arayüzü bileşeninde makro ve mikro düzenleri düşünerek gerçekten güzel ve ayrıntılı tasarım kararları verebiliriz.
Günümüzde kapsayıcı sorgularını kullanma
Bu demolar artık Chrome Canary'de bir flag'in arkasında oynanabilir. Canary'de about://flags sayfasına gidip #enable-container-queries işaretini etkinleştirin.
Bu işlem, contain özelliği ve LayoutNG Grid uygulaması için @container, inline-size ve block-size değerlerinin desteklenmesini sağlar.
Bu işaret, ilgili Chrome Geliştirici Araçları özelliklerini de etkinleştirir. Geliştirme Araçları'nda kapsayıcı sorgularını nasıl inceleyeceğinizi ve hatalarını nasıl ayıklayacağınızı öğrenin.
Kapsamlı stiller
Kapsayıcı sorgularını temel almak için seçicilerinizin erişimini sınırlamak üzere kapsamlı stillerle @scope kullanın.
Kapsamlı stiller, ad çakışmalarını önlemek için bileşene özgü stil oluşturmaya olanak tanır. Bu, CSS modülleri gibi birçok çerçeve ve eklentinin çerçeveler içinde yapmamızı sağladığı bir şeydir. Kapsamlı stiller, işaretlemeyi ayarlamanıza gerek kalmadan okunabilir CSS'ye sahip 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 belirleyebileceğiniz "halka ş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ı stiller almasını ancak bu sekmelerdeki panelin bu kapsamlı stillerden etkilenmemesini istediğiniz bir sekme paneli verilebilir.
Form faktörüne duyarlı
Duyarlı tasarımın yeni çağı hakkındaki sohbetimizin bir sonraki konusu, form faktörlerindeki değişim ve web topluluğu olarak tasarlamamız gerekenler (ör. şekil değiştiren ekran veya sanal gerçeklik) ile ilgili artan olasılıklar.
Katlanabilir veya esnek ekranlar ve ekranı kaplayacak şekilde tasarım yapmak, günümüzde form faktöründe bir değişim görebileceğimiz bir örnektir. Ekranı kaplama da bu yeni form faktörlerini ve ihtiyaçları karşılamak için üzerinde çalışılan bir diğer özelliktir.
Ekranı kaplayan medya için deneysel bir medya sorgusu bu konuda bize yardımcı olabilir. Şu anda aşağıdaki gibi çalışmaktadır: @media
(spanning: <type of fold>). Demoda iki sütunlu bir ızgara düzeni oluşturulur:
Bir sütunun genişliği --sidebar-width'tir (varsayılan olarak 5rem), diğer sütunun genişliği ise 1fr'dir. Düzen, tek bir dikey katlama içeren ç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, yan çubuğun (bu durumda gezinme) katlardan birinin alanını, uygulama kullanıcı arayüzünün ise diğerini doldurduğu bir düzeni etkinleştirir. Bu, kullanıcı arayüzünde "kırışıklık" oluşmasını önler.
Hataları ayıklamaya ve ekranı tarayıcıda doğrudan kapsayan prototipler oluşturmaya yardımcı olması için Chrome Geliştirici Araçları emülatöründe katlanabilir ekranları test edebilirsiniz.
Sonuç
Kullanıcı arayüzü tasarımını düz ekranın ötesinde keşfetmek, kapsayıcı sorguların ve kapsamlı stillerin neden bu kadar önemli olduğunun bir başka nedenidir. Bu özellikler, bileşen stillerini sayfa düzeninden, genel stillerden ve kullanıcı stillerinden ayırmanıza olanak tanıyarak 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ıyla mikro düzenler kullanın ve kullanıcı deneyimlerini benzersiz tercihlerine ve ihtiyaçlarına göre özelleştirmek için kullanıcı tercihlerine 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ü dikkate alır.
Bu değişikliklerin herhangi biri tek başına, web için tasarım yapma şeklimizde önemli bir değişime yol açacaktır. Ancak birlikte ele alındığında, duyarlı tasarımı kavramlaştırma şeklimizde büyük bir değişimi ifade ediyorlar. Artık duyarlı tasarımı, görünüm alanı boyutunun ötesinde düşünmenin ve daha iyi bileşen tabanlı ve özelleştirilmiş deneyimler için tüm bu yeni eksenleri göz önünde bulundurmanın zamanı geldi.
Duyarlı tasarımın yeni dönemi başladı ve bu yeni dönemi kendiniz keşfetmeye başlayabilirsiniz.
web.dev/learnCSS
CSS bilginizi bir üst seviyeye taşımak ve bazı temel bilgileri tekrar gözden geçirmek istiyorsanız ekibim web.dev'de yepyeni ve tamamen ücretsiz bir CSS kursu ile referans kaynağı sunuyor. Bu kaynağa web.dev/learnCSS adresinden erişebilirsiniz.
Duyarlı tasarımın yeni dönemi ve bu dönemle birlikte gelecek bazı temel öğelerle ilgili bu genel bakıştan keyif aldığınızı umuyor ve bu durumun 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, ayrıca kullanıcıya duyarlı deneyimler oluşturmamız için büyük bir fırsat sunuyor.