CSS'de Kapsayıcı Sorguları Nasıl Kullanılır?

Uzun bir süre boyunca medya sorguları, UI tasarımlarını farklı ekran boyutlarında duyarlı hale getirmenin tek yoluydu. Ama bunun bile sınırlamaları vardı. Medya sorgularını kullanmanın en büyük sorunlarından biri, bir öğeye en yakın kapsayıcı öğeye değil, yalnızca ekran boyutundaki değişikliklere göre stil uygulayabilmenizdi.

Bu sorunu çözmek için kapsayıcı sorguları tanıtıldı. Ayrıca, modüler UI "bileşenleri" oluşturarak çalışan React ve Vue.js gibi çerçevelerin popülaritesini artırdılar. CSS'nizde duyarlı öğeler oluşturmak için kapsayıcı sorgularını nasıl kullanacağınızı öğrenin.

Bu makalede kullanılan kod bu makalede mevcuttur. GitHub deposu ve MIT lisansı altında ücretsiz olarak kullanabilirsiniz.

Neden CSS Kapsayıcı Sorgularını Kullanmalısınız?

Kapsayıcı sorguların önemini anlamak için, kavramın daha kolay kavranmasını sağlayan bir örnek kullanalım. Ama önce, bundan başlangıç ​​kodunu klonlamalısın. GitHub deposu.

Depoyu başarıyla klonladıktan sonra kodu çalıştırın. Aşağıdaki resme benzer bir web sayfası bulacaksınız:

Burada iki sütundan oluşan bir ızgara düzeniniz var: ana bölüm ve kenar çubuğu. Ana bölüm iyi görünüyor, ancak (ana içerikten çok daha küçük olan) kenar çubuğu biraz ezilmiş görünüyor.

Düzen duyarlı. Tarayıcıyı küçülttüğünüzde kartın dikey bir sütuna dönüştüğünü görebilirsiniz:

Yani içerik okunamaz hale gelmeye başladığında layout, görselin içeriğin üzerine yığıldığı dikey bir sütuna dönüşüyor. Bu etki, ekranınızın tüm boyutuna göre öğelerin boyutunu belirlemenin tek yolu olan medya sorgularının bir sonucu olarak gelir.

Bu durumda, ekranınız 800 pikselden küçük olduğunda, her şeyi kullanarak üst üste yığarsınız. Flexbox hizalaması. Daha büyük ekranlarda içeriği yan yana yerleştiriyoruz:

@medya(maksimum genişlik: 800 piksel) {
.kart {
esnek yön: kolon;
 }
.kart başlığı { 
Genişlik: 100%;
 }
}

En uzun süredir, medya sorguları ana sorulardan biri olmuştur. web tasarım ilkeleri CSS ile duyarlı mizanpajlar oluşturmak için (ve çoğu şey için yeterince iyiydi). Ancak, medya sorgularının yeterli olmayacağı veya en azından uygun bir çözüm olmayacağı senaryolarla karşılaşmanız kaçınılmazdır.

Bu senaryolardan biri, bir kenar çubuğunuz olduğu zamandır (yukarıdaki örnekte yaptığımız gibi). Kenar çubuğunuz olduğu bu durumlarda, doğrudan kenar çubuğu kartını seçip küçültmeye çalışmanız gerekir:

.kenar çubuğu.kart {
/* Kenar çubuğu kartını küçültün */
}
@medya(maksimum genişlik: 800 piksel) {
/* Ekran 800 pikselden daha dar olduğunda sayfaya stil verin */
}

Çok sayıda öğeyle çalışıyorsanız bu oldukça karmaşık olabilir çünkü tüm öğeleri manuel olarak seçip yeniden boyutlandırmanız gerekir. Sonunda daha fazla kod ve ekstra karmaşıklık elde edersiniz.

Kapsayıcı sorgularının yararlı olabileceği yer burasıdır. Görünümünüzü boyutlandırma olarak kullanmaya zorlanmak yerine, sayfanızdaki herhangi bir öğeyi kapsayıcı olarak kullanabilirsiniz. Ardından, bu kapsayıcı, medya sorgularınızı temel alacağınız kendi genişliklerine sahip olabilir.

Konteyner Sorgusu Nasıl Oluşturulur

Kapsayıcı sorgusu oluşturmak için, kap olarak kullanmak istediğiniz öğeyi (bu durumda ana bölüm ve kenar çubuğu) hedefleyerek başlarsınız. Bloğun içinde, konteyner tipi ile satır içi boyut:

ana, .kenar çubuğu {
konteyner tipi: satır içi boyut
}

CSS dosyanızı kaydettiğinizde sayfada hiçbir değişiklik olmayacaktır. Ancak artık, ana bölüm ve kenar çubuğu bölümünde iç içe geçmiş kartları yeniden boyutlandırmak ve yeniden biçimlendirmek için kapsayıcı sorgularını kullanabilirsiniz. Aşağıdaki kapsayıcı sorgusunda, 500 piksel veya daha küçük ekranlarda kartları dikey sütunlara değiştiriyorsunuz:

@konteyner(maksimum genişlik: 500 piksel) {
.kart {
esnek yön: kolon;
 }
.kart başlığı {
Genişlik: 100%;
 }
}

Bu, normal bir medya sorgusu olarak çalışacaktır. Ancak ekranınızın boyutunu ölçmek yerine kapsayıcılarınızın (ana ve kenar çubuğu bölümleri) boyutunu ölçüyorsunuz. Artık kapsayıcınız 500px veya daha fazla olduğunda yatay görünümü kullanıyorsunuz. Aksi takdirde, dikey kullanırsınız (flexbox için varsayılan).

Yukarıdaki görüntüden, kenar çubuğunun 500 pikselden küçük olduğu için dikey bir biçim aldığını görebilirsiniz. Oysa ana içerik, 500 pikselden büyük olduğu için yatay düzenini koruyor. Tarayıcınızı küçültürseniz, kenar çubuğunuz ve ana içeriğiniz, 500 piksel veya altına ulaştıklarında dikey hizalamayı kullanır.

Konteyner sorgusu inanılmaz derecede güçlü çünkü şeyleri tarayıcının genişliğinin tamamı yerine konteynere göre yeniden boyutlandırmanıza izin veriyor. Bu, özellikle bileşenlerle (React veya Vue gibi) uğraşırken kullanışlıdır.

Kapsayıcı sorgularıyla, UI bileşenlerinizi kapsayıcılarına göre kolayca yeniden boyutlandırabilir ve tamamen kendi kendine yeten bileşenler oluşturmanıza olanak tanır.

Kapsayıcıları Adlandırma

oluşturduğunuzda @konteyner sorguda, önce sorguda hedeflediğiniz öğenin kapsayıcısını arar. Bizim durumumuzda, bu ana konteyner ve kenar çubuğu konteyneri olacaktır.

Ve kartlar başka bir kabın içinde olsa bile, diğer kapları görmezden gelir ve yalnızca kendisine en yakın kabı seçerdi. Bu, daha geniş bir CSS seçicileri olarak bilinen CSS kavramı.

Aşağıdaki örnekte, body öğesini bir kaba dönüştürdük:

vücut {
konteyner tipi: satır içi boyut;
}

Şimdi üç ayrı kapsayıcımız var: gövde, ana ve yan bölüm. Varsayılan olarak, kapsayıcı sorgusunda hedeflediğimiz kartlar gövdeden çok ana bölüme veya kenar çubuğuna yakındır. Bu nedenle, ana ve kenar çubuğu bölümlerini kapsayıcı sorgusu için kapsayıcı olarak kullanır.

Bu davranışı geçersiz kılmak için iki şey yapmanız gerekir. Öncelikle, body öğenize bir kapsayıcı adı vermeniz gerekir:

vücut {
konteyner tipi: satır içi boyut;
konteyner adı: vücut;
}

Ardından, kapsayıcı sorgunuzu oluşturduğunuzda, kapsayıcı adını şundan sonra belirtmeniz gerekir: @konteyner.

@konteyner vücut (maksimum genişlik:1000 piksel){
/* Gövde kabını hedefleyen CSS kuralları */
}

Bu, kapsayıcı olarak hedeflediğiniz öğeye en yakın kapsayıcı yerine belirli bir öğeyi kullanmak istiyorsanız kullanışlıdır. Başka bir deyişle, belirli bir kapsayıcıyı seçebilir ve düzeninize ince ayar yapabilirsiniz.

Konteyner Üniteleri

Konteynerlerin bir diğer harika özelliği de konteyner birimlerini kullanabilmenizdir. Bu birimler tıpkı görünüm birimi birimleri gibi çalışır (hepsi tamamen aynı türde birimlerdir). Ancak, konteyner birimleri cqw (genişliği ayarlamak için) ve cqh (yüksekliği ayarlamak için). Bu birimler, konteynerinizin tam genişliğini ve yüksekliğini belirler.

CSS kapsayıcısı sorguları, medya sorgularınız için belirli öğeleri referans noktaları olarak kullanmanıza olanak tanır. Bu teknik, içinde bulundukları kap ne olursa olsun bağımsız olarak durabilen modüler, kendi kendine yeten öğeler oluşturmak için oldukça kullanışlıdır. Ancak kapsayıcı sorguları, medya sorgularıyla aynı ilkeleri kullanır ve bu, en iyi yüzde bir CSS geliştiricisi olmak istiyorsanız, ustalaşmanız gereken bir şeydir.