Duyarlı web tasarımında yeni çağda makro ve mikro düzeni kontrol etme.
Günümüzde Duyarlı Tasarım
Günümüzde "duyarlı tasarım" terimini kullandığınızda, büyük olasılıkla bir tasarımı mobil boyutundan tablet boyutuna ve masaüstü boyutuna kadar yeniden boyutlandırırken düzeni değiştirmek için medya sorguları kullanmayı düşünüyorsunuz.
Ancak yakında, bu duyarlı tasarım algısı, sayfa düzeni için tablolar kullanmak kadar eski olarak düşünülebilir.
Görüntü alanına dayalı medya sorguları size bazı güçlü araçlar sunar ancak pek çok ayrıntıya sahip değildir. Kullanıcı ihtiyaçlarına yanıt verme yeteneğine sahip değildirler ve duyarlı stilleri bileşenlerin kendilerine eklemesi de mümkün değildir.
Bileşenlerinizi biçimlendirmek için genel görüntü alanı bilgilerini kullanabilirsiniz, ancak bileşenler yine kendi stillerine sahip değildir ve tasarım sistemlerimiz sayfa tabanlı değil bileşen tabanlı olduğunda bu işe yaramaz.
Neyse ki ekosistem değişiyor ve oldukça hızlı bir şekilde değişiyor. CSS gelişiyor ve duyarlı tasarımda yeni bir çağ yaklaşıyor.
Yaklaşık 10 yılda bir bu sorunla karşılaşıyoruz. 10 yıl önce, yaklaşık 2010-2012 arasında, mobil ve duyarlı tasarımda büyük bir değişime ve CSS3'ün ortaya çıkışına tanıklık ettik.
Sonuç bir kez daha, ekosistemin CSS'de oldukça büyük değişikliklere hazır olduğu ortaya çıkıyor. Chrome'daki ve web platformu genelindeki mühendisler, duyarlı tasarımın yeni çağı için prototipler oluşturuyor, teknik özellikleri belirliyor ve uygulama sürecini başlatıyor.
Bu güncellemeler arasında kullanıcı tercihine dayalı medya özellikleri, kapsayıcı sorguları ve katlanabilir ekranlar gibi yeni ekran türlerine yönelik medya sorguları bulunmaktadır.
Kullanıcıya duyarlı
Yeni kullanıcı tercihi medya özellikleri, web deneyimlerini kullanıcının özel tercihlerine ve ihtiyaçlarına uygun şekilde şekillendirmenize olanak tanır. Diğer bir deyişle, tercih medyası özellikleri, kullanıcı deneyimlerinizi kendi deneyimlerine uyarlamanıza olanak tanır.
Bu kullanıcı tercihi medya özellikleri şunlardır:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Daha birçok avantaj
Tercih özellikleri, kullanıcının işletim sisteminde belirlediği tercihleri dikkate alır ve özellikle erişilebilirlik ihtiyaçları olan kullanıcılar için daha sağlam ve kişiselleştirilmiş bir web deneyimi oluşturulmasına yardımcı olur.
prefers-reduced-motion
Azaltılmış hareket için işletim sistemi tercihlerini ayarlayan kullanıcılar genel olarak bilgisayarlarını kullanırken daha az animasyon ister. Bu nedenle, web'i kullanırken gösterişli 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ı daha az hareketi göz önünde bulundurarak tasarlayabilir ve bu tercih grubuna sahip olmayanlar için hareket odaklı bir deneyim oluşturabilirsiniz.
Bu kartın her iki tarafında da bilgi vardır. Temel azaltılmış hareket deneyimi bu bilgiyi gösteren bir geçiştir, hareketle geliştirilmiş deneyim ise bir kart döndürmedir.
İnternet'te bilgi aktarımında hareket çok önemli olduğundan, azaltılmış hareket "hareketin olmadığı" anlamına gelmemelidir. Bunun yerine, kullanıcılarınıza gereksiz hareketler olmadan yönlendiren sağlam bir temel deneyim sunun ve erişilebilirlik ihtiyaçları veya tercihleri olmadan bu deneyimi kullanıcılarınız için kademeli olarak iyileştirin.
prefers-color-scheme
Tercih edilen diğer bir medya özelliği de prefers-color-scheme'tir. Bu özellik, kullanıcı arayüzünüzü tercih ettiği temaya göre özelleştirmenize yardımcı olur. Kullanıcılar, ister masaüstü ister mobil cihazlarında olsun, işletim sistemlerinde günün saatine göre değişen açık, koyu veya otomatik temalar için bir tercih ayarlayabilir.
Sayfanızı CSS özel özelliklerini kullanarak ayarlarsanız renk değerleri kolayca değiştirilir. Medya sorgusunda yeni temaya dinamik olarak uyum sağlamak için backgroundColor ve textOnPrimary gibi renk teması değerlerinizi hızlı bir şekilde güncelleyebilirsiniz.
Bu tercih sorgularından bazılarını test etmeyi kolaylaştırmak amacıyla, her defasında sistem tercihlerinizi açmak yerine emülasyon için Geliştirici Araçları'nı kullanabilirsiniz.
Koyu tema için tasarım yapma
Koyu bir tema için tasarım yaparken sadece arka plan ve metin renklerini veya koyu kaydırma çubuklarını ters çevirmek yeterli değildir. Fark etmemiş olabileceğiniz birkaç durum vardır. Örneğin, görsel titreşimi azaltmak için koyu bir arka plandaki renklerin solgunluğunu azaltmanız gerekebilir.
Derinlik oluşturmak ve bir öğeyi öne çekmek için gölge kullanmak yerine, öğeyi öne çekmek için öğenin arka plan rengindeki ışığı kullanmak isteyebilirsiniz. Bunun nedeni, gölgelerin koyu renkli bir arka planda o kadar etkili olmamasıdır.
Koyu temalar, daha özelleştirilmiş bir kullanıcı deneyimi sunmakla kalmaz, AMOLED ekranlarda pil ömrünü önemli ölçüde iyileştirebilir. Bunlar, yeni ileri teknoloji telefonlarda gördüğümüz ekranlar ve mobil cihazlarda giderek daha popüler hale geliyor.
Koyu temalarla ilgili 2018 yılında yapılan bir Android araştırması, ekran parlaklığına ve genel kullanıcı arayüzüne bağlı olarak %60'a varan güç tasarrufu tasarrufu göstermiştir. %60'lık istatistik, uygulama kullanıcı arayüzünde koyu tema ile açık temanın kullanıldığı YouTube oynatma ekranını% 100 ekran parlaklığında duraklatılmış bir videoyla karşılaştırmadan elde edildi.
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 gelişen en heyecan verici alanlardan biri, genellikle öğe sorguları olarak da adlandırılan kapsayıcı sorgularıdır. Sayfa tabanlı duyarlı tasarımdan container tabanlı duyarlı tasarıma geçişin tasarım ekosistemini değiştirmek için neler getireceğini hafife almak oldukça zordur.
Kapsayıcı sorgularının sağladığı güçlü özelliklere bir örnek: Kart öğesinin, üst kapsayıcısına bağlı olarak bağlantı listesi, yazı tipi boyutları ve genel düzen de dahil olmak üzere herhangi bir stilini değiştirebilirsiniz:
Bu örnekte, iki farklı kapsayıcı boyutuna sahip, her ikisi de CSS ızgarası kullanılarak oluşturulan bir düzende yer kaplayan iki özdeş bileşen gösterilmektedir. Her bileşen benzersiz alan servis bölümüne sığar ve kendisini buna göre biçimlendirir.
Bu düzeyde esneklik yalnızca medya sorgularıyla mümkün değildir.
Kapsayıcı sorguları, duyarlı tasarım için çok daha dinamik bir yaklaşım sunar. Diğer bir deyişle, bu kart bileşenini bir kenar çubuğuna, hero bölüme veya sayfanın ana gövdesindeki bir ızgaraya yerleştirirseniz bileşenin duyarlı bilgileri ve boyutları görüntü alanına değil, kapsayıcıya göre belirlenir.
Bu, kuyruklu @container kuralı gerektirir. Bu, @media içeren medya sorgusuna benzer şekilde çalışır. Ancak @container, bilgi için 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;
}
/* ... */
}
İlk olarak, üst öğede kapsamayı ayarlayın. Ardından, kapsayıcı içindeki öğelerin herhangi birini boyutuna göre biçimlendirmek için min-width veya max-width kullanarak bir @container sorgusu yazın.
Yukarıdaki kod max-width kullanır ve bağlantıları display:none öğesine ayarlar. Ayrıca, kapsayıcının genişliği en fazla 850px olduğunda zaman yazı tipi boyutunu küçültür.
Kapsayıcı sorgu kartları
Demo bitki web sitesinde, herodaki kart, son görüntülenen öğelerin kenar çubuğu ve ürün tablosu da dahil olmak üzere ü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 hiçbir medya sorgusu kullanılmaz, yalnızca kapsayıcı sorguları kullanılır. Bu sayede her ürün kartı, alanını dolduracak şekilde doğru düzene kayabilir. Ö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ılmış olduğunda ızgarayı yeniden düzenler (yani minimum boyuta ulaşır).
.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 olarak "satır" esneme yönü olan display: flex değerine ayarlandığında kart düzeni yatay hale gelir.
Daha az alan sayesinde ürün kartları gösterilir. Her bir ürün kartı stilinin kendisi, tek başına global stillerle imkansız olacak bir şey.
Kapsayıcı Sorgularını Medya Sorguları ile Karıştırma
Kapsayıcı sorgularının çok fazla kullanım alanı vardır. Bunlardan biri takvim bileşenidir. Takvim etkinliklerini ve diğer segmentleri üst segmentlerinin mevcut genişliklerine göre yeniden düzenlemek için kapsayıcı sorgularını kullanabilirsiniz.
Bu demo kapsayıcı, takvim tarihinin ve haftanın gününün düzenini ve stilini değiştirmek için sorgulardır. Ayrıca, planlanan etkinliklerdeki kenar boşluklarını ve yazı tipi boyutunu, etkinliklerin alana daha iyi sığdırılması için ayarlayabilir.
Ardından, daha küçük ekran boyutları için düzenin tamamını değiştirmek üzere bir medya sorgusu kullanın. Bu örnekte, medya sorgularını (genel veya makro stilleri ayarlayarak) kapsayıcı sorgularıyla (kapsayıcının alt öğelerini ve mikro stillerini ayarlayarak) combine ne kadar güçlü olduğu gösterilmektedir.
Şimdi, oldukça incelikli tasarım kararları verilmesini sağlamak için aynı kullanıcı arayüzü bileşeninde Makro ve Mikro düzenler düşünebiliriz.
Kapsayıcı sorgularını bugün kullanma
Bu demoları artık Chrome Canary'de bayrak arkasında oynayabilirsiniz. Canary'de about://flags bölümüne gidip #enable-container-queries işaretini etkinleştirin.
Bu; contain özelliği için @container, inline-size ve block-size değerleri desteğini ve LayoutNG Grid uygulamasını etkinleştirir.
İşaret, ilgili Chrome Geliştirici Araçları özelliklerini de etkinleştirir. Geliştirici Araçları'nda kapsayıcı sorgularını nasıl inceleyeceğinizi ve hata ayıklayacağınızı öğrenin.
Kapsama alınan stiller
CSS çalışma grubu, kapsayıcı sorguları üzerinde geliştirme yapmak amacıyla bileşenler için özel isim ilerlemesi ve çarpışma önleme konularında yardımcı olmak amacıyla kapsamlı stiller hakkında aktif olarak tartışmaktadır.
Kapsamlı stiller, adlandırma çakışmalarını önlemek için geçişe ve bileşene özgü stil özelliklerine olanak tanır. CSS modülleri gibi birçok çerçeve ve eklenti, çerçeveler içinde bunu gerçekleştirmemize de olanak tanır. Bu spesifikasyon artık işaretlemeyi ayarlamaya gerek kalmadan okunabilir CSS'ye sahip bileşenlerimiz için kapsüllenmiş stilleri yerel olarak yazmamıza imkan tanıyacak.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
Kapsam oluşturma, "halı şeklinde" seçiciler oluşturmamıza olanak tanır. Böylece, bir stili nerede kapsüllenmiş olarak tutacağımızı ve daha genel bir stile referans vermek için bu kapsamlı stilin nereden ayrılacağını belirtebiliriz.
Sekmelerin kapsamlı stili almasını istediğimiz bir sekme paneli buna örnek olarak verilebilir. Sekmeler içindeki panel ise bir üst stil alır.
Form faktörüne duyarlı
Duyarlı tasarımın yeni çağında, form faktörlerindeki bir değişim ve web topluluğu olarak (şekil değiştiren ekran veya sanal gerçeklik gibi) tasarlamamız gereken şeylere ilişkin giderek artan olasılıklar.
Katlanabilir veya esnek ekranlar ile ekranın tamamını kaplayacak şekilde tasarlamak, form faktörü değişimini görebileceğiniz örneklerden biridir. Bu yeni form faktörlerini ve ihtiyaçları kapsamak için üzerinde çalışılan bir diğer özellik de ekran kapsama alanı.
Ekranı kaplamayla ilgili deneysel bir medya sorgusu, bu konuda bize yardımcı olabilir. Şu anda şöyle davranır: @media
(spanning: <type of fold>). Demoda, iki sütunlu bir ızgara düzeni oluşturulmaktadır:
birinin genişliği --sidebar-width (varsayılan olarak 5 rem), diğerinin
1fr olması. Düzen, tek bir dikey kata sahip ikili ekranda görüntülendiğinde --sidebar-width değeri, sol ekranı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, kenar çubuğunun (bu örnekte gezinme) ekranın birindeki alanı doldurduğu ve uygulama kullanıcı arayüzünün diğerini doldurduğu bir düzeni etkinleştirir. Böylece kullanıcı arayüzünde "kırışıklık" önlenir.
Chrome DevTools emülatöründe, doğrudan tarayıcıya yayılan ekran üzerinde hata ayıklama ve prototip oluşturma konusunda yardımcı olması için katlanabilir ekranları test edebilirsiniz.
Sonuç
Kullanıcı arayüzü tasarımını düz ekranın ötesinde keşfetmek, container sorgularının ve kapsamlı stillerin bu kadar önemli olmasının bir başka nedeni de. Size hem sayfa düzeni hem de genel stillerden bileşen stillerini ve kullanıcı stillerini ayırma imkanı sunarak daha dayanıklı ve duyarlı tasarıma olanak tanır. Bu, artık ekrana geçen nüanslar dahil olmak üzere sayfa tabanlı medya sorguları kullanarak makro düzenler tasarlayabileceğiniz anlamına geliyor. Aynı zamanda bileşenlerde container sorguları ile 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.
Bu yeni duyarlı sürüm.
Makro düzeni, mikro düzenle birleştirir ve tüm bunların ötesinde, kullanıcı özelleştirmesini ve form faktörünü dikkate alır.
Sadece bu değişikliklerin tümü web tasarımında önemli bir değişikliğe yol açacaktır. Ancak bunların hepsi bir araya geldiğinde, duyarlı tasarımı kavramsallaştırma yöntemimizde bile büyük bir değişimin farkına varıyorlar. Şimdi görüntü alanı boyutunun ötesinde duyarlı tasarım hakkında düşünmek ve tüm bu yeni eksenleri daha iyi bileşen tabanlı ve özelleştirilmiş deneyimler için düşünmeye başlamanın zamanı geldi.
Duyarlı tasarımın yeni çağına girdik ve şimdiden bunu kendiniz keşfetmeye başlayabilirsiniz.
web.dev/learnCSS
Şimdilik CSS oyununuza seviye atlatmak ve belki bazı temel bilgileri tekrar gözden geçirmek isterseniz ekibim tamamen ücretsiz bir CSS kursu başlatıyor ve web.dev için referans veriyor. Bu kursa web.dev/learnCSS adresinden erişebilirsiniz.
Duyarlı tasarımın yeni çağında ve bununla birlikte gelecek temel öğelerden bazılarını beğenmiş olduğunuzu umuyorum. Web tasarımının geleceği için bunun anlamı konusunda benim kadar heyecanlı olduğunuzu umuyorum.
Bu, kullanıcı arayüzü topluluğu olarak bileşen tabanlı stilleri ve yeni form faktörlerini benimsemek ve kullanıcıya duyarlı deneyimler oluşturmak için bize büyük bir fırsat sunuyor.